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的高度就变化了,正好是浏览器窗口的高度,主流网页都有 标签