很早很早以前，我对css选择器的概念一直停留在 #id .class ，直到我看到了mdn的Pseudo-classes(伪类class).

p:not(.class)

<span class='class'>不被选择</span>
<span class="bbb">选中</span>

p:last-child;;;p:first-child p:nth-child(2)

选择第一个子元素，最后一个子元素 ，第二个子元素，强大的select选择器配合document.querySelectorAll('p:last-child')进行筛选简直方便极了，和正则选择字符串一样方便

div ul:not(:first-child):not(:last-child) {
    background-color: #900;
}

:empty 选择没有子元素的元素

div.container:empty {
    background-color: #900;
}

button > button > button 选择兄弟元素的兄弟元素

button>button>button {
    background-color: #900;
}

input:checked 选择已经被勾选的 input元素

结论：善用伪类元素选择器，省去了大量无效class类名，id，，无效js代码。增加了代码的可读性

第18章 class Class基本语法

JavaScript语言的传统方法是通过构造函数定义并生成新对象。下面举个例子。

  this.x = x;
  this.y = y;
Point.prototype.toString = function(){
  return `(${this.x} , ${this.y})`
}

上面这种写法和Java，c++区别很大，这让程序员很困惑。
es6提供了新的语法糖ckass

class Point{
  constructor(x,y){
    this.x = x;
    this.y = y;
  }
  toString（）{
    return `(${this.x} , ${this.y})`
  }
}

constructor是构造器的方法。而this则代表了该对象。class就是es5的构造函数的另一种写法。更加语义化。

class Point{}
Point === Point.prototype.constructor.Point   //true

下面写法也是对等的

class Point {
  constructor() {
    // ...
  }
  toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
Point.prototype = {
	constructor(){}
	toString(){}
	toValue(){}
}

而在类的实例上面调用方法，其实就算调用原型上面的方法。

class B{}
let b = new B();

这些方法都是不可枚举的.通过class内部命名的方法，和通过prototype命名的方法最大的不同是一个是可枚举的，另一个是不可枚举的。而添加static关键字的方法会被添加到Point的原型，因此仅仅只可以内部使用。

class Point {
  constructor() {
    // ...
  }
  static toString() {
    // ...
  }
  toValue() {
    // ...
  }
}
class Point1 {}
Point1.prototype = {
  constructor() {},
  toString() {},
  toValue() {},
};
const p = new Point();
const p1 = new Point1();
console.log(Object.keys(Point.prototype));
console.log(Object.keys(Point1.prototype));
console.log(p);
console.log(p1);
console.log(Point.prototype.constructor === Point);      // true
console.log(Point1.prototype.constructor === Point1);      // true
console.log(Point1.prototype.constructor == Point1);      // true  

其中虚的是不可枚举的。

constructor 方法

这个方法是默认存在的方法，，通过new命令生成对象实例时候自动调用的方法，默认返回它本身这个实例化对象this，当然可以指定返回其他对象。

实例对象

生成实例对象和es5一样，如果没有new命令，则会报错，除非你在他前面添加static 作为静态方法，就可以。下面可以看到，constructor里面的x，y， 静态aa方法，普通bb方法

class Point {
  constructor() {
    // ...
    this.x = 1;
    this.y = 1;
  }
  static aa() {}
  bb() {}
}
const p = new Point();
console.log(p);
console.log(Object.keys(Point.prototype));

但是当aa，bb都是普通方法的时候，又是另一个样子，奇了个葩

不存在的变量提升hoist，他这个和es5的函数提升完全不一样

new Foo(); // referenceError: Me is not defined
class Foo{};

class 的继承

class Foo exntend foo {}
下面介绍super()

class Point {
  constructor() {
    this.x = 1;
    this.y = 1;
  }
  getname() {
    return this.name;
  }
}
class ColorPoint extends Point {
  constructor() {
    super();
    this.name = 'ColorPoint';
  }
  aaa() {
    return 'ColorPoint';
  }
}
const p = new ColorPoint();
console.log(p);

这里ColorPoint存在两条原型链，一条是继承方法，另一条是继承constructor里面定义的变量。
下面由3钟继承的特殊情况

• 第一种，子类继承Object
  class A extends Object {}
  其实就算对Object的复制
• 第二种不继承
  class A{}
  其实就是默认继承Function。
• 第三种继承null
  class A extends null{}
  真正的不继承任何东西

super 关键字

他代表了父类的实例。

class类中的getter和setter

class Point {
  constructor() {
    this.x = 1;
    this.y = 1;
    this.name = 'pengliheng';
  }
  getname() {
    return this.name;
  }
  get prop() {
    return this.name;
  }
  set prop(value) {
    console.log(`setter: ${value}`);
  }
}
const p = new Point();
p.prop;                             // setter: pengliheng
p.prop = 'hhhah';            
p.prop;                            //  setter: hhhah

定义一个属于自己的Array，不要再原生Array上面扩展方法，如果需要，请看下面代码

class VersionArray extends Array {
  constructor() {
    super();
    this.history=[[]];
  }
  commit() {
    this.history.push(this.slice());
  }
  revert(){
    this.splice
  }
}

18.5 class 的 静态方法

const a = 'test';
const b = 'test';
a===b // true

const a = {};
const b = {};
a===b // false

const a = [];
const b = [];
a===b // false
[] === []  //false

const a = [];
const b = a;
a===b // true    ，为什么呢? 因为point   ，a point b

下面看一下他们为什么不相等

class Point {
  constructor() {
    this.x = 1;
    this.y = 1;
    this.name = 'pengliheng';
  }
  static getname() {
    return this.name;
  }
  getTName() {
    console.log(new Point() === this);
  }
}
console.log(Point.getname());     // 静态方法，不需要实例化就能获取
const p = new Point();
p.getTName();                             // false，{} !== {},即便是同样的对象，他们也互不相等。     普通方法需要实例化。

静态属性

19章装饰器

装饰器是一种表达式，他能对类的行为发生改变，，这种改变发生在编译阶段，
有点超前，自己去了解吧，如果你不是用的react或者经常用class面向对象编程，并且需要继承属性的时候，你都用不到装饰器。

20章module，这个以后再说，书里面没有提到module模块化的原理，如何引入的。没有讲的深入。

21章编程风格（关于es5过度到es6的使用建议）

####使用 let / constant 替代 var
由于模块化默认使用'use strit'严格模式
所以以后应该是严格模式默认的。
使用优先级
const>let>var
const 的使用是因为他是常量，能够给人直观的，如果你要改变常量，建议去定义一个新的常量。这也是函数式编程风格所要求的。
坚持遵循 先声明，再使用的编程规范。

####使用模板字符串添加变量
使用单引号

// bad
const a = '<div>'+value+'</div>'
// good   更具语义化
const a = `<div>${value}</div>`

解构变量

// bad
var a = 1,b=2,c=3;
//good
const a = 1;
const b = 2;
const c = 3;
// best,,,,,更具语义化。
const [a,b,c] = [1,2,3];

对象

熟悉typescript的你可能知道，它推崇的是尽量使用常量，以及变量+类型
声明了一个对象，尽量不要去改变它，如果真的要改变它，建议使用以下

// bad
const a = {};
a.x = 3;
// 

使用...扩展符号来复制数组

var a = [...arr];
var b = Array.from(arr);

箭头函数 => 推荐使用，

他消灭了 绑定 bind

推荐使用class来命名对象

使用Eslint代码检查工具。。。

统一规范编程风格，

结束语，不写了。烂书越写越烦。

前言

经常遇到的问题，vuex当中的数据可以同步到每一个组件视图区，但是。复杂数据中的属性被修改却无法同步

vue数据绑定

vue会自动循环state当中的所有属性，为每一个属性添加set和get，进行监听，但是问题是，如果我们修改的是其中某个深层属性呢？

当我修改下面这个地址设置的默认属性，我希望通过v-for循环所有地址数据，再通过v-if判断所有地址中id和默认地址id相同，则显示他为默认地址。这个时候我发先vuex当中的属性是 正确被改变了的，但是真实视图区view中的中的v-if判断却没有做出正确显示。

这个时候，我建议取巧，利用组件中的computed计算属性，

export default {
  store,
  data() {
    return {
      myInfo: store.state.myInfo,
      company: store.state.company
    };
  },
  computed:{
    defaultAddress: ()=> store.state.myInfo.address.default
  },
  methods: {
    setDefault(id){
      store.commit("syncState", {
        stateName: "myInfo",
        stateValue: {
          address: Object.assign({}, store.state.myInfo.address, {
            default: id
          })
        }
      });
      store.commit("syncSession", "myInfo");
    }
  }
};

设置好计算属性之后，发现属性可以同步了。计算属性会时时刻刻监听vuex中的某个深层属性的变化，同步到v-if判断。
好吧，就这样
结束。

由于本人实力不够，还是坚持继续阅读

第一章

ECMAScript7

js的新标准从提案变成正式总共经历5个阶段

• Sstage 0：strawman(展示阶段)
• Sstage 1：Propasal(征求意见阶段)
• Sstage 2：Draft(草案)
• Sstage 3：Candidate(候选阶段)
• Sstage 4：Finished(定案阶段)

第三章 解构变量

交换

[a,b] = [b,a]

提取

let {a,b,c} = json;

传入函数的参数解构

function func({a,b}){}
func({a:1,b:2});

传入函数参数自带默认值

function func(json={
  a:1,
  b:2
}){
  return true;
}

第四章 字符串的扩展

js允许采用\uxxx的形式表示一个字符，其中xxxx表示字符串码点。
"\u0061" // "a"
但是这种表示法只限于\u0000 ----\uFFFF之间的字符。超出这个范围的必须用两个字节表示
"\uD842\uDFB7" \"𠮷"
ES6对此进行了改进
"\u{42}\u{43}\u{44}"
JavaScript内部，字符串以UTF-16的形式储存，每个字符固定2个字节，对于那些需要四个字节储存的字符，JavaScript认为他们是占两个字节。

ES6提供codePointAt(0)的方法，能正确处理4个字节的字符，并返回一个字符的码点。

padStart padEnd

ES7推出字符串不全长度功能，如果字符串长度未达到，会自动在头尾补全，
'x'.padStart(5,'ab') // 'ababx';
'x'.padEnd(4,'ab') // 'xaba';

4.10 模板字符串

`
    hi,i am crazy
    hihih${ iamchangevalue }
`

4.11 实例：模板编译

下面例子，一个通过模板字符串生成真正正式模板的实例
各种奇淫技巧我就不一一详述。

第八章 函数的扩展

写代码经常遇到一个这样的问题，他没有forEach的方法，我们运用扩展符号，轻松将他转为数组。

var list = document.querySelectorAll('div');
var arr = [...list];

a.name即返回函数名字

a = function func(a){}
a.name // 'func'

构造函数的名字

(new Function).name    // "anonymous"

bind绑定的函数的名字,返回的是 'bound '

a = function func(a){}
a.bind({}).name    // "bound func"

8.5 箭头函数（关键）

var func = () => {};   // 这是最常见的箭头函数，这里不再复述

当返回的是一个对象的时候呢？？意想不到的是,报错了，因为函数默认识别{作为一段代码块，而你则把{当作对象的开头，所以这种情况下必须加上小括号。（）,同时箭头函数可以配合变量结构一起使用，相当让人愉悦的一段代码。

var getObject = ({a,b}) => {a:1,b:2}

返回的对象和传入的对象是一样的值，但是对象早已不是之前的对象，用这种写法来写函数式编程应该会非常舒适。

let obj = ({a,b}) => ({a,b});
obj({a:1,b:3});

[1,2,3].map(function(e){
  return e*e;
})
[1,2,3].map(e=>e*e);

总结一下，箭头函数最主要的效果是简化回调函数，但这需要建立在对函数熟悉的基础上。但是使用过程中要注意以下几点:

• 1.函数体内的this对象就算定义时所在的对象，而不是使用时所在的对象。这看起来比普通函数要合理的多。。我就爱用箭头函数。

function functhis() {
  return this;
}
const arrowthis = () => this;
console.log(functhis()); // window
console.log(arrowthis()); // {}
const a = function() {
  console.log(functhis()); // window
  console.log(arrowthis()); // {}
};
a();

• 不能当作构造函数，不然会报错。不可以使用new命令,这看起来也是比较合理的。

function afunc(){}   // undefined
new afunc()
afunc {}
afunc = () => {}
() => {}
new afunc()          // VM19499:1 Uncaught TypeError: afunc is not a constructor   .at <anonymous>:1:1

• 不能使用arguments对象，该对象在函数存在，但是你在里面拿不到参数
• 不能使用yield命令，因此箭头函数不能用作Generator函数。

call和普通调用不同，call内传入的参数是就算函数内的this，而此处箭头函数，this永远指向函数本身。而如果是普通函数，this指向window，严格模式下，this指向undefined.，不错的es6。他让js变得简单优雅。。。

function foo() {
  setTimeout(() => {
    console.log('id:', this.id);
  }, 100);
}
foo();
foo.call({ id: 1 });

下面代码,this永远指向函数本身，因为他是箭头函数。

const handler = {
  id: '123456',
  init() {
    document.addEventListener(
      'click',
      e => this.dosomething(e.type), false,
    );
  },
  dosomething(type) {
    console.log(`handle ${type} for ${this.id}`);
  },
};

这里定时器内部箭头函数的this同样指向对象本身

function Timer() {
  this.sec = 0;
  setInterval(() => this.sec++, 100);
}
const timer = new Timer();
setInterval(() => {
  console.log(timer.sec);
}, 300);

this指向的固定化，为什么呢，因为箭头函数内部根本没有this，所以this永远指向对象本身。正因为如此，所以箭头函数同样不能做构造函数。

函数绑定

箭头函数可以用以将this指向函数本身，这大大简便了js绑定，举个例子react官方说的一个绑定例子

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    // This binding is necessary to make `this` work in the callback
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(
  <Toggle />,
  document.getElementById('root')
);

react采用this.handleClick.bind(this),这样的绑定函数会返回一个函数，而返回的新函数通过bind绑定的新函数，下面看mdn对于bind的定义。返回的新函数this永远指向，意思就是，bind函数传入的第一个参数，就算新函数的this，无论你怎么调用，都是这个this，这和箭头函数的核心含义是不谋而合的。

下面是react官方的第二种写法，省区了bind步骤,就是因为使用了箭头函数。

class LoggingButton extends React.Component {
  // This syntax ensures `this` is bound within handleClick.
  // Warning: this is *experimental* syntax.
  handleClick = () => {
    console.log('this is:', this);
  }
  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

8.6 函数绑定

箭头函数可以绑定this，大大减少了显示绑定this对象的方法(call,apply,bind),但是es7提出了新的提案，::用来绑定

fo0::bar
// 等同于
bar.bind(foo)

foo::bar(...arguments);
// 等同于
bar.apply(foo, arguments);

8.7 尾调用优化

说的就算高阶函数

let highFunc = (arr) => {
  let a = 1;
  let b = 2;
  return g(a+b);
}

js的函数可以说是非常灵活的可以在任何地方被调用，包括if(内部){}，关键不在于函数书写形式，关键在于所返回的是函数还是对象还是字符串，或者根本没有return，func()()()只要返回的是所需要的东西即可，不管你后面跟了几个括号。

尾调用极其不同的地方在于其特殊的调用函数的位置。

具体可以了解相关调用栈（call stack #17 )由于函数尾部是一个新的函数，所以调用它的函数会被先存入调用栈，等待新函数被找到之后，新函数也会被放入调用栈，然后调用栈按照FILO(先入后出)队列原则，依次执行。

let highFunc = (arr) => {
  let a = 1;
  let b = 2;
  return g(a+b);
}
highFunc()
// 等价于
function highFunc(){
  return g(3);
}
// 等价于
g(3);

上面代码，如果g不是尾调用，函数f就需要保存内部变量m,n，以及g的调用位置，。但是当g被调用之后，函数f就结束了，所以f(x)函数完全可以被删除。
上面说的就是尾调用优化，可以节省部分内存？？

尾递归

函数调用自身称之为递归，在尾部调用自身，称之为尾递归,
下面的是递归函数，调用栈最大承受量为11370次，容易发生栈溢出效应。其复杂度为O(n)

function factorial(n) {
	if (n === 1) return 1;
  return n + factorial(n - 1);
}
console.log(factorial(11370));

但是对于下面这个函数，尾递归由于全程只发生一个调用栈，复杂度为O(1)，当然此刻依然是调用栈溢出，因为只是es6对尾递归进行了优化，你需要开启chrome实验室新功能。

function factorial(n, total) {
  if (n === 1) return total;
  return factorial(n - 1, n + total);
}
console.log(factorial(11300, 1));

第十一章 Proxy和Reflect

proxy 概述

proxy用于修改某些操作的默认行为，等同于在语言层面做一些事,所以这属于元编程。，即对语言进行编程。

const obj = new Proxy({}, {
  get(target, key, receiver) {
    console.log(`getting ${key}`);
    return Reflect.get(target, key, receiver);
  },
  set(target, key, value, receiver) {
    console.log(`setting ${key}`);
    return Reflect.get(target, key, value, receiver);
  },
});

上面的代码对一个空对象做了一层拦截层，重定义了读取属性的set和设置set行为。这里暂时先不解释其具体做法。看看运行结果。

obj.count = 1;    // setting count
++obj.count;     // setting count, getting count

12.二进制数组

ArrayBuffer对象，TypedArray，DataView视图，是JavaScript操纵二进制数据的一个接口，
二进制数组由三个对象组成

• 1.ArrayBuffer 对象：代表内存中的一段二进制数据，可以通过视图进行操作。视图部署了数组接口，这意味着，可以用数组的方法操作内存。（简单来说代表了原始的二进制数据）
• 2.TypedArray视图：共包括9中类型的视图，比如Uint8Array(无符号8位整数)数组视图`，（用于读/写简单类型的二进制数据）
• 3.DataView视图：可以自定义复合格式的视图，（用于读/写复杂类型的二进制数据）

很多浏览器API用到了二进数组操作二进制数据，下面是其中的几个。

• File API
• XMLHttpRequest
• Fetch API
• Canvas
• Websockets

12.1 ArrayBuffer 对象

概述

ArrayBuffer对象代表储存二进制数据的一段内存，他不能直接读/写，只能通过视图来读写。视图的作用是指以指定格式解读二进制数据。
ArrayBuffer也是一个构造函数，可以分配一段可以存放的数据的内存区域。
下面这段代码生成了一段32字节的内存区域，每个字节的默认值都是0，可以看到ArrayBuffer构造函数的参数是所需要的内存大小（单位位字节）。

var buf = new ArrayBuffer(32);
buffer
var buf = new ArrayBuffer(12);
buffer

为了读写这段内存，需要为它指定视图。创建DataView视图。需要提供ArrayBuffer对象实例作为参数

var buf = new ArrayBuffer(32);
dataView = new DataView(buffer); 
dataView.getInt8(16)    // 0

上面代码对一段32字节的内存建立DataView视图，然后以不带符号的8位整数格式读取第16个元素得到0，因为他的所有都是0。

12.2 TypedArray视图

ArrayBuffer对象作为内存区域存放多种类型数据。同一段内存不同数据的不同解读方式，这就叫做视图。ArrayBuffer存在2种视图，一种是TypedArray视图，另一种是DataView视图，前者所有数组成员都是同一个数据类型吗，后者数组成员可以是不同的数据类型。

13.章 set 和map

set作为es6新的一种数据结构，类似于数组，但是他的成员的值是唯一的。没有重复的值。
set的一些方法如下

set.add({})不断添加{}，因为{} === {} // false

WeakSet

和set类，但不同之处在于

• 1.只能添加对象
• 2.弱引用，如果其他对象不再引用，它会自动启用垃圾回收机制。同时他是不可遍历的。

Map

map结构的目的和基本用法。

插一道面试题。

目前存在3个ajax访问，当url1和url2同时访问某个接口，只有当两个接口同时拿到数据的时候，url3开始执行去拿某个接口的数据。url1，和url2拿数据的速度未知。可能url1更快，也可能url2更快。只有当2个接口的数据都拿到之后才去拿url3的数据。闲话不多说，上代码

const p1 = new Promise((resolve) => {
  setTimeout(() => {
    console.log('p1');
    resolve();
  }, 2000);
});
const p2 = new Promise((resolve) => {
  setTimeout(() => {
    console.log('p2');
    resolve();
  }, 3000);
});
const p3 = new Promise((resolve) => {
  setTimeout(() => {
    console.log('p3');
    resolve();
  }, 1000);
});
Promise.all([p1, p2]).then(() => {
    console.log('values');
    p3;
});

14章lterator 和 for循环

遍历器(lterator)就是这样一种接口机制，为各种不同的接口机制提供统一的访问机制。任何数据结构只要有lterator接口，就能遍历循环。
lterator的作用有三种，

• 为各种数据提供统一的简便的访问接口，
• 使得数据结构的成员依靠某种次序依次访问。
• es6创造了一种新的遍历命令------for...of循环

lterator的遍历过程是这样的，

• 1.创建一个指针对象，指向当前数据结构的起始位置。也就是说遍历器对象本质上就算一个指针对象。
• 2.第一次调用指针对象的next方法，可以将指针指向数据结构的第一个成员。
• 3.第二次调指针对象，指针就指向数据结构的第二个成员。
• 4.不断调用指针对象的next方法，知道他指向数据结构的结束位置。

每一次调用next方法，都会返回数据结构当前成员的信息。下面定义一个makeIterator函数用来遍历循环

function makeIterator(array) {
  let nextIndex = 0;
  return {
    next() {
      return nextIndex < array.length ? {
        value: array[nextIndex += 1], done: false,
      } : {
        value: undefined, done: true,
      };
    },
  };
}
const itt = makeIterator(['a', 'b', 'b', 'b', 'b', 'b', 'b']);
itt.next()   // { value: 'b', done: false }
itt.next()   // { value: 'b', done: false }
itt.next()   // { value: 'b', done: false }
itt.next()   // { value: 'b', done: false }

14.3 调用Iterator调用的默认场合

[...new Array(3)]    // [undefined,undefined,undefined]
[...'23r3r23r']        // ['a','b'....]

还有菊花函数 function* (){ yield [1,2,3,4,5] }

const generator = function* () {
  yield 1;
  yield* [2, 3, 4];
  yield 5;
};
const iterator = generator();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
======得到的值======
{ value: 1, done: false }
{ value: 2, done: false }
{ value: 3, done: false }
{ value: 4, done: false }
{ value: 5, done: false }
{ value: undefined, done: true }

上面的[]数组内部内容被自动解构，他后面如果跟的是一个可遍历的结构，他会被用于遍历器的接口。

其他场合

• for...of
• Array.from()
• Map()。Set()。WeakSet()。
• Promise.all()
• Promise.race()

14.4 字符串的Iterator接口
字符串本身其实也可以遍历，他也具有遍历接口

str = '23r23r'[Symbol.iterator]();
str.next();  // {value: "2", done: false}
str.next();  // {value: "3", done: false}
str.next();  // {value: "r", done: false}
str.next();  // {value: "2", done: false}
str.next();  // {value: "3", done: false}
str.next();  // {value: "r", done: false}
str.next();  // {value: undefined, done: true}

[...'wefe233']  // ["w", "e", "f", "e", "2", "3", "3"]

14.6 遍历器对象的return()。throw()

Set 和 Map 结构

Set 和 Map结构具有Iterator接口，可以直接使用for...of循环

const es6 = new Map();
es6.set('eee',1);
es6.set('fff',1);
es6.set('ggg',1);
es6.set('hhh',1);
es6.set('iii',1);
for(var [name,value] of es6){
    console.log(name,value)
}
// eee 1
// fff 1
// ggg 1
// hhh 1
// iii 1

16 章 Promise

下面then会生成2个promise，先new一个promise，then里面再生成一个新的promise，通过不断的生成一个新的promise，而产生链式调用，这个和jQuery是不谋而合的。

const getJsono = new Promise((resolve, reject) => {
  resolve(x + 1);
});
getJsono
    .then((json) => {
	console.log(json);
    })
    .catch((err) => {
	console.log(err);
    });

promise.all

多个rpomise一起完成。
在进行下一步。
下面请看async/await，虽然他也只是基于Generator的语法糖，但是配合promise少不了它。

17章 async和异步操作。

异步编程对于js这门语言非常重要。js是单线程，如果没有异步，就会卡死。
es诞生之前，异步编程大概有以下几种方案

• 回调函数
• 事件监听
• 发布订阅
• promise函数

异步

所谓异步就算将一段任务分成两段，先执行一段，然后转而执行其他的任务,等好之后，又回过头来重新执行之前的代码。
下面的就算以回调的方式实现异步代码。但是他会先 输出 123，然输出文件内容，这是典型的异步代码，但是async/await绕来绕去，原本js阻塞的同步代码被写成异步，现在async/await有将他们变成同步的 阻塞代码，醉醉醉。同步=>异步=>同步

fs.readFile('./test/index.html', 'utf-8', (err, data) => {
    console.log(data);
 });
console.log('123');

callback function 回调函数

我个人觉得这种渣翻译非常容易引起误解，所谓回调函数就算把第二段单独写入一个函数中，等到重写执行该函数的时候重新调用，所以callback直译过来应该是重新调用的意思，而不是所谓的回调函数。

promise

回调函数本身并没有问题，问题在于多个回调函数嵌套，假定读取A文件后再读取B文件，代码如下

fs.readFile('./test/index.html', 'utf-8', (err, data) => {
	fs.readFile('./test/index.html', 'utf-8', (err, data1) => {
		console.log(data, data1);
	});
});

为了避免多重嵌套，所以出现了异步函数。然而我觉得这个好失败。怪不得TJ大神要转去玩GO，
17.2 Generator 函数

协程

传统的编程语言早已有异步解决方案，（其实是多任务的解决方案）。其中有一种叫做协程（coroutine）,意思是多个线程相互协作，完成异步任务。
协程有点像函数，又有点像线程，流程如下：

• 第1步，协程A开始执行
• 第2步，协程A执行到一半，暂停，执行权交给B去执行。
• 第3步，一段时间后，暂停，协程B交换执行权。
• 第4步，协程A恢复执行。

上面的协程A就算异步任务。因此他分成2段执行。

Generator函数的概念

他会将函数执行权交出去，即暂停执行。需要暂停的地方用yield，

function* gen(x){
    var y = yield x+2;
    return y;
}
var g = gen(1);
g.next();    // {value:3,done,false}
g.next();    // {value:undefined,done,true}

上述代码，调用Generator函数会返回一个内部指针，g，这是生成器函数不同于普通函数的地方，他返回的指针每次调用next都会指向下一个yield，也就是返回一个对象。
Generator可以暂停执行，这是它可以封装异步函数的根本原因。

关于Generator中的 then，他返回的是什么？？，async返回的then呢？

• next 返回下一个数
• return 推出迭代
• throw 返回错误
• Symbol(Symbol.iterator) 说明构造器Generator函数是可迭代的。
  

关于Promise

• then.每一个then都返回一个promise，从而实现链式调用
• finally 回调会在当前promise运行完毕后被调用，无论当前promise的状态是完成(fulfilled)还是失败,
• catch 捕捉错误。
  

Promise.all(),和Promise差不多。

17.3 Thunk 函数

参数的求值策略

传入的是一个函数，那么传入的函数等到传入的一刻才计算。尾递归就是一个例子，但是尾递归存在栈溢出的性能问题。

17.4 co模块

#####基本用法
co模块是TJ发布的一个小工具。用于generator函数自动执行。

var gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

co模块可以让你不用编写Generatar函数的执行器。

var co = require('co');
co(gen);

上面的代码中，Generator函数只要传入co函数就会自动执行。
co函数返回一个Promise对象，因此可以用then方法添加回调函数。

co(gen).then(function(){
  console.log('Generator 函数执行完成');
})

上面的代码中，等到Generator函数执行结束，就会输出一行提示。
####co模块的原理
为什么co模块可以自动执行Generator函数？
前面说过，Generator就是一个异步执行函数的容器。它自动执行需要一种机制，当异步操作有了结果能够自动交回执行权。

• 1.回调函数。将异步操作包装成Thunk函数，在回调函数中交回执行权。
• 2.Promise对象。将异步操作包装成promise对象，用then方法交回执行权。

co模块其实就是将两种自动执行器(Thunk函数和Promise对象)包装成了一个模块。使用co的前提条件是，Generator函数的yield命令后面只能是Thunk函数或Promise对象。
下面讲一下基于generator函数的自动执行器。这是理解co函数的关键。
####基于Promise对象的自动执行
还是沿用上面的例子。首先把fs模块的readFile方法包装成一个Promise对象。

const readFile = fileName => new Promise(((resolve, reject) => {
  fs.readFile(fileName, (err, data) => {
    if (err) reject(err);
    resolve(data);
  });
}));
const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
const g = gen();
g.next().value.then((data) => {
  g.next().value.then((data) => {
    g.next(data);
  });
});

手动执行的方法其实就算用then方法层层添加回调函数，理解这一点，就能写出自动执行函数，

function run(gen) {
  const g = gen();
  function next(data) {
    const result = g.next(data);
    if (result.done) return result.value;
    result.value.then((data) => {
      next(data);
    });
  }
}

上面的代码中，只要Generator函数还没执行到最后异步，next函数就调用自身以实现自动执行。
####co模块的源码
co就是上面这个自动执行的扩展，他的源码只有十几行，非常简单。
首先，co函数接受Generator函数作为参数，返回一个Promise对象。

function co(gen){
  var ctx = this;
  return new Promise(function(resolve,reject)=>{})
}

在返回Promise对象中，co先检查参数gen是否为Generator函数。如果是，就执行该函数，得到内部指针对象；如果不是就返回，并将promise对象的状态改为Resolve。

function co(gen) {
  const ctx = this;
  return new Promise((resolve, reject) => {
    if (typeof gen === 'function') gen = gen.call(ctx);
    if (!gen || typeof gen.next !== 'function') return resolve(gen);

    onFullfilled(res);
    function onFullfilled(res) {
      let ret;
      try {
        ret = gen.next(res);
      } catch (e) {
        return reject(e);
      }
      next(ret);
    }
  });
}

最后最关键的就算next函数

function next(ret) {
  if (ret.done) return resolve(ret.value);
  const value = toPromise.call(ctx, ret.value);
  if (value && isPromise(value)) return value.then(onFullfilled, onRejected);
  return onRejected(new TypeError(`You may only yield a function, promise, generator, array, object, but not the following object was passed: ${String(ret.value)}"`));
}

上面代码中，next函数内部的代码一共只有4行命令。
第一行，检查当前是否为Generator函数最后一步，如果是就返回。
第二行，确保每一步的返回值是Promise对象。
第三行，使用then方法为返回值加上回调函数，然后通过onFullfilled函数再次调用next函数。
第四行，在参数不符合要求的情况下，将promise对象状态改为Rejected，从而终止执行，

并发处理异步操作

co支持并发的异步操作，即允许某些操作同时进行，等到他们完成，才进行下一步。这时要把并发的操作都放在数组或者对象里面，跟在yield语句后面。

// 数组写法
co(function* () {
  const res = yield [
    Promise.resolve(1),
    Promise.resolve(2),
  ];
});

// 对象写法
co(function* () {
  const res = yield {
    0: Promise.resolve(1),
    0: Promise.resolve(2),
  };
});

// 下面是一个例子
co(function* (){
	var values = [n1,n2,n3];
	yield values.map(somethingAsync);
})

function* somethingAsync(x){
	// do something async
	reyurn y;
}

上面代码允许并发3个somethingAsync异步操作，等到他们全部完成，才能进行下一步。

17.5 async 函数

他就是Generator函数的语法糖
前文有一个Generator函数，一次读取2个文件

const readFile = fileName => new Promise(((resolve, reject) => {
  fs.readFile(fileName, (err, data) => {
    if (err) reject(err);
    resolve(data);
  });
}));
const gen = function* () {
  const f1 = yield readFile('/etc/fstab');
  const f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
//写成async函数就是下面这样
const asyncReadFile = async function () {
  const f1 = await readFile('/etc/fstab');
  const f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};

其实就只是将*号换成async，将yield换成await的语法糖。
async函数对Generator函数进行了改进，以下4点体现

1. 内置执行器。Generator必须要有执行器，而async内置了执行器。所以有了co模块，而async自带执行器，async函数写法与普通函数一样只要一行。

var result = asyncReadFile();

2.上面代码调用了asyncReadFile函数，然后他就会自动执行，输出结果，完全不想Generator函数需要调用next方法，或者co模块，才能执行。
3.更好的语义。async和await比起yield语义更加清楚。
4.更广的适用性，co模块约定，yield命令后面只能是Thunk函数或者promise对象，而async函数的await后面能是promise对象和原始类型的值，无论数字对象字符串等。
5.返回值Promise。async函数的返回值是Promise对象，这比Generator函数的返回值是Lterator对象方便多了，你完全可以用then方法指定下一步。
进一步说明，async函数完全可以看作由多个异步操作包装成一个Promise对象，而await命令就算内部then语法糖。

async函数的实现

async函数的实现的实现就是把Generator和自动执行函数包在一个函数中。

async function fn(args){
    // ....
}
// 等同于
function fn(args){
    return spawn(function*(){
        // ...
    });
}

1.减少http请求

80%的页面初始化响应时间花费在前端，而大部分时间都是在下载所有的页面组件，例如图片，css，js等。所以减少请求数量是让网页变快的关键。
其中一种方法是将页面设计的更简单，但是有没有方法是能既将页面设计得丰富多彩，同时又拥有高性能呢？线面提供一些建议：

• 合并文件 是一种方法来减少http请求，我们可以将多个js文件合并成一个js文件，css合并，但是合并通常会带来一些不可预知的后果，因此，对于css：less + css-module 是一种不错的组合。js =>模块化开发。rollup.js => 浏览器环境打包成iife格式，nodejs环境打包成cjs格式，通用node+浏览器 打包成umd格式。至于commonjs不了解。
• css 雪碧图是一种不错的方法来减少图片请求。将多个小图标他们合并成单个背景图片是一种不错的方法，但是现在推荐svg。
• 在线图片将图片转换成data64格式直接写入页面。会增加页面体积，一般情况不推荐使用，仅仅当你想做一次性的图片展示的时候推荐使用，例如input上传图片展示，这个时候推荐使用。自定义鼠标图标，直接将它写入css文件，推荐使用data64直接写入css文件。
  减少http请求次数仅仅只是开始。同时他也是提高用户初次访问时候页面性能的重要知道方针。

2.使用内容交付网络。(参照七牛cdn静态资源加速)

用户与web服务器的物理距离对响应时间有影响。因此同时布置多个web服务器分布在华南，华北，华中，深圳，上海，等集中地区，可以加速，但是你又应该从哪开始呢？

• 第一步。作为实施物理距离分散的第一步，劝你不要试图重新设计你的web应用来使得它以分布式来架构，根据应用程序的不同，更改结构体系可能包括艰巨的任务。例如 sync session state，又或者是复制数据库等。。。尝试缩短用户和内容之间的距离，可能会造成结构体系等的延迟，或者根本通不过。（个人经验-七牛cdn静态资源，加速后，原本页面未经过压缩有1M+,首次加载需要7s+，使用七牛cdn加速后，1.5s即加载成功，但同时，每次更新页面，都必须要去七牛后台个人中心页面手动更新缓存我的七牛空间页面文件缓存，或许可以通过代码来更新资源，但我又不懂。这仅仅只是使用静态页面就变得这么麻烦，如果有数据库等，又要怎么做？）
• 80%-90%的用户响应加载页面的时间都消耗在加载js,css,image,flash等资源文件。分解你的静态资源内容相对于重构页面架构更容易实现。这个不仅仅是实现了响应时间缩短，而且由于CDN(content delivery networks)的存在，这更加容易实现。
  
• CDN(content delivery networks)是一个分布在不同位置的网络服务器集合，用来更高效的向用户提供内容。有限选择ping值最低的来提供服务。
  
• 有些大公司有自己的cdn，但更高效的方式是用CDN服务供应商提供的服务(七牛cdn)。例如Yahoo.

3.添加Expires或者Cache-Control

2个规则

• 对于静态组件，设置超长过期时间。
• 对于动态组件，使用适当的Cache-Control来帮助浏览器提供有条件的请求。
  我们的网站设计得日益复杂，这意味着更多的静态资源，但是通过Expires的设置，可以避免多余的请求，通常公司图标需要这样设置，但是其实我们对于每一个资源都需要设置过期时间。
  浏览器和代理商使用缓存来减少http请求，使得页面加载更快，

      Expires: Thu, 15 Apr 2018 20:00:00 GMT                  // 在2018年4月15日8点过期

如果你的服务器是Apache，

      ExpiresDefault "access plus 10 years"                       // 10年后过期

如果设置了超长过期时间，那么更新文件只能通过 更改文件后缀的hash值来更新。

4.Gzip Components 组件压缩（服务器端）

尤其对于单页面应用（SPA），这种将所有页面打包在一起，通常可以压缩至1/3.


从HTTP/1.1开始，web客户端通过请求的头部添加Accept-Encoding来告诉浏览器要压缩。

      Accept-Encoding: gzip, deflate

如果浏览器又看到这个的话，会做出如下响应

      Content-Encoding: gzip

Gzip是现在用的最多的高效小压缩的方法。它可以压缩70%，90%的浏览都经过Gzip压缩。如果你是Apache服务器，1.3版本是mod_gizp, 2.x版本用mod)deflate.,,
但是值得注意的是，压缩要基于文件类型，像html，js，css，json文件都需要压缩，但是图片和pdf是不需要压缩的，因为他们本身就经过压缩了，再去压缩他们只会浪费CPU，而且压缩后文件体积反而会增大，

5.将css样式文件放在顶部

Yahoo!性能研究，我们发现将css文档放在<head></head>种，页面会更快加载,具体请参照bootstrapt Starter template，

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

前端工程师在意页面性能，所以想要页面逐步加载，这也是Yahoo!工程师想要的，这就是，我们想要浏览器更快显示他的内容，这对于网速慢的用户尤其重要，当浏览器逐步加载页面的时候，标题导航栏顶部徽标最为等待页面的用户的视觉返回，这大大改善用户整体体验。而如果你将css文件放在文档底部的话，无法做到内容渐进式呈现，例如IE，这样子的话，页面会停留在空白页。
嗯~ o(￣▽￣)o，HTML规范文档也是这么要求的。

6.将js放在文档底部

js文件如果异常报错，会阻止同步的下载内容，一般建议延迟加载，给<script>标签添加defer属性，不过firfox又不支持，如果将脚本放在底部，并添加defer属性延迟加载，页面加载速度更快。

7.避免css 表达式

css表达式是一种强大(危险)的方式动态设置css属性，适用ie5-ie8，他可能会在极短的时间内执行1w次，

      background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );

8.是否要将js，css 和html文件分离

通常html文档都会下载，而css和js则会从缓存中加载。如果分离开，则html依然要下载，但是体积会减小。这个关键在于，用户从缓存中拿文件和重新加载新文件哪种情况更多。一种可以减少请求次数，另一种可以html文件体积。但是也有例外情况，比如Yahoo!和百度的首页的css和js就是内嵌的，因为大多数这种首页需要极速访问，也经过实际调研，也确实如此。这种会话只有很少的页面视图的主页，内嵌可以缩短最终用户的响应时间。

通常对于许多网站他们的第一个首页，有一些技术可以减少内联提供的http请求，以及通过外部文件实现缓存优势，其中一种方法，就是在首页内嵌js和css，但是在页面加载完成后，动态下载外部文件，后续页面将引用应该以及存在浏览器缓存中的外部文件。

9.减少DNS(Domain Name System)查找。

DNS将主机名映射到IP地址，就像查询人的手机号码一样，但是DNS映射是需要20-120ms才能找到的，所以DNS会缓存他之前的查找，例如chrome浏览器就有自己的DNS缓存，IE默认存储30分钟DNS缓存，减少唯一主机名数量，可以减少页面中查找DNS的并行下载时间。

10.压缩js和css

通常删除注释，以及空白字符，换行符，制表符(\n\t\s)，这个webpack，grunt，gulp，parcel等打包工具都可以做到，同样的，html标签之间的空白，幽灵节点，同样可以通过压缩消除。

11.避免重定向(Redirects)

例如nginx通常就将http => https,重定向是使用301和302状态码完成的，

      HTTP/1.1 301 Moved Permanently
      Location: http://example.com/newuri
      Content-Type: text/html

浏览器会自动将用户带到位置字段中指定的URL。重定向所需的所有信息都在标题中。响应的主体通常是空的。尽管名称不同，301和302响应在实践中都不会被缓存，除非额外的头文件（例如Expires或Cache-Control）指示它应该是。元刷新标记和JavaScript是将用户引导到不同URL的其他方式，但是如果您必须执行重定向，首选方法是使用标准的3xx HTTP状态代码，主要是为了确保后退按钮正常工作。
重定向会减慢用户体验，并且在HTML页面到来之前不会下载任何内容。
最浪费的重定向经常发生，web开发人员通常不知道例如当你访问https://www.baidu.com会发生重定向https://www.baidu.com/，然后默认加载https://www.baidu.com/目录下的index.html文件。
将就网址链接到新网站，是重定向最常见的用途，创建一个CNAME文件在被定向的url目录下。

12.删除重复的js文件，

13.设置 ETags

实体标签ETags唯一标识符

      HTTP/1.1 200 OK
      Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
      ETag: "10c24bc-4ab-457e1c1f"
      Content-Length: 12195

14.将ajax数据实现可缓存

Ajax引用的好处之一，他想用户提供返回，因为它从后台请求数据。为了提高性能，优化Ajax响应非常重要，提高Ajax性能的最重要的方法就是将响应缓存，如添加过期或缓存控制头中所属，其他规则同样适用，

15.尽早清洗缓存

当用户请求页面时，后端服务器可能需要200到500毫秒才能将HTML页面拼接在一起。在此期间，浏览器在等待数据到达时处于空闲状态。在PHP中，你有函数flush()。它允许您将部分就绪的HTML响应发送到浏览器，以便浏览器可以在您的后端忙于HTML页面的其余部分时开始获取组件。好处主要出现在繁忙的后端或前端。
考虑刷新的好地方就在HEAD之后，因为头部的HTML通常更容易生成，并且允许您在浏览器中包含任何CSS和JavaScript文件，以便在后端仍在处理时开始并行读取。

例子

      ... <!-- css, js -->
    </head>
    <?php flush(); ?>
    <body>
      ... <!-- content -->

16.尽量使用Get请求

Yahoo! 团队发现，当使用ajax XMLHttpRequest,的时候，
POST实现浏览器，分为2个步骤，

• 1.发送headers,
• 2.再发送data
  POST相对GET的不同，
• 1.POST比GET更安全;
• 2.发送的数据量更大(因为url长度有限制);
• 3.发送的数据类型更多，例如图片转化为二进制Blob格式，
• 4.get会将数据缓存，post不会（在chrome里面，get会将静态资源缓存，而json数据不会缓存，ie则将全部缓存）

但是post更慢，
post请求过程

• 1.浏览器请求tcp链接(第一次握手)
• 2.浏览器答应tcp连接(第二次握手)
• 3.浏览器得到确认，就将header头部发送给后台，(第三次握手，这个请求较小)
• 4.浏览器返回100 continue响应
• 5.浏览器开始发送数据
• 6.服务器返回200 🆗响应
  get请求过程
• 1.浏览器请求tcp链接(第一次握手)
• 2.浏览器答应tcp连接(第二次握手)
• 3.浏览器确认，并发送get的header头部，以及data数据(第三次握手，这个报文比较小)
• 4.服务器返回200 🆗响应
  所以，最优使用get请求，当然如果你的cookie比较多又另算，如果仅仅只是想要得到数据，用get。

17.后加载组件

你可以看一下你的页面，哪些是为了呈现最初页面，必须要呈现的组件，而其余的组件可以稍后加载。

js在onload事件之后比较适合初始化某些库，原生js的onload事件和jQuery的$( document ).ready()有区别，jquery会在js文件加载完就执行，而原生onload事件，则要等到dom里面的图片全部加载好才能触发事件。

18.预加载组件

他是后加载组件的对立面，它可以节省时间

• 1. 无条件预加载
• 2.有条件预加载

19.减少DOM元素数量

复杂dom结构，js访问速度更慢，要遍历更多元素。

20.拆分组件跨域

比如说你的图片网站html存在https://www.example.com/,而你的静态资源，储存在http://static.example.com/，这样可以让你最大限度的平行下载，由于DNS查找惩罚，请确保域不超过2-4个。

21.减少ifrane'数量

iframes允许一个HTML文档插入父文档，了解iframe如何工作以便可以有效使用，这很重要。

<iframe>优点：

• 像徽章和广告等第三方内容，例如github的徽章
• 秘密沙盒
• 并行脚本下载

<iframe>缺点：

• 即使是空白页面也很昂贵
• 阻止页面载入
• 非语义化

22.不要404s

HTTP请求比较昂贵，因此提出http请求获得无用的响应完全没有必要。而有些网站提供了404前台页面，用户体验不错，但也浪费了服务器资源，特别糟糕当外部错误并是404时候，首先此下载会阻止并行下载，浏览器会尝试解析她，就好像他是js代码。

23.减少cookie体积

http cookie被用来做用户验证，以及其他个性化东西，信息关于cookie可以在服务器和浏览器之间交换，降低cookies大小可以减少用户响应时间，这很重要。
请注意以下四点

• 消除不必要的cookie
• 尽量减少cookie大小
• 设置cookies域名，保证其他子域名不受营销
• 设置过期时间

24.为组件使用无cookie域名

当浏览器制作一个请求，比如请求一个图片，这种完全没有cookies的必要。所以你要专门设置一个托管静态资源的子域名。

25.最小化dom访问

js遍历dom很慢，请注意以下三点：

• 缓存对访问元素的引用
• 更新节点 ’offline‘,并将他们加入到树中。
• 避免使用js修复布局坍塌

26.发展智能事件处理

事件总代理，比如你有10个按钮的导航栏，不要分别给他们设置事件触发。请给他们的父容器设置总代理，对e.path做路径判断，ie没有path，请自行合成path，这个就是事件冒泡。
你不需要等到onload事件触发在添加事件代理，应为只有图片成功加载后才出发onload事件，你可以用jq的ready，或者原生的DOMContentLoaded，

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
      console.log("DOM fully loaded and parsed");
  });
</script>

27.选择<link>而不要@import

css放在最顶端，

28.避免filters这个css属性

29.优化图片

当设计师完成图纸，将图片传到web服务器之前，仍可以进行一些操作

• 您可以检查GIF并查看它们是否使用与图像中颜色数相对应的调色板大小。使用imagemagick很容易检查使用 标识-verbose image.gif 当您在调色板中使用4色和256色“插槽”看到图像时，还有改进的空间。
• 尝试将GIF转换为PNG并查看是否有保存。往往不是，有。由于浏览器支持有限，开发人员经常不愿意使用PNG，但这已成为过去。唯一真正的问题是真彩色PNG中的alpha透明度，但再次，GIF不是真正的颜色，也不支持可变透明度。因此GIF可以做的任何事情，调色板PNG（PNG8）也可以做到（动画除外）。这个简单的imagemagick命令会生成完全安全的PNG：
• 在所有PNG上运行pngcrush（或任何其他PNG优化器工具）。
• 在所有JPEG上运行jpegtran。该工具可以执行无损JPEG操作，例如旋转，也可用于优化和删除图像中的注释和其他无用信息（如EXIF信息）。

30.优化css 精灵

• 将水平方向上的图像与垂直方向进行排列通常会导致文件较小。
• 在精灵中组合相似的颜色可帮助您将颜色数量保持在较低的水平，理想情况下在256色以下，以适应PNG8。
• “适合移动设备”并且不要在精灵图像之间留下很大的空白。这不会影响文件大小，但需要较少的内存供用户代理将图像解压缩为像素映射。 100x100图像是10万像素，其中1000x1000是100万像素

31.不要用scale缩放图片在html

请设置width或者height来缩放图片

32.将favicon.ico变得更小，可储存。

浏览器每次都会请求他，所以最好不要回应404，最好缓存它。
请注意以下3点

• 保持它在1k以下。
• 设置Expire 在headers里面，最好几个月以上。

33.保持组件低于25k

为什么呢？因为iphone不会缓存25k以上的组件。

34.将组件打包成多部分文.

35.避免空的img.src

为什么下述行为有害？

• 通过发送大量意外流量来瘫痪您的服务器，特别是对于每天获得数百万页面浏览量的页面。
• 浪费服务器计算周期生成一个永远不会被查看的页面。
  空的img.src会毁坏您的网站

参考：

• Yahoo 的35条网站优化建议
• 图解HTTP
• 为什么get比post快

前言

第三方登陆验证

第六章:快速响应的用户界面

没有比页面点击没有响应更能令用户烦心的事情了。JavaScript是单线程，js脚本在解析过程中，用户点击界面没有响应。
下面这个例子，用户点击按钮的时候，他会触发UI触发两个进程，一个考虑css有没有添加:active等伪类属性，如果有就改变它的样式，另一个进程是js进程，即如下位于<script>标签内的代码，js代码创建一个新的div元素最后将他appendChild到body里面，这个时候会引发页面重绘+重排，进程如图

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
</head>
<body>
  <button onclick="handleClick()">click me</button>
  <script>
    function handleClick (){
      const div = document.createElement('div');
      div.innerHTML = 'Clicked!'
      document.body.appendChild(div)
    }
</script>
</body>
</html>

定时器基础（从定时器的角度去了解浏览器页面进程，GUI线程以及js线程和setTimeou线程以及事件线程组成的线程执行的先入后出的执行顺序）

对于js来说，多久运行时间算久，事实证明，超过100ms的都会引起用户的操作不适应，因此超过100ms就算久，那么应对业务需要，定时器应用而生。
下面这段代码,将在250ms后在UI队列中插入一个执行test()函数的JavaScript任务。

function test(){
  console.log('settimeout');
}
setTimeout(test,250);

总之，任何情况下创造一个定时器会造成UI线程暂停，因此定时器会重置所有有关浏览器的限制，包括长时间运行的脚本定时器，调用栈也在定时器的代码中重置为0，这一特性使得定时器成为长时间运行JavaScript代码理想的跨浏览器解决方案。setTimeout和setInterval几乎相同，除了前者重复添加js任务到UI队列中，。他们最主要的区别就是如果UI队列中已经存在由同一个setInterval创建的任务，那么后续任务不会被添加到UI队列中。
尝试运行如下代码

setInterval(()=>console.log(1),0);

进程，线程简单说明
JavaScript是单线程的，这个是由于为了防止一个dom元素被绘制的时候同时又被修改
js单线程以及css对页面的渲染，这两个呈现互斥关系，css渲染则js被暂时挂起，js运行的时候，css渲染又被挂起，他们共同在UI多线程中来回切换，按顺序执行，其中还有setTimeout的定时器线程，setTimeout是独立于js单线程之外的一个线程，因此js在由setTimeout的延迟执行的时候才不会被阻塞后面的代码继续执行，这样子的js配合另一个setTimeout线程才能实现异步函数Promisse等的能力，
一般情况下浏览器至少有三个常驻线程(前三个)

• GUI渲染线程（渲染页面）
• JS引擎线程（处理脚本）
• 事件触发线程（控制交互）
• setTimeout（延迟执行）
• AJAX线程（后台交互）

从下面这段代码了解js单线程与setTimeout线程执行关系，

setTimeout(function(){
    console.log('timer');
}, 0);
console.time('js耗时：')
for(var i = 0; i < 1e4; i++){
    console.log(1);
}
console.timeEnd('js耗时：')

为什么这样呢？
因为setTimeout已经被放入另外一个线程中执行，所以定时器的存在才不会对js单线程造成阻塞。所以setTimeout的延迟时间无论被设置成多少，他都会被放在js这个线程之后再执行。也许你会怀疑，因为某些浏览器默认setTimeout执行时间默认最少16ms，假设我将setTimeout后面的js代码执行1w次循环，浏览器耗时7s+才循环完毕。
但看上图我截图的，timer依然在他之后输出。这就说明了setTimeout必然是被放在了另外一个独立于js线程之外的线程，只有在js线程执行完毕后才回去执行setTimeout线程，（chrome的每一个网页都是一个独立的进程，因此才会在一个网页卡死后，另一个网页照样过可以流程运行打开，同时也防止了不同网页之间的相互干扰，因为不同进程之间在chrome里面被保护以至于他们之间相互隔离）

同样的道理，通过上面的例子可以看出，定时器所设置的延迟时间 的计算规则，它是从整一段js代码执行完毕之后开始计算的(包括我那段用了7s来循环一万次的代码，)；定时器通过浏览器的时间戳来在js主线程代码执行完毕后延迟0s再执行。所以任何不报错代码但是执行时间很长的代码放入setTimeout中不会造成js阻塞。

事件循环，

通常发生在当你为浏览器滚动添加事件监听的时候，浏览器会高频触发事件,但是同样的道理，事件监听里面的代码也是被放入另一个事件触发线程之中，只有当你document触发屏幕滚动事件的时候才会触发这段代码，这和setTimeout有点不一致，但是和他的兄弟setInterval(间隔固定时间执行js代码)却很类似。他们都和js主线程相独立开来。

Node.js的Event Loop

hahah上面这张图好有意思，v8威武

这个另外写，你也可以看阮一峰的再谈Event Loop,或者nodejs官方介绍，也许以后我会再写吧。毕竟我自己也要去搞nodejs

document.addEventListener('scroll',()=>{
  console.log('scroll')
},false)

web Workers

web worker 的运行环境，由以下组成

• navigator对象，4个属性，appName，appVersion，userAgent和platform。
• 一个location对象，
• 一个self对象，它指向window
• 一个importScript()方法，用来加载worker所有用到的外部js文件（chrome v.65没看到）。
• 所有ECMAscript方法，如Object，Array，Date等。
• XMLHttpRequest构造器。
• setTimeout() 和 setInterval()方法
• 一个close()方法，他能立刻停止运行worker
  

与web worker通信

他与网页通过实践接口进行通信 ，网页代码可以通过postMessage()方法给worker传递数据，

var work = new worker('code.js');
worker.onmessage = function(){
  alert('event data');
}
worker.postMessage('Nicholas');
// code.js内部代码
self.onmessage = function(event){
  self.postMessage('hello, ',+event.data+ "!");
}

最终的字符串在worker的onmessage事件处理器中构造完成。消息系统是网页和worker通讯的唯一途径。

worker加载外部文件，

worker内部由importScripts()方法加载外部文件，该方法可以同时接受多个文件。他的加载过程是阻塞的，但是由于worker在UI之外的线程运行，所以这种阻塞在这里却是优点，并不会造成UI响应，例如

// code.js内部代码
importScript('file.js','file2.js');
self.onmessage = function(){
  self.postMessage('hello, '+event.data+'!');
}

worker 的兼容性

// chrome 。。。。用不了，但看别人用的又没问题。。

worker 的实用价值，

原因，渲染dom的时候不能执行javascript代码，执行javascript代码的时候，UI界面会暂停响应。
那么和setTimeout相比，web worker脱离独立与UI进程，而setTimeout则被放入js接下来的UI线程，这个遵循先入后出原则，因此是会影响接下来的操作的，所以超过100ms的JSON解析都应该被放入web worker去解析，以免造成网页界面卡顿无响应现象发生。。。而任何小于100ms的代码都可以考虑放入setTimeout去执行，因为小于100ms，用户根本察觉不到，利用好setTimeout可以让js和谐运行，而运用好web worker则可以让UI线程中的队列和谐进行下去。
如果javascript代码执行时间很长，那么UI就会无响应，这就是所谓的页面卡死。Web Workers是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些耗时的javascript代码交由web Worker运行而不冻结用户界面。也就是说web worker和UI界面是运行在不同线程中的。它可以被用来处理一些接近500kb的json文件数据，计算中。。。这种一般被放入另外的事件线程，要么放入setTimeout定时器线程，要么放入worker线程，因为他在UI线程之外，不影响任何web操作。

结论：js和用户界面更新在同一个进程中进行，因此一次只能处理一件事情。这就意味着js运行过程中，用户不能输入，高效管理UI进程就是要确保js不能运行太长时间。

• 任何js代码都不应该超过100ms，过长会导致UI更新出现延迟，
• js运行期间，浏览器响应用户交互行为存在差异，无论如何js长时间运行会导致用户体验变得混乱和脱节，
• 定时器可以让代码延迟执行，它可以使得你的代码从长时间运行分解成一系列小的任务，
• web worker 是新版浏览器支持的特性，它允许你在UI线程外部执行JavaScript代码，从而避免锁定UI。
  web应用越复杂，积极主动的去管理UI进程就越重要，即使js代码再重要，也不能影响用户体验。

第七章Ajax

ajax是高性能JavaScript的基础，

数据传输

在不刷新页面前提下获取后台数据，从而更新dom内容

请求数据

五种常用技术用于向服务器请求数据：

• XMLHttpRequest(XHR)
• Dynamic script tag insertion 动态脚本注入
• iframe
• Comet
• Multipart XHR
  推荐使用XHR，动态脚本注入，Multipart XHR
  不推荐使用iframe，Comet

XMLHttpRequest(XHR)

这里由jquery封装的ajax，有fetch(es6)，有(axios，jsonp)等package，
这里就不过多介绍。

get 和 post

get请求的数据会被缓存起来，而post则不会，只有当你get请求的参数长度超过2048个字符的时候才应该使用post，尽管post比get安全，

动态脚本注入

var scriptElement = document.createElement('script');
scriptElement.src = 'https://amy-domain.com/js/lib.js'
document.head[0].appendChild(scriptElement);

但是和XML请求不同的是，你不能通过它设置请求的头信息，并且，参数传递也只能是get而不是post，并且她只能是纯粹的js代码，不能是json或者XML或者其他任何数据，无论任何代码都只能通过script.onload调用他们，尽管如此，这种技术速度却非常快，但是当他是不可控的时候，就是某种hack行为，因为无论这段动态注入的代码可以让网页重定向到其他网站，将用户密码发送出去，或者追踪用户操作并将他们发送到第三方服务器上面，因此引入的如果是外部不可控的js代码请格外小心。

Ajax 性能指南

一旦你确定了选择某种数据格式来传输，（建议用Graphql），那么接下来考虑其他优化方式

缓存数据

最快的Ajax请求就是没有请求，下面两种方法都可以

• 在服务端，设置http头信息以确保你的响应会被浏览器缓存(便于维护)
• 在客户端，吧获取的信息储存到本地，从而避免再次请求（一般是localStorage）(给你最大控制权)

设置http头

如果你希望响应被浏览器缓存，那么用get请求，还必须响应中加入正确的header

Expires: Mon, 28 July 2014 23:30:00 GMT

第八章 编程实践

####避免多重求值
js提取一个包含代码的字符串有4中方法

• eval(),这个太经典不用说
• Function()构造函数

const sum = new Function('arg1', 'arg2', 'return arg1 + arg2');
console.log(sum(1, 2));

• setTimeout()

var sum1 = 1;
var sum2 = 1;
setTimeout('sum = sum1 + sum2', 0);

• setInterval()

var sum1 = 1;
var sum2 = 1;
setInterval('sum = sum1 + sum2', 0);

以上4中方法都比直接求值要慢很多，因为每次都要创建一个新的解释器/编译器

应该使用Objecty/Array直接量

这个自己领悟

避免重复

例如下面这段代码,同时兼容ie和chrome

function addHandler(target,event,handler){
  if(target.addEventListener){
    target.addEventListener(event,handler,false);
  }esle{
    target.attachEvent('on'+event,handler)
  }
}

应该避免多次检查addEventListener是否支持。
如下所示：初始化的时候就检测是否支持IE，

const isIE = target.addEventListener; 
function addHandler(target,event,handler){
  if(isIE){
    target.addEventListener(event,handler,false);
  }esle{
    target.attachEvent('on'+event,handler)
  }
}

延迟加载

第一种消除函数中重复工作的方法是延迟加载，意味着信息在被加载之前不会做任何事情，在函数调用之前，没有必要判断该用那个方法去绑定或者取消绑定事件，采用延迟加载的函数版本如下：

function addHandler(target, event, handler) {
  // 复写现有函数
  if (target.addEventListener) {
    addHandler = function (target, event, handler) {
      target.addEventListener(event, handler, false);
    };
  } else {
    addHandler = function (target, event, handler) {
      target.attachEvent(event, handler, false);
    };
  }
  addHandler(target, event, handler);
}

这个函数实现了延迟加载的加载模式，这两个方法第一次被调用中，先决定使用哪种方法调用，随后函数会被包含正确操作的新函数覆盖，最后一步调用新函数，随后每次调用addHandler()都不会再做检测，因为检测代码以及被新函数覆盖。
调用延迟加载函数的时候，第一次事件较长，因为它必须检测接着调用另一个函数完成任务，但随后调用函数会更快，因为不需要在做检测。当一个函数在页面不会立即调用执行时，延迟加载是最好的选择。

条件预加载

他会在脚本预加载期间提前检测，而不会等到函数被调用，检测操作依然只有一次，只是他在过程中来的更早，例如：

const addHandler = document.body.addEventListener ?
  function (target, event, handler) {
    target.addEventListener(event, handler, false);
  } :
  function (target, event, handler) {
    target.attachEvent(`on${event}`, handler);
  };

这个例子先检查addEventListener()是否存在，然后根据结果指定选择最佳函数，如果他们存在的话，三元运算符号，返回指定函数，这个三元函数在一开始就判断了，所以称之为条件预加载，
条件预加载确保所有函数调用消耗的时间相同，其代价是需要在脚本加载时就检测，而不是在加载后。条件预加载适用于一个函数马上就要用到，并且在整个页面的生命周期中频繁出现的场合。

使用速度快的部分

尽管js经常被指责运行慢，但它这个语言在某部分运行速度快的让人难以置信。

位操作符

1&2 //两个操作数对应位都是1，该位返回1
1|2 //两个操作数对应位一个是1，该位返回1
1^2 //两个操作数对应位只有一个是1，该位返回1
~1    // 遇0则返回1，反之亦然

const newArr = [1, 2, 3, 4, 5, 6].map((arr, i) => {
  if (i & 2) {
    return 'event';
  }
  return 'odd';
});
console.log(newArr);

这样以上代码可被改写

const newArr = [1, 2, 3, 4, 5, 6].map((arr, i) => {
  if (i % 2) {
    return 'event';
  }
  return 'odd';
});
console.log(newArr);

第十章 构建部署高性能JavaScript应用

这个建议看我翻译的Yahoo的35条优化网站建议

阿里 外包

阿里的同学真给力，长达50分钟的电话初面。

hr： 你好，我是阿里的，说说你现在工作内容吧。
我： 我现在在做公司后台系统，用vue重构，同时做小程序。

hr： 你在做的过程中，遇到的难题，克服的困难。
我： 小程序商品详情页面有个弹框，我负责实现他的功能，让他在同时满足3个条件的情况下弹出，（这不是我的店铺，我第一次进到商品详情页面，我有店铺可以回去）才弹出该弹框。

hr： 嗯嗯，还有呢？
我： 公司业务做得少。（本来想说上家公司的那个webpack分批打包业务的。有点捉急mmp）说个自己的项目吧，最近有做一个围住神经猫的小游戏，遇到的困难自然是A算法，路径问题，……%￥&……

hr： 这个用库就可以了，网络上一堆，我想问的是，你做的东西对公司有什么帮助，你能不能说一些和公司业务相关的东西。这个问题就算了，你说一下，现在有一个数组，用一个函数就可以得到他的所有名字
我： arr.filter(e=>e.name==='peng').map(e=>e.name); O(1)复杂度吧。
hr： 用一个函数就做到它。
我： 不会，只能用两个。答案如下。。。

var arr = [
	{name:'xiaoming',id:"123"},
	{name:'xiaoming',id:"456"},
	{name:'xiaoming',id:"789"},
	{name:'xiaohua',id:"101112"},
	{name:'xiaowang',id:"131415"},
	{name:'xiaohong',id:"161718"}
];
res = arr.filter(e=>e.name==='xiaoming').reduce((all,e)=>{
	return {name: 'xiaoming',id:[...all.id , e.id]}
},{name:'xiaoming',id:[]})
console.log(res);

hr： 看过你写的 #8 这个issue，35条网络优化建议，你有哪些在公司这里用过。

我： 三级域名 api.vmei.com, static.vmei.com这种，静态资源设置缓存，同时静态资源不携带cookie，可以加速访问静态资源。开启http2，加速网络资源。

hr： 说一下http2与http1的区别.

我： http2采用二进制数据输送，比http1快很多，可以实现资源传输的优先级顺序，实现先加载css，再加载js，http2可以开启google那个加速模块。

http2开启了线路复用， 即可以共享连接，他是之前Google加速模块SPDY的升级版，采用二进制传输，有更强健壮性。header的压缩，服务端推送。有请求优先级别选择。

hr： 还有呢？你为什么开http2？

我： 因为看到京东也开了http2，所以我也开。

hr： 那你知道我们公司都没有全部开启https，你知道为什么么？你都没有去理解其中的原理，就跟风。。那你说一下http2如何开启吧，

我： 先开https，要有一个证书，用的let encrypt.

hr： https和http区别，以及你为什么要用https

我： 中间套一层tcl或者ssl加密层，对数据加密，https更加安全。其实翻墙也是同样的原理，中间套一层ssl加密，让防火墙无法识别数据，从而达到防火墙无法过滤信息的目的。

这个真说错了，shadowsock是基于socket5协议来做的，只不过搬瓦工刚好占用了443端口而让你误以为是https.

hr： 大概说说react的生命周期。以及ajax函数放在生命周期那个阶段最好。

我； 大概分为三部分 生成组件，挂在组件，销毁组件，以及一些componentwillReciveProp,shouldcomponentupdate之类的吧。ajax请求自然是放在created里面最好，放在组件生成的阶段。

hr： 你说的是vue吧，算了setState也懒得问你了。

😰尴尬的一b，其实是应该放在componentDidMount，因为真实Dom还没挂载，无法实现ajax请求，太久没做，忘光了。

hr： 如何防止this作用域紊乱。

我： 箭头函数内部没有this，所以多用箭头函数，bind也可以改变this指向。

hr： 说说webpack如何进行性能优化吧，在原有脚手架基础上。

我： 我觉得vue-cli已经做的非常好了，没有优化必要。我用的webpack3-4，从我接触到webpack的时候就已经 是webpack3了，

hr： 这个肯定是有的，最优配置都是自己做出来的。像我们公司从前的webpack打包要6分钟，现在我们优化到只要 1分钟，我们从1-4一直在做优化，我们自己有研发一个happypack的wepback打包插件，极限提速，666，顺带案例自己的库一波（mmp，10秒jsp编译过程我都嫌久了，真的没做过复杂项目呢。）

hr： 你说说vue-cli脚手架内部实现原理吧，

我： 首先自然是 merge（webpack.base + prod + dev）（居然不问我webpack/babel/vscode插件怎么写。外包还没到这个级别吧。又也许是知道我不会，懒得问直接跳过）

hr： 项目测试用的什么

我： eslint+vscode

hr： 如何禁止不符合eslint规范的代码被提交，

我： 当然是用自定义的命令咯，内部调用node，然后调用eslint对代码进行检查，错误数量>0则不执行git add .的代码咯，

小店铺 - SEE

面试官很nice...无论是深度还是广度,都面面俱到...离开的时候觉得没啥好说的,到宿舍再想想,面试官真的很棒.

页面优化

cdn加速,静态资源压缩,
接口数据持久化.
css只发生重绘不要重排,

跨域的几种几种实现方式

nginx / nodejs代理服务器
服务端头部添加'header('Access-Control-Allow-Origin:*')'即可接受所有...
jsonp....

很明显我说错了一半以上,但是面试官也不戳破....

科里化函数的实现....

mark,后面再补...

react 中的纯组件与class extends Component {}定义的组件的区别...

不会...

原生js实现一个promise.....

我不会.....

nodejs Express实现模型..... 以及和koa的区别...

express通过回调函数,洋葱模型,,,

beforeCallback()
content()
afterCallback()

koa才是洋葱模型,express不是啊,,...

很明显我又说错了...koa才是洋葱模型, express是啥,我也不清楚...

除了koa,其他python ,go,java, php会不会...

不会..

docker 会么,

会一点,docker分层, repository image container,
说具体怎么用吧,
通过exec可以进入到image快照里面,就像linux系统,
attach 和 exec 的区别知道么,,,
不知道....

好吧,面试官非常自信,走的时候,连还有什么你知道的,但我没有问到的么?都不用问了,知识点十分全面,好吧,是我太菜....多参加高水平公司的技术面试是否能提高个人水平,查漏补缺......?

前言

API标准规范

字符串为什么会有方法？？看下面代码

var name = 'peng';
a.length      //  4

真实js执行过程，字符串本身是没有属性的 new String(),才拥有属性。

var name = 'peng';
var temp = new String(name);
temp.length    // 4
temp = null;    // 用完销毁

{} === {} 不相等！！！

为啥？
同样是指针，{}并不保存在字面量上面，{}所指向的对象在内存里面，而他们指向的堆内的对象却不是同一个对象，所以不相等。

[] == ![] 相等

又是一个神奇的问题，== 会先将两边Number(str) 做一次转换 进而转化为 Number([]) === Number(![])的问题， 而 Number([]) // 0 =>>> ![] // false =>>> Number(false) // 0 ==>>> 0 === 0 // true

new 背后所做的一些事情

其实可以先看下面这个问题，new到底做了什么，先说结果 a === [];就是这样，a最后成了一个空数组，即一个空对象，它的原型是继承了Array的方法，他的原型就是Array，那么先就初步推测，

• 1.生成一个新的对象。
• 2.这个对象的原型就是new 后面的那个对象。

var arr = new Array();

那么进一步，实例化一个class，看下面代码， new到底做了什么？？？先看结果，根据结果进行推测，容易得出，new所做的

• 1.先生成一个新的对象。
• 2.这个对象的原型就是new 后面的那个对象。
• 3.对象内部的属性就是class constructor 内部this的name属性。

class Test {
  constructor(){
    console.log('constructor');
    this.name = 'peng';
  }
  say() {
    console.log(this.name);
  }
}
var t = new Test();

那么再看看标准答案，google到第一个答案。这句中，new做了以下几件事情。
1、创建一个新的对象，这个对象的类型是object；
2、查找class的prototype上的所有方法、属性，复制一份给创建的Object
3、将构造函数classA内部的this指向创建的Object
4、创建的Object的__proto__指向class的prototype
5、执行构造函数class
6、返回新创建的对象给变量b

其实也不是那么标准

好吧js引擎偷偷干的一些事，被我发现的就这些。毕竟js也只是单线程，而在浏览器环境中，丰富的交互体验仅靠单线程js是无法实现的。有兴趣就看看我写的 #24 浏览器中的事件循环。

Reference：JavaScript面向对象精要 - Nicholas C.Zakas 著（高手高手高高手）

前言

替代Restful

前言

其实最没有必要的就是去学习一个框架的用法，然而我上个月都在纠结这个事情。终于也算简单做了一个商城demo（请在移动端下观看）。下面准备写一篇关于vue双向绑定实现原理，并写个demo实现他那个TODO list demo。

set和get

随便谁都知道双向绑定是基于Object.defautlProptotype()，以及set和get.

var bValue;
Object.defineProperty(o, "b", {
  get : function(){
    return bValue;
  },
  set : function(newValue){
    bValue = newValue;
  },
  enumerable : true,
  configurable : true
});
o.b = 38;

通过自动给data数据下面每一个数据都设置set和get，来同步实现MVVM双向绑定。

好，下面的坑，交给以后的我来填坑。

靠谱是一种性格,更是一种，与技术无关。所以说，靠谱也挺难的。

一个人靠不靠谱，其实就看这三点：

• 凡事有交代
• 件件有着落
• 事事有回音。

有些人就是这样，他跟你说“好”，你不会觉得他是在敷衍你。

我回忆起当年一位我特别喜欢且令人尊敬的老师。
他教的班级很多，但是他记得每一个人的名字。无论我什么时候跟他讨教问题，即使当时他忙不过来，但不管多久也总能记得回答我。
给他发邮件，永远在12小时内答复，或者他会自动留言——“不好意思，我在xxxx，你的邮件我将在x月x日答复”。他回邮件的时间永远是约定那天的上午。

相信每个人聊天时都遇到过这样的情况，聊着聊着对方突然不说话了。

如果对方隔了一段时间回复你第一句话就是交待他刚刚因为什么事情没回信息。这种人实在不多了。
事事有回音，遇到这种人，都会让人的好感大增。
前几天在朋友圈看到表妹发了张聊天截图，这是她跟老公的聊天记录，也没有什么特别的内容，晚上挺晚了，表妹发信息想让应酬的老公回来时带一份小龙虾做宵夜，她老公看到后回复：好的。
接着他老公发来一张手机屏保的截图，显示电量已经百分之五。又说到：等下打不通别着急，我应该马上就可以回家了，跟你说一下。
凡事有交代，一个很小的举动，但却避免了不必要的误会，也让女生的心中感到温暖。
看来靠谱的人，真的是时时刻刻都能流露出靠谱的基因。

无论做什么事情都有始有终，突然消失回来后会说明原因，时间观念强，提前安排有规划。

今年春节我的工作并没有停止，不仅是我，我的设计师，我的助理也都拼尽全力准备各项工作。
然而过年七天假期，我并不忍心看到他们没有休息时间，谁家都要拜年，谁家也都有亲戚来走动，朋友同学聚会也一定少不了。
让我欣慰的是，每天在我们的微信群里都有大家提前安排的工作流程，跟完成时间，并且最终都保质保量地完成了自己的那部分工作，可能他们失去了一些时间灵活度，但并没有让工作质量受到丝毫影响。
那一刻，我是庆幸的，我为拥有这样的团队感到骄傲。
一个成熟的企业里，需要少数聪明的人和多数靠谱的人。
马云说过，我不需要提点子的人，阿里这么多人，提点子的人太多了，我需要有执行力的人。

真正成熟的人，就是事事有责任，事事有担当，事事有始有终。

都说分手见人品，冷暴力代表的是没责任心，没担当，无法善始善终。
靠谱的人最性感，不靠谱的人只会让别人不安。趁早远离，也别遗憾。

我们一生的幸福都需要和靠谱的人共同建立。

和有智慧的人交流，和情商高的人谈恋爱，和靠谱的人共事，和幽默风趣的人同行。
人生若能如此，风景无限好。
成功和幸福没有捷径，这个世界也没有一条道路可以通往靠谱，因为靠谱本身就是一条道路。

结论：要想改变别人对自己的看法，太难了，把别人对自己的看法当作标准，同时不就赋予了别人伤害自己的机会？？因为我们依靠别人的评价而定义自己的价值，因为靠谱往往只能从别人口中说出。所以房间堆满书，充实自己的精神世界。我遨游在代码的世界里，一会儿是js的数据结构与算法，一会儿是js函数式编程，一会儿又是JavaScript语言精粹，一会儿再是web建站进阶指南，未必也是一件坏事（也会少与外界交流）。人生匆匆，我选择我钟爱的生活方式，虽然这样的人不太可能拿到高薪,,但自己的人生，自己满意就好。

关于js的变量(为了统一，加上'use strict');

词法作用域

类似于面向对象的原型链， local -> global -> window ,如果局部拿不到变量，则从全局拿取，如果全局拿不到变量，就从window里面拿变量。

全局变量

'use strict'; 
// global variable
window.variable = 'window variable';
variable = 'global variable';
console.log(window.variable)  // 'window variable'

局部变量

"use strict";
window.variable = 'window variable'
variable = 'global variable'
// var variable = 'var variable'
let testFunc = e => {
   console.log('window:',window.variable); // global variable
   console.log('var:',variable); // undefined
   var variable = 'local variable'
   return variable
}
console.log(
   testFunc()
);// local variable

但是严格模式下有个问题，直接variable = 'variable'会报错。这里还要说明：为什么console.log('var:',variable); // undefined，问题在于var 函数内部声明的时候会发生一个提升('hoisting')，请看下文，这就是为什么variable是undefined;

let testFunc = e => {
   var variable;
   console.log('window:',window.variable); // global variable
   console.log('var:',variable); // undefined
   variable = 'local variable'
   return variable
}

var foo = function (){
  var a = 3;
  var b = 5;
  var bar = function (){
    var b= 7;
    var c = 11;
    console.log(`a:${a},b:${b},c:${c}`);    // a:3 b:7 c:11
    a += b+c;
    console.log(`a:${a},b:${b},c:${c}`);    // a:21 b:7 c:11
  };
  console.log(`a:${a},b:${b},c:${c}`);      // a:3 b:5 c:未定义会报错
  bar();
  console.log(`a:${a},b:${b},c:${c}`);      // a:21 b:7 c:undefined
}
foo()

闭包 - 私有变量

这是重要的一种技术，闭包内可以保存变量了，在下一次调用的时候可以记住变量。

"use strict";
let pingpong = (e => {
  var PRIVATE = 0;
  let let_private = 10;
  return {
    inc: e => {
      PRIVATE += e;
      return PRIVATE;
    },
    dec: e => {
      PRIVATE -= e;
      return PRIVATE;
    }
  }
})()
console.log(
  pingpong.inc(3),
  pingpong.inc(3),
  pingpong.dec(10)
);

动态作用域 - 变量

在《JavaScript 函数式编程》里面看到的一种变量命名方式,将{a:['first',second]}将他的值以数组形式储存起来，这样就可以得到上一次的命名值；

首先内存条和硬盘有什么不同，
电脑将数据写入内存的速度远远快于写入硬盘。

var a = 1;
1   =>   000000000001;   // 转换成2进制储存。

a bit = 1 or 0
-> 32 bits for init
memory = a long tape of bytes

为什么是koa而不是express呢？

• koa更小

• 易于理解的源码
  主线结构application用于构造整个koa，content.js用于构造ctx，request用于重写req，response用于重写res，源码容易读懂，koa作为基础框架，读懂源码是很重要的，便于日后开发流程以及扩展的可控制。express太大了懒得看。

• 基于es7的async/await的中间件调用机制

class koa{
  constructor(){
    this.middleware = []; //存放中间件
  }
  listener(){
    this.middleware.forEach(async mid=>{
      await mid();    // 让中间件异步执行
    })
  }
}

async / await + promise，同步与异步的完美结合，不得不说，如果不用这一新功能真的是一种遗憾。
koa2相比于koa1最显著的不同是，koa1基于yield，而koa2基于async/await将这一异步流程简化到了极致，对比express则比较恶心的使用了 嵌套回调。next()即是下一个嵌套中间件。

而对于koa，表面上看也差不多，但其实await后面的next调用的下一个中间件已经交给下一个js线程去实现了，

如果你对 线程 进程不清楚

通过我多次google查询async/await原理，估计他是基于多线程之间的操作，也就是说，async内部将后面的函数放入了另一个线程，这和和callback回调函数是有本质区别的，原因在于回调函数是基于js单线程的实现，假如说让js的回调函数与setTimeout函数结合使用会发生什么事情，都知道setTimeout会创建另一个线程叫做setTimeout线程，单独去执行他内部的js函数，下面图片实验一下。
额。。好像依然是单线程，只是函数暂停了。

• 重写req与res=> ctx
  将req 与 res 写成一个ctx对象
• 生态圈的繁荣

• koa/express的洋葱模型

下面这段代码很好的说明了koa的洋葱模型，从1-2-3-3-2-1的，next()表示下一个中间件

同样的道理，express也是基于这种洋葱模型来。这点koa和express没有区别，而koa运用了异步函数之后可以依靠.then()来进行下一步，google大量资料(几篇文章+stackoverflower),其实这里的异步函数依然是基于单线程的js语法糖，async/await。then这种异步并没有实现真正意义上的多线程，就像es6的class也一样只是语法糖，js并没有真正意义上的类。而这种是基于js底层封装好的语法糖，应该不存在性能问题，因此应该放心使用。。。好吧，由于个人水平问题，我不打算继续深入写koa简易版框架，我先读一下nodejs事件池

看一本js书好不好，主要看他对于面向对象的描述以及原型继承的描述。

第五章 继承

如何学习创建对象时理解面向对象js编程的第一步，而第二部是理解继承。

5.1 原型对象链和Object.prototype

JavaScript内建的继承方法被称之为原型对象链，又称之为原型对象继承。如果上一章所看，原型对象的属性可经由对象实例访问，这就是继承的一种形式。对象实例继承了原型对象的属性。因为原型对象也是一个对象。他也有自己的原型并继承其属性。因此可以说所有对象都继承自Object。

5.1.1 继承自 Object.prototype 的方法

前几章里用到的多个方法其实都是定义在Object.prototype上的。因此可以被其他对象继承，这些方法如下。

这5种方法经由继承出现在所有对象种。当需要让对象在JavaScript中以一致的方式工作，最后尤为重要，有时候你甚至会想要自己定义他们。

1. valueOf

返回原本的值。当每一个操作符被用于一个对象时候就会调用valueOf的方法。默认返回对象实例本身。。原始封装类型重写valueOf,对于字符串返回字符串本身，对于Boolean返回一个布尔值。对number返回一个数字。

var now = new Date();
var earlier = new Date(2010, 1, 1);

console.log(now > earlier);

上面这个例子，now是一个代表当前时间的Date,而earlier是一个过去的时间，当使用<比较的时候，在两个对象都调用了valueOf()的方法，另外，你甚至可以对比两个Date相减来获得他们在epoch时间上的差值。

2.toString()

一旦value()返回的是一个引用值而不是原始值的时候，就会回退调用toString()方法，另外，当JavaScript期待一个字符串的时候，也会对原始值隐式调用toString()。例如，当加号操作符的一边是一个字符串，另一边会被自动转化成字符串。如果另一边是一个原始值，就会自动转化成字符串。不懂请看下面例子，重写Object的toString原型方法，'name'+{}; // namename ，字符串和布尔值相加会先将右边的布尔值转化成字符串，通过toString()这个方法。，首先如果右边是引用值，会先调用value的方法，如果value返回的还是一个引用值，那就调用toString()

const str = {
  name: 'peng',
  toString() {
    return 'toString';
  },
  valueOf() {
    return 'val';
  },
};
Object.prototype.valueOf = function (){
  return 'value'
}
Object.prototype.toString = function (){
  return 'staring'
}
console.log(`name${str}`);    // namestring

修改Object.prototype

修改Object会影响所有对象，这很危险。

Object.prototype.add = function (num) {
  return this + num;
};
console.log({}.add(5));   // [object Object]5

这个新添加的属性是可枚举的.请看下面的例子，我给原型对象添加add方法，返回this+val,，这个会返回本对象并且因为他是引用值，所以会调用toString()方法，而toString方法又被我改写了，所以返回的就是'to stirng5'。
同时被新添加的add方法是实体字，说明他是可以被枚举的。

对象继承

对象继承是最简单的原型继承，你唯一需要做的就是指定新对象的[[Prototype]]指向原型对象。
同时可以使用Object.create()方法指定，他接受2个参数，第一个是需要被设置成新对象的[[Prototype]]的对象，，第二个参数和Object.definedProperties()中使用的一样。

var book = {
  title: 'your now Principles of Object-Oriented Javascript.'
}
===========**the same as below**============
var book = Object.create(Object.prototype, {
    title: {
        configurable: true,
        enumerable: true,
        value: 'The Principles of Object-Oriented Javascript',
        writable: true,
    }
});

两种声明具有相同效果，第一种使用了字面量自定义属性，而第二种使用了Object.create，显示用了同样的操作，这种默认继承无趣，但是如果你继承其他对象就有意思了。

const person1 = {
  name: 'peng',
  sayName() {
    console.log(this.name);
  },
};

const person2 = Object.create(person1, {
  name: {
    configurable: true,
    enumerable: true,
    value: 'Greg',
    writable: true,
  },
});

person1.sayName();    // 'peng'
person2.sayName();    // 'Grey'
console.log(person1.hasOwnProperty('sayName');    // true
console.log(person2.hasOwnProperty('sayName');    // false
console.log(person1.isPrototypeOf(person2);    // true

person2继承person1 继承Object

假设你通过Object.create()创建时第一个参数为null，那么继承指向空。看下图，他没有任何方法，因此同时，他也是一个完美的hash容器，因为你给他命名任何方法，都可以，不存在任何冲突。

无法转换，因为不存在toString方法来进行隐式转换。一个很有意思，你可以通过它创建一个没有原型的对象。

构造函数继承

当你声明一个类的时候，JavaScript引擎默认帮你做了如下事情，

function Person(){}
Person.prototype = Object.create(Object.prototype, {
  constructor: {
    configurable: true,
    enumerable: true,
    value: Person,
    writable: true,
  }
})

上面可以看出，你不需要做任何事情，这段代码帮你构造一个构造函数，其原型指向另一个继承自Function的的对象，并且它有一个新属性constructor，其值指向构造函数，如此循环下去，但是他们是一种循环式的自引用，众所周知，原型链仅仅只是一个指向对象的指针。这只是一种自己指向自己的循环引用point。下图例子说的很清楚，我这里只有一个a对象，a对象属性a指向它本身。那这就是循环自引用。而构造函数仅仅只是这样一个例子的复杂化而已。所有引用类型都是指针指向(point)

function Rectangle(length, width) {
  this.length = length;
  this.width = width;
}

Rectangle.prototype.getArae = function () {
  return this.length * this.width;
};

Rectangle.prototype.toString = function () {
  return `[Rectangle ${this.length}x${this.width}]`;
};

// inherits from Rectangle
function Square(size) {
  this.length = size;
  this.width = size;
}

Square.prototype = new Rectangle();
Square.prototype.constructor = Square;

Square.prototype.toString = function () {
  return `[Square ${this.length}x${this.width}]`;
};

const rect = new Rectangle(5, 10);
const square = new Square(6);

console.log(rect.getArae());
console.log(square.getArae());

console.log(rect.toString());
console.log(square.toString());

console.log(square instanceof Square);
console.log(square instanceof Rectangle);
console.log(square instanceof Object);

这个代码有两个构造函数：Rectangle和Square。Suqare构造函数的prototype属性被改写成Rectangle的一个对象实例。此时不需要给Rectangle的调用提供参数，因为他们不需要被使用，而且如果提供了，那么所有Square的对象实例都会享有共同的维度，用这种方法改变原型链，你需要确保构造函数不会再参数却是的时候抛出错误。（很多构造函数包含的初始化逻辑会需要参数）且构造函数不会改变任何全局状态。Square.prototype被改写后，constructor属性被重置为Square。
然后，rect作为Rectangle的实例对象呗创建，而square则被作为Square的实例创建。两个对象都有getArea()方法，因为他被继承自Rectangle.prototype和Object的对象实例。instanceof使用原型对象链检查对象类型。
Square.prototype并不需要真的被改写为一个Rectangle对象，毕竟Rectangle构造函数并没有真的为Square做什么必要的事情，事实上，唯一相关的部分是Square.prototype需要指向Rectangle.prototype，使得继承得以实现，这意味着你可以用Object.create()简化例子，代码如下

// inherits from Rectangle
function Square(size){
  this.length=  size;
  this.width=  size;
}
Square.prototype = Object.create(Rectangle.prototype, {
  constructor: {
    configurable: true,
    enumerable: true,
    value: Square,
    writable: treu
  }
});
Square.prototype.toString = function() {
  return `[Square ${this.length}x${this.width}]`;
};

在这个版本的代码中，Square.prototype被改写成一个新的继承自Rectangle.prototype的对象，而Rectangle构造函数没有被调用。这意味着，你不再需要担心不参加构造函数会导致的错误。除此之外。

构造函数的窃取

啥意思？

由于JavaScript的继承通过原型对象继承来实现，因此不需要调用对象的父类的构造函数，如果你却是需要再子类构造函数中调用父类构造函数，那你就需要利用JavaScript函数工作的特性。
第二章提到过，call和apply方法允许你再调用函数是提供不同的this值，那正好是构造函数窃取的关键。而这个就是构造函数窃取的关键，只需要再子类构造函数中调用call或者apply调用父类的构造函数，并将新的创建的对象传进去即可。实际上，就是用自己的对象窃取父类的构造函数，如下例子。

function Rectangle(length, width) {
  this.length = length;
  this.width = width;
}

Rectangle.prototype.getArae = function () {
  return this.length * this.width;
};

Rectangle.prototype.toString = function () {
  return `[Rectangle ${this.length}x${this.width}]`;
};

// inherits from Rectangle
function Square(size) {
  Rectangle.call(this, size, size);

  // optional: add new prototype or override existing ones here
}

Square.prototype = Object.create(Rectangle.prototype, {
  constructor: {
    configurable: true,
    enumerable: true,
    value: Square,
    writable: true,
  },
});

Square.prototype.toString = function () {
  return `[Square ${this.length}x${this.width}]`;
};

const square = new Square(6);

console.log(square.getArae());
console.log(square.width);
console.log(square.length);

Square构造函数调用了Rectangle构造函数，并传入了this和size量词，一次作为length，另一次作为width，这样做会在新的对象上创建length，和width属性并让他们等于size，这是一种避免再构造函数理重新定义你希望继承的属性的手段。你可以在调用完父类的构造函数后继续添加新属性覆盖已有的属性。

这分两步走的过程在你需要完成自定义类型之间的继承是比较有用，你经常需要修改一个构造函数的原型对象，你也经常需要在子类的构造函数中调用父类的构造函数的原型对象。一般，需要修改prototype来继承方法并且构造函数窃取来设置属性，由于这种做法模范了那些基于类的语言的类继承。，通常呗成为伪类继承。

5。5 访问父类方法

前面例子中，Square类型有自己的toString方法，，子类覆盖父类，但是如果你要访问父类怎么办？？？代替方法是在通过call或apply调用父类的原型对象的方法时传入一个子类的对象。

function Rectangle(length, width){
  this.length = length;
  this.width = width;
}

Rectangle.prototype.getArae = function () {
  return this.length * this.width;
};

Rectangle.prototype.toString = function () {
  return `[Rectangle ${this.length}x${this.width}]`;
};
// inherits from Rectangle
function Square(size) {
  Rectangle.call(this, size, size);

  // optional: add new prototype or override existing ones here
}
Square.prototype = Object.create(Rectangle.prototype, {
  constructor: {
    configurable: true,
    enumerable: true,
    value: Square,
    writable: true,
  },
});

Square.prototype.toString = function () {
  vartext = Rectangle.prototype.toString.call(this);
  return text.replace("Rectangle, "Square");
};

在这个版本的代码中，Square.prototype.toString()通过call调用Rectangle.prototype.toString()。该方法只需要在返回文本结果钱用"Square","Rectangle"。这种做法看起来有一点冗长，但是唯一有效访问父类的方法。

第六章 对象模式

终于讲到这一节，非常经典的啊。该书也只生写最后10页。精华就在后面，坚持看下去吧。

本章讲述创建高可管理和创建对象的能力。

6.1 私有成员和特权对象

• 模块模式，俗称IIFE返回一个对象，而变量外部不可见，

var yourObject = (function (){
 const private = 'pengliheng'

 return {
   a:1,
   b:2
 }
}());

console.log(yourObject);

上面创建了匿名函数立即执行，。同时这意味着，这个函数仅存在于被调用瞬间，一旦执行就立即销毁了。IIFE常见的用于浏览器端环境打包模式。适用于模块化。

6.1.2 构造函数的私有成员

模块定义单个对象的是由属性上十分有效i，但对于那些同样需要私有属性的自定义类型又要怎么做？你可以在构造函数内部使用类似模块来创建每个实例的私有数据。如下例子：

function Person(name) {
  // define a variable only accessible inside of the Person constructor
  let age = 25;
  this.name = name;
  this.getAge = function () {
    return age;
  };
  this.growOlder = function () {
    age += 1;
  };
}

const person = new Person('Nicholas');

console.log(person.name);
console.log(person.getAge());

person.age = 100;
console.log(person.getAge());

person.growOlder();
console.log(person.getAge());
console.log(person);

上面代码中Person构造函数就有一个本地变量age。该变量被用于getAge()和growOlder()方法。当你创建Person的一个实例时候，该实例接受其自身的age变量，getAge()方法和growOlder()方法。这种做法很多时候都有类似模块模式，构造函数创建一个本地作用域返回this对象。上一章讨论过，将对象直接放在对象实例上不如放在其原型上面有效，如果你需要实例私有数据，这是唯一有效方法。
但是如果你需要所有实例都可以共享私有数据，就好像它被定义在原型上面那样，可以结合模块模式和构造函数，如下。

const Person = (function () {
  // define a variable only accessible inside of the Person constructor
  let age = 25;

  function InnerPerson(name) {
    this.name = name;
  }

  InnerPerson.prototype.getAge = function () {
    return age;
  };

  InnerPerson.prototype.growOlder = function () {
    age += 1;
  };
  return InnerPerson;
}());

const person = new Person('Nicholas');

console.log(person.name);
console.log(person.getAge());

person.age = 100;
console.log(person.getAge());

person.growOlder();
console.log(person.getAge());
console.log(person);

上面代码InnerPerson构造函数被定义在IIFE中。变量age被定义在构造函数外，但是在模块内部，并被两个原型对象的方法使用。IIFE返回InnerPerson构造函数作为全局作用域里面的Person构造函数使用，最终Person实例全部共享age作为闭包内部变量。

6.2 混入

JavaScript大量使用了伪类继承和原型对象继承，还有另一种就是混入。第一个对象接收者，通过直接赋值第二个对象提供者的属性从而接受了这些属性。

funtion mixin(receiver, supplier) {
  for(var property in supplier){
    if(supplier.hasOwnPrototype(property){
      receiver[property] = supplier[property];
    }
  }
}

函数mixin()接受2个参数，接收者和提供者，，通过枚举方式，将所有可枚举的属性赋值给接收者，通过for...in循环所有可枚举属性。

作用域安全的构造函数

涨见识。。

如果不通过new就创建实例函数

var a  =Array();

上图为什么呢，因为它上了安全套

function Person(name){
  if(this instanceof Person){
    this.name = name;
  } else {
    return new Person(name);
  }
}

对于上面这个构造函数，当自己呗new调用的时候，就设置name属性，如果不被new调用的时候，则以new递归调用自己来为自己创建正确的属性。这么做就能保证行为一致性。

var person1 = new Person('peng');
var person2 = Person('peng');

console.log(person1 instanceof Person);   // true
console.log(person2 instanceof Person);   // true

全书完。这是我写的最细的一本书了，短短92页，我每一页都给照抄下来了😭。

reference：JavaScript面向对象精要

javaScript 面向对象

老方法

function Checking(amount) {
  this.balance = amount;
  this.deposit = deposit;
  this.withdraw = withdraw;
  this.toString = toString;
}

// 存amount的钱
function deposit(amount) {
  this.balance += amount;
}

// 花掉
function withdraw(amount) {
  if (amount <= this.balance) {
    // 够钱花就减去
    this.balance -= amount;
  } else if (amount > this.balance) {
    // 不够钱就打印不够钱
    console.log('钱不够花啊');
  }
}

// 展示还有多少钱
function toString() {
  return `Balance: ${this.balance}`;
}

// 新建一个钱包
const account = new Checking(500);
account.deposit(1000);
console.log(account.toString());
account.withdraw(1501);
console.log(account.toString());