那些年看过的宝藏文章

256 阅读2分钟

必会基础知识

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.

browser-event-loop.png

Node

node-event-loop.png

Web Worker

参考文章

  1. 面试问到 Event Loop,这样回答最完美
  2. 为什么 setTimeout 有最小时延 4ms ?
  3. 事件循环的进一步探索 - Erin Zimmer - JSConf EU 2018
  4. 菲利普·罗伯茨:到底什么是 Event Loop 呢? | 欧洲 JSConf 2014
  5. 阮一峰 event loop

缓存

cache.png

参考文章

  1. 缓存(一)——缓存总览:从性能优化的角度看缓存

原型、闭包和继承

《高程原型图》

prototype.png

原型对象,构造函数,实例对象之间关系

  1. 每个构造函数(constructor)都有一个原型对象(prototype),
  2. 原型对象都包含一个指向构造函数的指针,
  3. 而实例(instance)都包含一个指向原型对象的内部指针.

实例,原型对象,构造函数之间关系.jpeg

什么是原型链

原型链思路.jpeg

继承

  1. 组合继承

    融合原型链继承和构造函数的优点,是 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;
    
  2. 寄生组合式继承

    开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式。

    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);
    

参考文章

  1. 深入理解 javascript 原型和闭包系列文章
  2. 面试官问:JS 的继承 ——extends

框架源码分析

React Router

  1. 以 withRouter 出发看 React 高阶组件
  2. 理解 react-router 中的 history
  3. 浅谈 react-router 实现原理

Vue

  1. vue 的双向绑定原理及实现

React

  1. React 技术揭秘
  2. React源码系列

其它

SSR

  1. ssr 基础
  2. ssr 总结基础篇
  3. 基础篇——实战 React Server Side Rendering with Express
  4. 详尽——实战 react + express + webpack 搭建 React SSR

文章推荐

  1. 文件上传那些事