数据体系

• 数据闭环：
  分析环境（分析数据）、生产环境（生产数据）、数据缓冲区（原始数据）

What is future of human? Who knows.

Since test is quite significant to the program. Hence, test has obtained lots of attention from managers or developers themselves. However, the test in JavaScript is still under development. Take myself for example, I have never write any unit test case for my JavaScript code. Certainly, this book will not only contains the unit test. I am sure there must be something else valuable. Let's begin and explore the unknown things 🎉

原文： http://zhouweicsu.github.io/blog/2017/04/21/vue-2-0-template/

• AST 数据结构
• VNode数据结构
• createElement
• render function

从基础构件开始：编程范式

设计原则

SRP：单一职责原则

OCP：开闭原则

LSP：里氏替换原则

ISP：接口隔离原则

DIP：依赖反转原则

组件构建原则

软件架构

实现细节

Structure pseudo class selector

• nth-child(n)
• nth-last-child(n)
• nth-of-type(n)
• nth-last-of-type(n)

The n begins with 1 instead of 0. If n is 0, it will not match any element. The n could be integer (1,2,3,4), key word(odd, even), or equation(2n+1, -n+5).
Hence the n could be:

1. specific number
2. equation n*length
3. equation n+length
4. equation -n+length

The scenes to be used of nth-of-type

• To format a free style interface, for example the rotation angle of picture
• Make the picture alternately float to left and right
• Make special style for the first paragraph
• Make a alternate style for a list
• Make figure

Pseudo elements

• ::first-letter
• ::first-line
• ::before and ::after
• ::selection, it can only accepts two attribute, including background and color.

attribute selector

• E[attr]
• E[attr=val]
• E[attr|=val]
• E[attr~=val]
• E[attr*=val]
• E[attr^=val]
• E[attr$=val]

border-radius

• Set just one value, top-left = top-right = bottom-right = bottom-left
• Set two values: top-left = bottom-right, top-right = bottom-left
• Set three values: the first is top-left, the second are top-right and bottom-left, the third is bottom-right
• Set four values: top-left, top-right, bottom-right, bottom-left

And the border-radius can be set respectively:

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

The attributes of border-radius can contain two values:
The first is the horizontal fillet radius, and the second is the vertical fillet radius. And the two values will be split by '/'.
NOTICE:
When set the specific border-radius(e.g. border-top-left-radius), the '/' is not needed. If you add, it will be a wrong behavior.

Utilize border-radius to make different shapes

The basic background attributes:

• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background-origin
• background-clip
• background-size
• background-break

The conditions to validate the text-overflow:

• width
• white-space:nowrap
• overflow:hidden

note:word-wrap cannot work in <pre> and <table>
Punctuation is not allowed placed at the beginning of the line in IE, but allowed in Chrome/Safari/Firefox.

box model

1. W3C standard box model
   outer box:
   element width = content width + padding + border + margin
   element height = content height + padding + border + margin
   inner box:
   element width = content width + padding + border
   element height = content height + padding + border
   2)IE traditional box model
   outer box:
   element width = content width + margin
   element height = content height + margin
   inner box:
   element width = content width
   element height = content height

How to tell different versions of Flexbox

• For 'display:box' or 'box-{*}', it is the version in 2009.
• For 'display:flexbox' or 'flex()', it is the version in 2011, called hybrid version either.
• For 'display:flex' or 'flex-{*}', it is the current version, and the standard version of W3C.

模型评估和选择

偏差、方差和噪声的含义

• 偏差：度量了学习算法的期望预测和真实结果的偏离程度，刻画了算法的拟合程度
• 方差：度量了同样大小的训练集的变动所导致的学习性能的变化，刻画了数据扰动所造成的影响
• 噪声：表达了当前任务上任何学习算法所能达到期望泛化误差的下界，刻画学习问题本身的难度

一般来说，偏差和方差是有冲突的，称为偏差-方差窘境（bias-variance dilemma）

1.了解你使用的JavaScript版本

“use strict"指令只有在脚本或函数的顶部才能生效。
如何将严格模式和非严格模式的文件区分：
第一个解决方案是不要将进行严格模式检查的文件和不进行严格模式检查的文件连接起来。

第二个解决方案是通过将其自身包裹在立即调用的函数表达式（IIFE）中的方式来链接多个文件。

(function() {
  // file1.js
  "use strict";
  functionf() {
    // ...
  }
  // ...
})();
(function() {
  // file2.js
  // no strict-mode directive 
    function f() {
      var arguments = [];
      / /...
    }
    //...
})();

2.理解JavaScript的浮点数

JavaScript中的所有的数字都是双精度浮点数。

3当心隐式的强制转换

NaN是JavaScript中唯一一个不等于其自身的值。

JavaScript中有7个假值：false, 0, -0, '', NaN, null, undefined.

对象是通过valueOf方法墙纸转换为数字，通过toString的方法强制转换为字符串。

4.原始类型由于封装对象

5.避免对混合类型使用==运算符

• 当参数类型不同时，==运算符应用了一套难以理解的隐式强制转换规则
• 使用===运算符，使读者不需要设计任何的隐士强制转化就能明白你的比较运算
• 当比较不同类型的值时，使用你自己的显示强制转化使程序的行为更清晰

6.了解分号插入的局限

• 仅在"}"标记之前、一行的结束和程序的结束处推导分号。
• 仅在紧接着的标记不能被解析的时候推导分号。
• 在以(, [, +, - 或/ 字符开头的语句签绝对不能省略分号。
• 当脚本连接的时候，在脚本之间显示地插入分号。经常看到很多库的开头会有一个分号。
• 在return, throw, break, continue, ++, -- 的参数之前不能换行。
• 分号不能作为for循环的头部或空语句的分隔符而被推导出。

7.视字符串为16位的代码单元序列

8.尽量少用全局对象

• 避免声明全局变量。
• 尽量声明局部变量。
• 避免对全局对象添加属性。
• 使用全局对象来做平台特性检测。

9.始终声明局部变量

• 始终使用var声明新的局部变量。
• 考虑使用lint工具帮助检查未绑定的变量。

10.避免使用with

• 避免使用with语句。
• 使用简短的变量名代替重复访问的对象。
• 显示地绑定局部变量到对象属性上，而不是使用with语句隐式的绑定它们。

11.熟练掌握闭包

• 函数可以引用定义在其外部作用域的变量。
• 闭包比创建它们的函数有更长的生命周期。
• 闭包在内部存储其外部变量的引用，并能读写这些变量。

12.理解变量提升

• 在代码块中的变量声明会被隐式地提升到封闭函数地顶部。
• 重声明变量被视为单个变量。
• 考虑手动提升局部变量的声明，从而避免混淆。

13.使用立即调用的函数表达式创建局部作用域

• 理解绑定与赋值的区别。
• 闭包通过引用而不是值捕获它们的外部变量。
• 使用立即调用的函数表达式（IIFE）来创建局部作用域。
• 当心在立即调用的函数表达式中包裹代码块可能改变其行为的情形。

14.当心命名函数表达式笨拙的作用域

15.当心局部块函数声明笨拙的作用域

16.避免使用eval创建局部变量

17.间接调用eval函数优于直接调用

18.理解函数调用、方法调用以及构造函数调用之间的不同

• 方法调用将被查找方法属性的对象作为调用接收者。
• 函数调用将全局对象（处于严格模式下则为undefined）作为其接收者。一般很少使用函数调用语法来调用函数。
• 构造函数需要通过new运算符调用，并产生一个新的对象作为其接收者。

19.熟练掌握高阶函数

20.使用call方法自定义接收者来调用方法

• 使用call方法自定义接收者来调用函数。
• 使用call方法可以调用在给定的对象中不存在的方法。
• 使用call方法定义高阶函数允许使用者给回调函数指定接收者。

21.使用apply方法通过不同数量的参数调用函数

• 使用apply方法指定一个可计算的参数数组来调用可变参数的函数。
• 使用apply方法的第一个参数给可变参数的方法提供一个接收者。

22.使用arguments创建可变参数的函数

• 使用隐式的arguments对象实现可变参数的函数。
• 考虑对可变参数的函数提供一个额外的固定袁术的版本，从而使使用者无需借助apply方法。

23.永远不要修改arguments对象

• 永远不要修改arguments对象。
• 使用[].slice.call(arguments)将arguments对象复制到一个真正的数组中再进行修改。

24.使用变量保存arguments的引用

• 当引用arguments时当心函数嵌套层级。
• 绑定一个明确作用域的引用到arguments变量，从而可以在嵌套的函数中引用它。

25.使用bind方法提取具有确定接受者的方法

• 要注意，提取一个方法不会将方法的接收者绑定到该方法的对象上。
• 当给高阶函数传递对象方法的时候，使用匿名函数在适当的接收者上调用该方法。
• 使用bind方法创建绑定到适当接收者的函数。

26.使用bind方法实现函数柯里化

• 使用bind方法实现函数柯里化，即创建一个固定需求参数子集的委托函数。
• 传入null或者undefined作为接收者的参数实现函数柯里化，从而忽略其接收者。

27.使用闭包而不是字符串来封装代码

• 当将字符串传递给eval函数以执行它们的API的时候，绝不要在字符串中包含局部变量的引用。
• 接受函数调用的API优于使用eval函数执行字符串的API。

28.不要信赖函数对象的toString方法

• 当调用函数的toString方法时，并没有要求JavaScript引擎能够精确地获取到函数的源代码。
• 由于在不同的引擎下调用toString方法的结果可能不同，所以绝不要信赖函数源代码的详细细节。
• toString方法的执行结果并不会暴露存储在闭包中的局部变量值。
• 通常情况下，应该避免使用函数对象的toSttring方法。

29.避免使用非标准的栈检查属性

• 每个arguments对象都具有两个额外的属性：arguments.callee和arguments.caller。前者指向使用该arguments对象被调用的函数；后者指向调用该arguments对象的函数。
• 避免使用非标准的arguments.caller和arguments.callee属性，因为它们不具有很好的移植性。
• 避免使用非标准的函数对象caller属性，因为在包含全部栈信息方面，它是不可靠的。

30.理解prototype、getPrototypeOf以及__proto__之间的不同

• C.prototype用于建立由new C()创建的对象的原型。
• Object.getPrototypeOf(obj)是ES5中用来获取obj对象的原型对象的标准方法。
• obj.__proto__是获取obj对象的原型对象的非标准方法。

31.使用Object.getPrototypeOf函数而不是使用__proto__属性

if (typeof Object.getPrototypeOf === 'undefined') {
  Object.getPrototypeOf = function(obj) {
    if (!obj || (t !== 'object' && t !== 'function') {
      throw new TypeError('not an object');
    }
    return obj.__proto__;
    };
}

32.始终不要修改__proto__属性

• 始终不要修改对象的__proto__属性。
• 使用Object.create函数给新对象设置自定义的原型。

33.使构造函数与new操作符无关

34.在原型中存储方法

• 将方法存储在实例对象中将创建该函数的多个副本，因为每个实例对象都有一份副本。
• 将方法存储于原型中由于存储在实例对象中。

35.使用闭包存储私有数据

• 闭包变量是私有的，只能通过局部的引用获取。
• 将局部变量作为私有数据从而通过方法实现信息隐藏。

36.只将实例状态存储在实例对象中

• 共享可变数据可能会出问题，因为原型是被其所有的实例所共享的。
• 将可变的实力状态存储在实例对象中。

37.认识到this变量隐式绑定问题

38.在子类的构造函数中调用父类的构造函数

• 在子类构造函数中显示地传入this作为显示的接收者调用父类构造函数。
• 使用Object.create函数来构造子类的原型对象以避免调用父类的构造函数。

39.不要重用父类的属性名

• 留意父类使用的所有属性名。
• 不要子类中重用父类的属性名。

40.避免继承标准类

41.将原型视为实现细节

• 对象是接口，原型是实现。
• 避免检查你无法控制的对象的原型结构。
• 避免检查实现在你无法控制的对象的内部的属性。

42.避免使用轻率的猴子补丁

由于对象共享原型，因此每一个对象都可以增加、删除或修改原型的属性。这就是猴子补丁的定义。

43.使用Object的直接实例构造轻量级的字典

44.使用null原型以防止原型污染

45.使用hasOwnProperty方法以避免原型污染

• 使用hasOwnProperty方法避免原型污染。
• 使用词法作用域和call方法避免覆盖hasOwnProperty方法。
• 考虑在封装hasOwnProperty测试样板代码的类中实现字典操作。
• 使用字典类避免将'proto'作为key使用。

46.使用数组而不要使用字典来存储有序集合

47.绝不要在Object.prototype中增加可枚举的属性

增加不可枚举的属性

Object.defineProperty(Object.prototype, 'allKeys', {
  value: function() {
    var result = [];
    for (var key in this) {
      results.push(key);
    }
    return result;
  },
writable: true,
enumerable: false,
configurable: true
});

48.避免在枚举期间修改对象

49.数组迭代优先使用for循环而不是for...in循环

50.迭代方法由于循环

51.在类数组对象上复用通用的数组方法

• 对于类数组对象，通过提取方法对象并使用其call方法来复用通用的Array方法。
• 任意一个具有索引属性和恰当的length属性的对象都可以使用通用的Array方法。

52.数组字面量由于数组构造函数

53.保持一致的约定

54.将undefined看作'没有值'

55.接受关键字参数的选项对象

56.避免不必要的状态

57.使用结构类型设计灵活的接口

58.区分数组对象和类数组对象

59.避免过度的强制转换

60.支持方法链

61.不要阻塞I/O事件队列

62.在一部序列中使用嵌套或者命名的回调函数

63.当心丢弃错误

64.对异步循环使用递归

65.不要在计算是阻塞事件队列

66.使用计数器来执行并行操作

67.绝不要同步地调用异步的回调函数

68.使用promise清除异步逻辑