Yvan Zhu's blog
跳转
上下选择
关闭
0%

发表于 更新于 分类于 Disqus： 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
var startTime = new Date().getTime(); 
var count = 0; 
setInterval(function(){ 
  var i = 0; 
  while(i++ < 100000000); 
}, 0); 
function fixed() { 
  count++; 
  var offset = new Date().getTime() - (startTime + count * 1000); 
  var nextTime = 1000 - offset; 
  if (nextTime < 0) nextTime = 0; 
  setTimeout(fixed, nextTime); 

  console.log(new Date().getTime() - (startTime + count * 1000)); 
} 
setTimeout(fixed, 1000);

参考

不会被 iOS 停掉的网页定时器

发表于 更新于 分类于 Disqus：

postMessage 可用于解决以下方面的问题：

  1. 页面和其打开的新窗口的数据传递
  2. 页面与嵌套的 iframe 消息传递
  3. 多窗口之间消息传递

发送

1
otherWindow.postMessage(message, targetOrigin, [transfer]);

otherWindow

其他窗口的一个引用，比如 iframe 的 contentWindow 属性、执行 window.open 返回的窗口对象、或者是命名过或数值索引的 window.frames。

message

要发送的数据。它将会被结构化克隆算法序列化，所以无需自己序列化（部分低版本浏览器只支持字符串，所以发送的数据最好用JSON.stringify() 序列化）。

targetOrigin

通过 targetOrigin 属性来指定哪些窗口能接收到消息事件，其值可以是字符串“*”（表示无限制）或者一个 URI（如果要指定和当前窗口同源的话可设置为”/“）。在发送消息的时候，如果目标窗口的协议、主机地址或端口号这三者的任意一项不匹配 targetOrigin 提供的值，那么消息就不会发送。

接收

1
2
3
4
5
6
7
window.addEventListener("message", (event)=>{
   var origin = event.origin;
   // 通常，onmessage()事件处理程序应当首先检测其中的origin属性，忽略来自未知源的消息
   if (origin !== "http://example.org:8080")
     return;
   // ...
}, false);

event 的属性有：

  • data: 从其他 window 传递过来的数据副本。
  • origin: 调用 postMessage 时，消息发送窗口的 origin。例如：“http://example.com:8080”。
  • source: 对发送消息的窗口对象的引用。可以使用此来在具有不同 origin 的两个窗口之间建立双向数据通信。

————————————————
版权声明：本文为CSDN博主「huangpb0624」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/huangpb123/article/details/83692019

发表于 更新于 分类于 Disqus：

最近看光哥的文章，说 Express 是洋葱模型。

我记得 Koa 是洋葱模型，而且这是其与 Express 不同的地方之一。
于是搜索引擎搜索了一通，只有说 Koa 是洋葱模型的，没有说 Express 是洋葱模型的。
而且一般都会提供下面的代码证明 Koa 是洋葱模型。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// koa-app.js
 
const Koa = require('koa2');
const app = new Koa();
 
app.use(async (ctx, next) => {
  console.log('第一层洋葱 - 开始')
  await next();
  console.log('第一层洋葱 - 结束')
});
 
app.use(async (ctx, next) => {
  console.log('  第二层洋葱 - 开始')
  await next();
  console.log('  第二层洋葱 - 结束')
});
 
app.use(async ctx => {
  console.log('    第三层洋葱 - 开始')
  ctx.body = 'Hello World';
  console.log('    第三层洋葱 - 结束')
});

app.listen(3000)

控制台打印如下

1
2
3
4
5
6
第一层洋葱 - 开始
  第二层洋葱 - 开始
    第三层洋葱 - 开始
    第三层洋葱 - 结束
  第二层洋葱 - 结束
第一层洋葱 - 结束

看样子真像那么回事

于是我用 Express 试了一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var express = require("express");
var app = express();

app.use((req, res, next) => {
  console.log('第一层洋葱 - 开始');
  next();
  console.log('第一层洋葱 - 结束');
});
app.use((req, res, next) => {
  console.log('  第二层洋葱 - 开始');
  next();
  console.log('  第二层洋葱 - 结束');
});
app.use((req, res, next) => {
  console.log('    第三层洋葱 - 开始');
  next();
  console.log('    第三层洋葱 - 结束');
});

app.listen(3000);

控制台打印和 koa 的例子是一样的
什么，难道 Express 也是洋葱模型

其实，以上例子并不能说明 Koa 是洋葱模型，洋葱模型的关键是，在请求返回之前，你的请求是不是经过中间件两次，而且按照先进后出的顺序。

Koa 模型
进洋葱 -> 出洋葱 -> 返回请求
Express 模型
进洋葱 -> 返回请求 -> 出洋葱

以下代码才真正能体现 Koa 的洋葱模型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
const Koa = require("koa2");
const app = new Koa();
const indent = (n) => new Array(n).join("&nbsp;");
app.use(async (ctx, next) => {
  ctx.body = "<h3>第一层洋葱 - 开始</h3>";
  await next();
  ctx.body += "<h3>第一层洋葱 - 结束</h3>";
});

app.use(async (ctx, next) => {
  ctx.body += `<h3>${indent(4)}第二层洋葱 - 开始</h3>`;
  await next();
  ctx.body += `<h3>${indent(4)}第二层洋葱 - 结束</h3>`;
});

app.use(async (ctx, next) => {
  ctx.body += `<h3>${indent(8)}第三层洋葱 - 开始</h3>`;
  next();
  ctx.body += `<h3>${indent(8)}第三层洋葱 - 结束</h3>`;
});
app.use((ctx) => {
  ctx.body += `<h3>${indent(12)}koa 核心业务</h3>`;
});

app.listen(3000);

浏览器显示结果

1
2
3
4
5
6
7
8
第一层洋葱 - 开始
   第二层洋葱 - 开始
       第三层洋葱 - 开始
           koa 核心业务
       第三层洋葱 - 结束
   第二层洋葱 - 结束
第一层洋葱 - 结束
（返回请求给前端）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var express = require("express");
var app = express();

const indent = (n) => new Array(n).join("&nbsp;");

app.use((req, res, next) => {
  res.body = "<h3>第一层洋葱 - 开始</h3>";
  next();
  res.body += "<h3>第一层洋葱 - 结束</h3>";
});
app.use((req, res, next) => {
  res.body += `<h3>${indent(4)}第二层洋葱 - 开始</h3>`;
  next();
  res.body += `<h3>${indent(4)}第二层洋葱 - 结束</h3>`;
});
app.use((req, res, next) => {
  res.body += `<h3>${indent(8)}第三层洋葱 - 开始</h3>`;
  next();
  res.body += `<h3>${indent(8)}第三层洋葱 - 结束</h3>`;
});
app.use((req, res) => {
  res.body += `<h3>${indent(12)}我的核心业务</h3>`;
  res.send(res.body);
});
app.listen(3000);

浏览器显示

1
2
3
4
第一层洋葱 - 开始
   第二层洋葱 - 开始
       第三层洋葱 - 开始
           我的核心业务（返回请求给前端）

因为 Express 先返回数据，再出洋葱，出洋葱的过程就没有意义了，因为结果已经返回给前端了，在出洋葱的过程里已经无法改变了。
但 Koa 是在出洋葱之后返回请求，进洋葱，出洋葱都可以改变返回的请求。

所以 Express 不算是洋葱模型。

参考：
【Node】深入浅出 Koa 的洋葱模型

发表于 更新于 分类于 Disqus：

小数的表示分为「定点法」和「浮点法」

定点法

其实，整数和小数的主要区别，我们可以不规范地理解为是否存在小数点，对吧？（其实整数也是有小数点的，我们这里暂且这么理解）那么要表示小数，只需要在整数表示的基础上，加一个小数点，不就可以了吗？没错，这就是定点数的思路。

​定点数使用二进制，小数点的位置是事先约定好的，在使用的过程中不能改变，这也是定点数的名称的由来。有的同学可能会问了，那么，小数如何从十进制换成定点数呢？不着急，且看下面的例子：

其实很简单，和整数部分的完全相反。连续将小数部分的值乘以2，对于每一次得到的数，若整数为0，则顺序记下一个0，若整数突破了1，则记下1，然后整数部分重置为0，小数部分继续重复上述操作，直到小数部分为0为止。就像下面这样：

十进制的0.125

0.125*2=0.25 （记下0）

0.25*2=0.5 （记下0，则目前为00）

0.5*2=1.0 （整数部分为1，记下1，则目前为001）

小数部分为0，转换结束（这里是刚好结束，若整数位进一后小数部分还有剩余，则把整数部分变成0再继续重复上面的算法）

则十进制0.125的二进制形式为0.001

二进制转十进制

二进制 101.011 转化为十进制



一般在现在计算机的应用中，定点数一般只有两种情况，第一种是小数点在符号位之后，也就是表示纯小数，第二种是在最后，也就是表示整数。这种表示方法的范围并不大，如果需要表示类似于这样的数值的话，那么用定点数的话就会占很大的空间。（毕竟你要很多很多个0才行，对吧）于是乎，我们的先人又开始秀智商了。

浮点法

表示一组数，0.123，1.23，12.3，123

如果此时你用定点数来表示的话，你会发现，这四组数字的表示方法完全不同。但是，我们的数学经验却又告诉我们，这几个数字其实是可以用一种通式来表示的，你应该已经想到了，就是科学计数法。如果使用科学计数法，那么这几组数字的通式可以表示为。貌似比什么定点数方便多了。

但是，我们知道，计算机是用来处理二进制的，那么，我们在二进制里面，可不可以打造一套类似于科学计数法的思路来表示小数呢——这就是浮点数的基本思路。浮点数的表示方法有点类似科学计数法，但是又比科学计数法要复杂。

参考：
https://blog.csdn.net/jarvan5/article/details/115012434
https://www.jianshu.com/p/104f53c663c9

发表于 更新于 分类于 Disqus：

题记

  1. 1 px 问题是如何产生的？
  2. 为什么会有 二倍图，三倍图？
  3. 苹果公司所说的 Retina 屏是啥？
  4. 屏幕清晰度由哪个参数决定，分辨率越高就一定越清晰吗？
  5. 屏幕尺寸相同可以通过分辨率判断屏幕清晰度，屏幕尺寸不同，如何判断哪块屏幕更清晰？

pt

物理单位
1 pt = 1/72 inch
1 inch = 72 pt
72 pt = 96 px
绝对长度单位，多用于打印

inch

1 inch = 2.54 cm

px

1px 问题
获取设备像素比
js
window.devicePixelRatio
css
-webkit-min-device-pixel-ratio

dpr (devicePixelRatio)

设备像素比
dpi 和 dpr
window.devicePixelRatio是设备物理像素和设备独立像素（device-independent pixels，dips）之间的比率。是一个约数？
window.devicePixelRatio = 物理像素 / 设备独立像素

DIP (Device Independent Pixel)

设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素
css 像素是逻辑像素，并不是真实像素
Windows / Mac 电脑都可以设置设备独立像素

dpi (dots per inch)

和 ppi 基本相同

ppi (pixels per inch)

ppi 计算公式

ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（例如苹果公司的Retina显示屏）

总结

CSS 只与设备独立像素有关系，尺寸相同，设备独立像素相同的屏幕，网页上的同一张图片显示的尺寸是相同的，只不过清晰度会有所不同。所以会有二倍图，三倍图。
宽 100px 的图片在 1:1 的屏幕上css设置为 100px，在 2:1 的屏幕上可以使用200px 的图片，css 同样设置为 100px 。
设备独立像素 (DIP) 是与设备无关的，可以调整的逻辑像素。

参考：

  1. 1 pt 的图形大小与其在屏幕上显示出的大小之间有什么关系？

  2. pt

  3. 设备像素比（devicePixelRatio）

  4. CSS像素、设备独立像素、设备像素之间关系

  5. 一文搞懂像素（px）、分辨率、CSS长度单位

发表于 更新于 分类于 ， ， Disqus：

取值

font-weight可取值：100～900和normal、bold、bolder、lighter。

字体所拥有的字重的数量实际上很少存在满足有9个字重刚好跟100～900的CSS字重一一对应的情况，通常字体拥有的字重数量为4至6个。

不必担心，起码400和700对应的字重至少是每种字体必备的，譬如常见的 Arial、Helvetica、Georgia等等，只有400(normal)和700(bold)。

normal、bold

400 等同于 normal，而 700 等同于 bold。

bolder、lighter

bolder、lighter表示其字重值是基于从其父元素继承而来的字重计算所得的，与normal、bold所代表的字重并无关系。

参考
作者：人不中二枉少年
链接：https://www.jianshu.com/p/f9c6f9729fbb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

发表于 更新于 分类于 ， ， Disqus：

问题

为什么 forEach 不行，而 普通 for 循环 和 for…of 却正常呢？

我们得先从 forEach 的源码 看起：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
// Production steps of ECMA-262, Edition 5, 15.4.4.18
// Reference: http://es5.github.io/#x15.4.4.18
if (!Array.prototype.forEach) {

  Array.prototype.forEach = function(callback/*, thisArg*/) {

    var T, k;

    if (this == null) {
      throw new TypeError('this is null or not defined');
    }

    // 1. Let O be the result of calling toObject() passing the
    // |this| value as the argument.
    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get() internal
    // method of O with the argument "length".
    // 3. Let len be toUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If isCallable(callback) is false, throw a TypeError exception. 
    // See: http://es5.github.com/#x9.11
    if (typeof callback !== 'function') {
      throw new TypeError(callback + ' is not a function');
    }

    // 5. If thisArg was supplied, let T be thisArg; else let
    // T be undefined.
    if (arguments.length > 1) {
      T = arguments[1];
    }

    // 6. Let k be 0.
    k = 0;

    // 7. Repeat while k < len.
    while (k < len) {

      var kValue;

      // a. Let Pk be ToString(k).
      //    This is implicit for LHS operands of the in operator.
      // b. Let kPresent be the result of calling the HasProperty
      //    internal method of O with argument Pk.
      //    This step can be combined with c.
      // c. If kPresent is true, then
      if (k in O) {

        // i. Let kValue be the result of calling the Get internal
        // method of O with argument Pk.
        kValue = O[k];

        // ii. Call the Call internal method of callback with T as
        // the this value and argument list containing kValue, k, and O.
        callback.call(T, kValue, k, O);
      }
      // d. Increase k by 1.
      k++;
    }
    // 8. return undefined.
  };
}

摘抄最重要的部分：

1
2
3
4
5
6
7
8
9
10
11
12
13
/* 
O 为传入数组
len 为传入数组长度
callback 为传入回调函数
*/
while (k < len) {
  var kValue; 
  if (k in O) { 
    kValue = O[k]; 
    callback.call(T, kValue, k, O);
  } 
  k++;
}

可以看到 callback.call(T, kValue, k, O); 这一句，callback 其实是我们传入的一个被 async 封装的 promise 对象，而 Array.prototype.forEach 内部并未对这个 promise 对象做任何处理，只是忽略它。

解决方案

如果我们尝试把 Array.prototype.forEach 改造一下，让它不要忽视，就可以达到效果了，如下：

1
2
3
4
5
Array.prototype.forEach = async function(callback/*, thisArg*/) {
  // ………
  await callback.call(T, kValue, k, O);
  // ………
};

你总不能去侵入式的改造Array.prototype.forEach吧！所以最简单的办法就是抛弃 forEach，使用 for…of 或者 for 循环！

参考

发表于 更新于 分类于 Disqus：

Emoji Raw Emoji Code Description
🎉 :tada: Initial Commit
✨ :sparkles: when introducing New Features
🐎 :racehorse: when improving performance
⚡ :zap: when introducing Backward-InCompatible Features, maybe with @CHANGED Comment Tag
🚀 :rocket: Anything related to Deployments/DevOps
📚 :books: when writing docs
🎨 :art: when improving the format/structure of the code
📝 :memo: Add or update documentation.
📝 :pencil: when performing minor changes/fixing the code or language
🐛 :bug: when reporting a bug, with @FIXMEComment Tag
🔨 :hammer: when refactoring code
🔧 :wrench: Add or update configuration files.
💄 :lipstick: when improving UI/Cosmetic
💅 :nail_care: style
🍻 :beers: Write code drunkenly.
📰 :newspaper: when creating a new file
🚑 :ambulance: when fixing a bug
🐧 :penguin: when fixing something on Linux
🍎 :apple: when fixing something on Mac OS
🏁 :checkered_flag: when fixing something on Windows
🔥 :fire: when removing code or files, maybe with @CHANGED Comment Tag
🚜 :tractor: when change file structure. Usually together with 🎨
☔ :umbrella: when adding tests
🔬 :microscope: when adding code coverage
💚 :green_heart: when fixing the CI build
🔒 :lock: when dealing with security
⬆️ :arrow_up: when upgrading dependencies
⬇️ :arrow_down: when downgrading dependencies
⏩ :fast_forward: when forward-porting features from an older version/branch
⏪ :rewind: when backporting features from a newer version/branch
👕 :shirt: when removing linter/strict/deprecation warnings
♿ :wheelchair: when improving accessibility
🌐 :globe_with_meridians: when dealing with globalization/internationalization/i18n/g11n
🚧 :construction: WIP(Work In Progress) Commits, maybe with @REVIEW Comment Tag
💎 :gem: New Release
🥚 :egg: New Release with Python egg
🎡 :ferris_wheel: New Release with Python wheel package
🔖 :bookmark: Version Tags
🔈 :speaker: when Adding Logging
🔇 :mute: when Reducing Logging
💡 :bulb: New Idea, with @IDEA Comment Tag
❄️ :snowflake: changing Configuration, Usually together with 🐧 or 🎀 or 🚀
🎀 :ribbon: Customer requested application Customization, with @HACK Comment Tag
🐘 :elephant: PostgreSQL Database specific (Migrations, Scripts, Extensions, …)
🐬 :dolphin: MySQL Database specific (Migrations, Scripts, Extensions, …)
🍃 :leaves: MongoDB Database specific (Migrations, Scripts, Extensions, …)
🏦 :bank: Generic Database specific (Migrations, Scripts, Extensions, …)
🐳 :whale: Docker Configuration
🤝 :handshake: when Merge files
🍒 :cherries: when Commit Arise from one or more Cherry-Pick Commit(s)

参考
链接：https://www.jianshu.com/p/0bfdf5c41696
https://gitmoji.dev/
https://github.com/slashsBin/styleguide-git-commit-message