实现一个 react-router

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

bind 实现

用法

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
https://github.com/Raynos/function-bind/blob/master/implementation.js

简易实现

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

复杂实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
// Yes, it does work with `new funcA.bind(thisArg, args)`
if (!Function.prototype.bind) (function(){
var ArrayPrototypeSlice = Array.prototype.slice;
Function.prototype.bind = function(otherThis) {
if (typeof this !== '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');
}

var baseArgs= ArrayPrototypeSlice .call(arguments, 1),
baseArgsLength = baseArgs.length,
fToBind = this,
fNOP = function() {},
fBound = function() {
baseArgs.length = baseArgsLength; // reset to default base arguments
baseArgs.push.apply(baseArgs, arguments);
return fToBind.apply(
fNOP.prototype.isPrototypeOf(this) ? this : otherThis, baseArgs
);
};

if (this.prototype) {
// Function.prototype doesn't have a prototype property
fNOP.prototype = this.prototype;
}
fBound.prototype = new fNOP();

return fBound;
};
})();

参考实现

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 时收获的一些经验和教训,针对中小型项目初期,供大家参考。

记一次网站打开缓慢故障排查

问题描述

某日,学校用户短时间大量登录学习,网站出现登录不上,无法显示网站内容问题。

具体表现为,网站打开迅速,资源加载迅速,但是登录、网站详情内容等涉及 API 的地方显示极慢。