hsipeng / crazy_fed Goto Github PK

一、Doctype作用是什么？

二、严格模式与混杂模式如何区分？它们有何意义？

• 严格模式：又称标准模式，是指浏览器按照 W3C 标准解析代码。

• 混杂模式：又称怪异模式或兼容模式，是指浏览器用自己的方式解析代码。

• 如何区分：浏览器解析时到底使用严格模式还是混杂模式，与网页中的 DTD 直接相关。

1、如果文档包含严格的 DOCTYPE ，那么它一般以严格模式呈现。（严格 DTD ——严格模式）
2、包含过渡 DTD 和 URI 的 DOCTYPE ，也以严格模式呈现，但有过渡 DTD 而没有 URI （统一资源标识符，就是声明最后的地址）会导致页面以混杂模式呈现。（有 URI 的过渡 DTD ——严格模式；没有 URI 的过渡 DTD ——混杂模式）
3、DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现。（DTD不存在或者格式不正确——混杂模式）
4、HTML5 没有 DTD ，因此也就没有严格模式与混杂模式的区别，HTML5 有相对宽松的语法，实现时，已经尽可能大的实现了向后兼容。（ HTML5 没有严格和混杂之分）

意义：

严格模式与混杂模式存在的意义与其来源密切相关，如果说只存在严格模式，那么许多旧网站必然受到影响，如果只存在混杂模式，那么会回到当时浏览器大战时的混乱，每个浏览器都有自己的解析模式。

不要使用JavaScript内置的parseInt()和Number()函数，利用map和reduce操作实现一个string2int()函数。
分析：把一个字符串"13579"先变成Array——[1, 3, 5, 7, 9]，再利用reduce()就可以写出一个把字符串转换为Number的函数。

'use strict';

function string2int(s) {
    function str2num(str){
        var strArr = str.split('');               //把字符串分割成字符串数组
        function toInt(data){
            return +data;                  //通过js的弱类型转换，实现字符类型到数字类型的转换
        }
        var numArr = strArr.map(toInt);           //通过map()把字符串数组转换成数字数组
        return numArr;
    }
    var num = str2num(s);
    var res = num.reduce(function (x,y) {        //通过reduce()把数字数组转换成数字量
        return x*10+y;
    }); 
    return res;
}
// 测试:
if (string2int('12345') === 12345 && string2int('12300') === 12300) {
    if (string2int.toString().indexOf('parseInt') !== -1) {
        alert('请勿使用parseInt()!');
    } else if (string2int.toString().indexOf('Number') !== -1) {
        alert('请勿使用Number()!');
    } else {
        alert('测试通过!');
    }
}
else {
    alert('测试失败!');
}

注：map()是数组Array的一个方法，传入一个指定方法，返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：
[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
js中把字符类型转成数字类型的方法主要有三种：转换函数parseInt()、强制类型转换Number()、利用js变量弱类型转换。

选择器

• 1.id选择器（ # myid）

• 2.类选择器（.myclassname）

• 3.标签选择器（div, h1, p）

• 4.相邻选择器（h1 + p）

• 5.子选择器（ul > li）

• 6.后代选择器（li a）

• 7.通配符选择器(*)

• 8.属性选择器（a[rel = "external"]）

• 9.伪类选择器（a: hover, li: nth - child）

可继承的样式：

font-size font-family color, UL LI DL DD DT;

不可继承的样式：

border padding margin width height

优先级

优先级就近原则，同权重情况下样式定义最近者为准，载入样式以最后载入的定位为准;

优先级为:

!important > id > class > tag

important 比 内联优先级高

优先级数值计算

1. 内联样式表的权值最高 1000；

2. ID 选择器的权值为 100

3. Class 类选择器的权值为 10

4. HTML 标签选择器的权值为 1

CSS3新增伪类举例

p:first-of-type 选择属于其父元素的首个元素的每个元素。

p:last-of-type 选择属于其父元素的最后元素的每个元素。

p:only-of-type 选择属于其父元素唯一的元素的每个元素。

p:only-child 选择属于其父元素的唯一子元素的每个元素。

p:nth-child(2) 选择属于其父元素的第二个子元素的每个元素。

:enabled :disabled 控制表单控件的禁用状态。

:checked 单选框或复选框被选中。

Date.now();

async await
需要babel 转码:

If you just use in development. You can do this:

npm i babel-cli babel-plugin-transform-async-to-generator babel-polyfill --save-dev

the package.json would be like this:

"devDependencies": {
   "babel-cli": "^6.18.0",
   "babel-plugin-transform-async-to-generator": "^6.16.0",
   "babel-polyfill": "^6.20.0"
}

create .babelrc file and write this:

{
  "plugins": ["transform-async-to-generator"]
}

and then, run your async/await script like this:

./node_modules/.bin/babel-node script.js

.example .pp = E F 是后代选择器。
.example.pp2 则是在一个元素上，这个元素包括这两个类才会有效果。
分四种情形：
一：#a,b{…………｝ id叫a和一个标签是b的样式
二：#a b{…………｝ id叫a下面的一个标签是b的样式
三：#a:b{…………｝ id叫a的伪类b的样式(如a:link{background:#00CCFF} a:hover{background:#FF0000})
四：#a.b{…………｝ id叫a的下面的class叫b的样式

总结出以下4点：
1、对于path中的变量，均可以使用req.params.xxxxx方法
2、对于get请求的?xxxx=,使用req.query.xxxxx方法
3、对于post请求中的变量，使用req.body.xxxxx方法
4、以上三种情形，均可以使用req.param()方法，所以说req.param()是req.query、req.body、以及req.params获取参数的三种方式的封装。

根据HTML5标准，setTimeOut推迟执行的时间，最少是4毫秒。如果小于这个值，会被自动增加到4。这是为了防止多个setTimeout(f,0)语句连续执行，造成性能问题。
另一方面，浏览器内部使用32位带符号的整数，来储存推迟执行的时间。这意味着setTimeout最多只能推迟执行2147483647毫秒（24.8天），超过这个时间会发生溢出，导致回调函数将在当前任务队列结束后立即执行，即等同于setTimeout(f,0)的效果。

PS:
avascript语言的执行环境是"单线程"（single thread）。
所谓"单线程"，就是指一次只能完成一件任务。如果有多个任务，就必须排队，前面一个任务完成，再执行后面一个任务，以此类推。

一、回调函数(同步操作变异步操作)

这是异步编程最基本的方法。
假定有两个函数f1和f2，后者等待前者的执行结果。

如果f1是一个很耗时的任务，可以考虑改写f1，把f2写成f1的回调函数。

function f1(callback){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　callback();
　　　　}, 1000);
　　}

执行代码就变成下面这样：

　　f1(f2);

二、事件监听

另一种思路是采用事件驱动模式。任务的执行不取决于代码的顺序，而取决于某个事件是否发生。
还是以f1和f2为例。首先，为f1绑定一个事件（这里采用的jQuery的写法）。

f1.on('done', f2);

　
上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　f1.trigger('done');
　　　　}, 1000);
　　}

f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2。

三、发布/订阅

上一节的"事件"，完全可以理解成"信号"。
我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

这个模式有多种实现，下面采用的是Ben Alman的Tiny Pub/Sub，这是jQuery的一个插件。
首先，f2向"信号中心"jQuery订阅"done"信号。

　　jQuery.subscribe("done", f2);

然后，f1进行如下改写：

　　function f1(){
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　jQuery.publish("done");
　　　　}, 1000);
　　}

jQuery.publish("done")的意思是，f1执行完成后，向"信号中心"jQuery发布"done"信号，从而引发f2的执行。
此外，f2完成执行后，也可以取消订阅（unsubscribe）。

　　jQuery.unsubscribe("done", f2);

四、Promises对象

Promises对象是CommonJS工作组提出的一种规范，目的是为异步编程提供统一接口。
简单说，它的**是，每一个异步任务返回一个Promise对象，该对象有一个then方法，允许指定回调函数。比如，f1的回调函数f2,可以写成：

　　f1().then(f2);

f1要进行如下改写（这里使用的是jQuery的实现）：

　　function f1(){
　　　　var dfd = $.Deferred();
　　　　setTimeout(function () {
　　　　　　// f1的任务代码
　　　　　　dfd.resolve();
　　　　}, 500);
　　　　return dfd.promise;
　　}

这样写的优点在于，回调函数变成了链式写法，程序的流程可以看得很清楚，而且有一整套的配套方法，可以实现许多强大的功能。
比如，指定多个回调函数：

　　f1().then(f2).then(f3);

再比如，指定发生错误时的回调函数：

　　f1().then(f2).fail(f3);

而且，它还有一个前面三种方法都没有的好处：如果一个任务已经完成，再添加回调函数，该回调函数会立即执行。所以，你不用担心是否错过了某个事件或信号。这种方法的缺点就是编写和理解，都相对比较难。

知识点Link

Asynchronous JS