实现一个 react-router

本文将用尽可能容易理解的方式,实现最小可用的 react-router v4history,目的为了了解 react-router 实现原理。

bind 实现

用法

MDN bind

极简实现

1
2
3
4
5
6
Function.prototype.bind = function(obj, ...args) {
var fn = this;
return function() {
return fn.apply(obj, args)
}
}

简易实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Does not work with `new funcA.bind(thisArg, args)`
if (!Function.prototype.bind) (function(){
// Is this an error? We are invoking <call.bind> method before it's defined.
var slice = Array.prototype.slice.call.bind(Array.prototype.slice);
Function.prototype.bind = function() {
var thatFunc = this, thatArg = arguments[0];
var args = slice(arguments, 1);
if (typeof thatFunc !== 'function') {
// closest thing possible to the ECMAScript 5
// internal IsCallable function
throw new TypeError('Function.prototype.bind - ' +
'what is trying to be bound is not callable');
}
return function(){
var funcArgs = args.concat(slice(arguments))
return thatFunc.apply(thatArg, funcArgs);
};
};
})();

eventloop

macrotasks: setTimeout, setInterval, setImmediate, I/O, UI rendering
microtasks: process.nextTick, Promises, Object.observe(废弃), MutationObserver

promise/a+ 规范 https://promisesaplus.com/#notes

从零实现一个 JS 模块打包器

2019 年的前端技术栈,无论你是用 Vue 还是用 React ,应该都离不开一样工具 – webpack。webpack 极大的简化了前端开发的构建过程,只需提供一个入口文件,webpack 就能自动帮我们分析出相关依赖,构建出 bundle 包。

webpack 很强大,但是大家知道 webpack 到底是怎么样打包的吗?本文将从一个很简单的例子,一步步带领大家探寻 webpack 打包的基本原理。

API设计总结

本文总结了笔者近几年在参与设计 API 时收获的一些经验和教训,针对中小型项目初期,供大家参考。