ES6 Promise and await

ES6 新增了Promise, async / await, 用于解决回调过深，使得代码过于复杂难懂的问题。

<html> 
<body> 
    <p>test await</p> 
</body> 
<script>
// function sleep(numberMillis) { 
//  var now = new Date(); 
//  var exitTime = now.getTime() + numberMillis; 
//  while (true) { 
//      now = new Date(); 
//      if (now.getTime() > exitTime) 
//      return; 
//  } 
// }

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
let dbObj = {
    post: async function(obj) {
        await timeout(1000 * obj.a);
        console.log("post " + obj.a);
        return obj.a * 2;
    }
};

async function dbFuc(db) {
  let docs = [{a:1}, {a:2}, {a:3}];

  for (let doc of docs) {
    await db.post(doc);
  }
  console.log("finished!");
}
// dbFuc(dbObj);

async function dbFuc2(db) {
  let docs = [{a:1}, {a:2}, {a:3}, {a:4}, {a:5}];
  let promises = docs.map((doc) => db.post(doc));

  let results = await Promise.all(promises);
  // let results = await Promise.race(promises);
  console.log(results);
}
dbFuc2(dbObj);

// async function asyncPrint(value, ms) {
//   await timeout(ms);
//   console.log(value)
// }

// asyncPrint('hello world', 3000);
</script>
</html>

网页分析记录
1. 在360搜索，so.com 搜索zepto,
2. 打开网址https://www.cnblogs.com/batsing/p/4881132.html
3. 这个代码雨是怎么实现的？
4. 用Chrome打开这个网址，鼠标右键菜单 View page source =>
5. 猜测是代码

<canvas id="matrixBG" ></canvas>

在这个网页下按F12，选择第一个Tab，“Elements”标签页下面，拉到底，把 id=”matrixBG” 改为id=”matrixBG2“
好了，代码雨立马不显示了，确定了就是个canvas 负责绘制代码雨。
在“Console”标签页下面, 可以找到报错信息

Uncaught ReferenceError: matrixBG is not defined
    at https://blog-static.cnblogs.com/files/batsing/matrix.js?_=1531994405077:17:5
    at Array.map (native)
    at draw (https://blog-static.cnblogs.com/files/batsing/matrix.js?_=1531994405077:14:14)
(anonymous) @ matrix.js?_=1531994405077:17
draw @ matrix.js?_=1531994405077:14
matrix.js?_=1531994405077:17 Uncaught ReferenceError: matrixBG is not defined
    at https://blog-static.cnblogs.com/files/batsing/matrix.js?_=1531994405077:17:5
    at Array.map (native)
    at draw (https://blog-static.cnblogs.com/files/batsing/matrix.js?_=1531994405077:14:14)
(anonymous) @ matrix.js?_=1531994405077:17
draw @ matrix.js?_=1531994405077:14

根据这个报错信息可以找到代码雨的实现代码在 https://blog-static.cnblogs.com/files/batsing/matrix.js
代码雨的实现代码, 如下

$(document).ready(function(){
//var s=window.screen;
var width = matrixBG.width = window.screen.width;
var height = matrixBG.height = window.screen.height;
var yPositions = Array(300).join(0).split('');
var ctx=matrixBG.getContext('2d');

var draw = function () {
  ctx.fillStyle='rgba(0,0,0,.05)';
  ctx.fillRect(0,0,width,height);
  ctx.fillStyle='#0F0';
  ctx.font = '10pt Georgia';
  yPositions.map(function(y, index){
    text = String.fromCharCode(30+Math.floor( Math.random()*95 ));
    x = (index * 10)+10;
    matrixBG.getContext('2d').fillText(text, x, y);
    if(y > 100 + Math.random()*1e4)
    {
      yPositions[index]=0;
    }
    else
    {
      yPositions[index] = y + 10;
    }
  });
};
RunMatrix();
function RunMatrix()
{
    if(typeof Game_Interval != "undefined") clearInterval(Game_Interval);
            Game_Interval = setInterval(draw, 33);
}
function StopMatrix()
{
    clearInterval(Game_Interval);
}
/**
//setInterval(draw, 33);
$("button#pause").click(function(){
StopMatrix();});
$("button#play").click(function(){RunMatrix();});
*/
});

matrixBG这个ID的canvas是在代码的哪个地方被引用的？这个问题比较难，研究一两天，才发现。
在View page source页面根本找不到 https://blog-static.cnblogs.com/files/batsing/matrix.js 这个js文件在哪里被引用了，
只有继续在source标签页下面查找。根据简单分析，这个js文件的引用代码应该在 /bundles/blog-common.js 这个文件，好了，source 左边的文件树，打开这个文件，嗯，这个文件是压缩过的，点击左下角的 {}, 美化压缩后的代码，chrome自动帮我们格式化好代码，方便分析阅读。
在格式化后的blog-common.js 中的每个函数里都一个一个的都设置断点，然后点击地址栏，按回车，发现可以进入函数的断点，不要点击刷新，进入不了设置好的断点，挨个排查，发现关键函数 loadBlogNews(), 好了，取消所有断点，只在623 行设置一个断点，点击地址栏，按回车，进入这个断点后，鼠标移动到 n 这个变量，发现了字符串在这个变量里，得到答案了。
这里有个 writeCapture 值得注意，在google上搜索，可以在github上找到 https://github.com/iamnoah/writeCapture
大概是用document.write 来动态修改 dom

为什么要设置HTML和body的高度
1、在怪异模式下，也就是网页头部不写DOCTYPE的时候，body可以作为html元素的根元素，设置它的高度为百分之百的时候（不考虑外边距），可以使的页面的高度和浏览器客户区相同。
在标准模式下，也就是网页头部写DOCTYPE的时候，body不是html页面的根元素，html才是根元素，如果仅仅设置body的100%，不设置html元素的高度为100%，那么body的高度不会生效，之所以不生效，是因为如果要以百分比设置元素的尺寸，必要以父元素的尺寸作为参考，如果父元素没有设置尺寸，自然不会生效。
2、在标准模式下，由于没有设置html的高度，所以body的高度100%就没有参考高度，于是也就导致div的百分比高度无效，如果将css代码中的第一行设置为:

html,body{height:100%;}

div的100%是从其上一级div的宽高继承来的，有一点很关键，就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。
https://wenda.so.com/q/1489259231496463

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>演示</title>
</head>

<body onresize="a()">
<p id="info"></p>
</body>
<script>
let info = document.getElementById("info");
function a(){
    info.innerHTML = "Hello";
}
a();
</script>
</html>

再chrome浏览器上打开上面的这个Html页面，看看body元素的高度，body的高度是由其子元素撑开的，
如果去掉标签，body的高度就变化了，正好是浏览器窗口的高度，主流网页都有标签

猜你喜欢