必会基础知识
Event loop
Browser
- don't block the event loop? Don't put shitty slow code on the stack, because you do that the browser can't do what it needs to do.
Node
Web Worker
参考文章
- 面试问到 Event Loop,这样回答最完美
- 为什么 setTimeout 有最小时延 4ms ?
- 事件循环的进一步探索 - Erin Zimmer - JSConf EU 2018
- 菲利普·罗伯茨:到底什么是 Event Loop 呢? | 欧洲 JSConf 2014
- 阮一峰 event loop
缓存
参考文章
原型、闭包和继承
《高程原型图》
原型对象,构造函数,实例对象之间关系
- 每个构造函数(constructor)都有一个原型对象(prototype),
- 原型对象都包含一个指向构造函数的指针,
- 而实例(instance)都包含一个指向原型对象的内部指针.
什么是原型链
继承
-
组合继承
融合原型链继承和构造函数的优点,是 JavaScript 中最常用的继承模式。
function Parent(name) { this.name = name; this.colors = ["red", "blue", "green"]; } Parent.prototype.getName = function () { console.log(this.name); }; function Child(name, age) { Parent.call(this, name); this.age = age; } // 重复调用——寄生组合继承优化关键。 // 优化这里,也可以减少在 Child.prototype 上面创建不必要的、多余的属性。 Child.prototype = new Parent(); Child.prototype.constructor = Child;
-
寄生组合式继承
开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。
function Parent(name) { this.name = name; this.colors = ["red", "blue", "green"]; } Parent.prototype.getName = function () { console.log(this.name); }; function Child(name, age) { Parent.call(this, name); this.age = age; } // 关键的三步 var F = function () {}; F.prototype = Parent.prototype; Child.prototype = new F(); Child.prototype.constructor = Child; // 封装 function object(o) { function F() {} F.prototype = o; return new F(); } function prototype(child, parent) { var prototype = object(parent.prototype); prototype.constructor = child; child.prototype = prototype; } // 当我们使用的时候: prototype(Child, Parent);
参考文章
框架源码分析
React Router
Vue
React
其它
SSR
- ssr 基础
- ssr 总结基础篇
- 基础篇——实战 React Server Side Rendering with Express
- 详尽——实战 react + express + webpack 搭建 React SSR