深入解析Underscore.js源码架构
Underscore.js是很有名的一个工具库,我也经常用他来处理对象,数组等,本文会深入解析Underscore源码架构,跟大家一起学习下他源码的亮点,然后模仿他写一个简单的架子来加深理解。他的源码通读下来,我觉得他的亮点主要有如下几点:
- 不需要new的构造函数
- 同时支持静态方法调用和实例方法调用
- 支持链式调用
本文的例子已经上传到GitHub,同一个repo下还有我全部的博文和例子,求个star:
https://github.com/dennis-jiang/Front-End-Knowledges/tree/master/Examples/Architecture/Underscore
外层是一个自执行函数
Underscore外层就是一个自执行函数,在自执行函数里面将_
挂载到了window上。这是很多第三方库惯用的套路。如果你还不知道怎么入手看源码,不知道入口在哪里,或者看不懂他的外层结构,请看从架构入手轻松读懂框架源码:以jQuery,Zepto,Vue和lodash-es为例,这篇文章详细讲解了怎么入手看源码。本文主要讲解Underscore源码架构里面的亮点,怎么入手就不再赘述了。
不用new的构造函数
我们在使用第三方库的时候,经常需要先拿一个他们的实例,有些库需要用new来显式的调用,比如原生的Promise,有些库不需要new也可以拿到实例对象,比如jQuery。不用new就返回一个实例原生JS肯定是不支持的,有这些特性的库都是自己封装了一层的。不同的库在封装的时候也有不同的思路,下面我们来讲讲其中两种方案。
jQuery的方案
之前我在另一篇文章从架构入手轻松读懂框架源码:以jQuery,Zepto,Vue和lodash-es为例中详细讲解了jQuery是怎么实现不用new就返回一个实例的。另外还模仿jQuery的这种方案实现了我自己的一个工具库:学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS小数计算不准问题。这里贴一段我工具库文章的代码简单回顾下这种方案:
// 首先创建一个fc的函数,我们最终要返回的其实就是一个fc的实例
// 但是我们又不想让用户new,那么麻烦
// 所以我们要在构造函数里面给他new好这个实例,直接返回
function FractionCalculator(numStr, denominator) {
// 我们new的其实是fc.fn.init
return new FractionCalculator.fn.init(numStr, denominator);
}
// fc.fn其实就是fc的原型,算是个简写,所有实例都会拥有这上面的方法
FractionCalculator.fn = FractionCalculator.prototype = {};
// 这个其实才是真正的构造函数,这个构造函数也很简单,就是将传入的参数转化为分数
// 然后将转化的分数挂载到this上,这里的this其实就是返回的实例
FractionCalculator.fn.init = function(numStr, denominator) {
this.fraction = FractionCalculator.getFraction(numStr, denominator);
};
// 前面new的是init,其实返回的是init的实例
// 为了让返回的实例能够访问到fc的方法,将init的原型指向fc的原型
FractionCalculator.fn.init.prototype = FractionCalculator.fn;
// 调用的时候就不用new了,直接调用就行
FractionCalculator();
Underscore的方案
jQuery的方案是在构造函数里面new了另外一个对象,然后将这个对象的原型指向jQuery的原型,以便返回的实例能够访问jQuery的实例方法。目的是能够达到的,但是方案显得比较冗长,Underscore的方案就简洁多了:
function _(){
if(!(this instanceof _)) {
return new _();
}
}
// 调用的时候直接_()就可以拿到实例对象
const instance = _();
console.log(instance);
上面代码的输出是:
可以看到constructor指向的是_()
,说明这真的是一个_的实例,我们来分析下代码执行流程:
- 调用
_()
,里面的this指向外层的作用域,我们这里是window,因为window不是_的实例,会走到if里面去。关于this指向,如果你还不是很明白,请看这篇文章。- if里面会调用
new _()
,这会拿到一个实例对象,并将这个对象return
出去。new _()
也会调到_()
方法,但是因为使用new调用,里面的this指向的就是new出来的实例,所以if进不去,执行结束。
Underscore巧妙应用了this的指向,通过检测this的指向来判断你是new调用的还是普通调用的,如果是普通调用就帮你new一下再返回。
同时支持静态方法和实例方法
用过Underscore的朋友应该有注意到,对于同一个方法来说,Underscore既支持作为静态方法调用,也支持作为实例方法调用,下面是官方的例子:
_.map([1, 2, 3], function(n){ return n * 2; }); // map作为静态方法调用
_([1, 2, 3]).map(function(n){ return n * 2; }); // map作为实例方法调用
当我们把方法作为静态方法调用的时候,需要处理的数据就是第一个参数;当把他作为实例方法调用的时候,待处理数据是作为参数传给构造函数的。下面我们来讲讲这是怎么实现的。
其实最简单的方法就是写两个函数,一个是静态方法,一个是实例方法。但是如果我们这样做了,这两个函数内部处理的逻辑其实是高度相似的,可能只是参数稍微有点不同而已。这肯定不是一个优雅的程序员应该做的。Underscore给出的方法就是所有方法先写成静态方法,然后用一个统一的函数来将所有的静态方法挂载到原型上,让他成为一个实例方法。我们试着一步一步的来实现下。
先写一个静态方法
我们先来写一个简单的map方法,将它挂载到_上成为静态方法:
_.map = function(array, callback) {
var result = [];
var length = array.length;
for(var i = 0; i< length; i++) {
var res = callback(array[i]);
result[i] = res;
}
return result;
}
这个方法写完其实就可以直接用了,用上面那个例子调用如下:
映射成实例方法
在Underscore里面是用一个mixin
方法来将静态方法映射到原型上的,mixin
方法接收一个对象作为参数,然后将这个对象上的方法全部复制到原型上。具体流程如下:
- 取出参数里面的函数属性,将其塞入一个数组
- 遍历这个数组,将里面的每个项设置到原型上
- 设置原型的时候注意处理下实例方法和静态方法的参数
下面来看看代码:
_.mixin = function(obj) {
// 遍历obj里面的函数属性
_.each(_.functions(obj), function(item){
// 取出每个函数
var func = obj[item];
// 在原型上设置一个同名函数
_.prototype[item] = function() {
// 注意这里,实例方法待处理数据是构造函数接收的参数,改造构造函数的代码在后面
// 这里将数据取出来作为静态方法的第一个参数
var value = this._wrapped;
var args = [value];
// 将数据和其他参数放到一个数组里面,作为静态方法的参数
Array.prototype.push.apply(args, arguments);
// 用处理好的参数来调用静态方法
var res = func.apply(this, args);
// 将结果返回
return res;
}
});
}
// 上面的mixin写好后不要忘了调用一下,将_自己作为参数传进去
_.mixin(_);
// 构造函数需要接收处理的数据
// 并将它挂载到this上,这里的this是实例对象
function _(value){
if(!(this instanceof _)) {
return new _(value);
}
this._wrapped = value;
}
上面的_.mixin(_);
调用之后就会将_
上的静态方法全部映射到原型上,这样_()
返回的实例也有了所有的静态方法,这就让_
支持了两种调用方式。可能有朋友注意到,我们上面的代码还有each
和functions
两个辅助方法,我们也来实现下这两个方法:
// functions就是取出对象上所有函数的名字,塞到一个数组里面返回
_.functions = function(obj){
var result = [];
for(var key in obj) {
if(typeof obj[key] === 'function'){
result.push(key);
}
}
return result;
}
// each就是对一个数组进行遍历,每个都执行下callback
_.each = function(array, callback){
var length = array.length;
for(var i = 0; i < length; i++) {
callback(array[i]);
}
}
mixin顺便支持插件
Underscore的mixin
不仅让他支持了静态和实例方法两种调用方式,同时因为他自己也是_
的一个静态方法,我们也是可以拿来用的。官方支持自定义插件就是用的这个方法,下面是官方例子:
_.mixin({
capitalize: function(string) {
return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
}
});
_("fabio").capitalize(); // Fabio
其实我们前面写的那个mixin
方法已经支持将自定义方法作为实例方法了,但是还差一点,还差静态方法,所以我们再加一行代码,同时将接收到的参数赋值给_
就行了:
_.mixin = function(obj) {
_.each(_.functions(obj), function(item){
var func = obj[item];
// 注意这里,我们同时将这个方法赋值给_作为静态方法,这下就完全支持自定义插件了
_[item] = func;
_.prototype[item] = function() {
var value = this.value;
var args = [value];
Array.prototype.push.apply(args, arguments);
var res = func.apply(this, args);
return res;
}
});
}
支持链式调用
链式调用也很常见,比如jQuery的点点点,我在另一篇文章学以致用:手把手教你撸一个工具库并打包发布,顺便解决JS小数计算不准问题详细讲解过这种实例方法的链式调用怎么实现,关键是每个实例方法计算完成后都返回当前实例,对于实例方法来说,当前实例就是this。这种方式也适用于Underscore,但是Underscore因为自身需求和API结构的原因,他的链式调用需要支持更多场景:
- Underscore的实例方法还支持直接调用返回结果,不能简单的返回实例
- Underscore的静态方法也要支持链式调用
实例方法支持链式调用
我们一步一步来,先来解决实例方法支持链式调用的问题,我们前面已经实现了将静态方法映射成实例方法,前面实现的实例方法的返回值就是静态方法的返回值。为了实现链式调用,我们还需要实例方法计算完后还能够返回当前实例(也就是this),所以我们需要一个依据来判断应该返回计算结果还是当前实例。这个依据在Underscore里面是要用户给的,也就是显式调用chain
方法。依据我们的分析,chain
应该很简单,给一个依据来判断实例方法应该返回啥,也就是给当前实例设置一个标志位:
_.chain = function() {
this._chain = true;
return this;
}
chain
就是这么简单,两行代码,然后我们的实例方法里面根据_chain来判断返回计算结果还是当前实例:
_.mixin = function(obj) {
_.each(_.functions(obj), function(item){
var func = obj[item];
_[item] = func;
_.prototype[item] = function() {
var value = this._wrapped;
var args = [value];
Array.prototype.push.apply(args, arguments);
var res = func.apply(this, args);
// 检查链式调用标记,如果是链式调用
// 将数据挂载到实例上,返回实例
var isChain = this._chain;
if(isChain) {
// 注意如果方法是chain本身,不要更新_wrapped,不然_wrapped会被改为chain的返回值,也就是一个实例
// 这里有点丑,后面优化
if(item !== 'chain') {
this._wrapped = res;
}
return this;
}
return res;
}
});
}
我们再来写个unique
方法来验证下链式调用:
_.unique = function(array){
var result = [];
var length = array.length;
for(var i = 0; i < length; i++) {
if(result.indexOf(array[i]) === -1){
result.push(array[i]);
}
}
return result;
}
试下链式调用:
我们发现结果是对的,但是输出的是一个实例,不是我们想要的,所以我们还要一个方法来输出真正的计算结果,这个方法只能挂在原型上,不能写成静态方法,不然还会走到我们的mixin,会返回实例:
_.prototype.value = function() {
return this._wrapped;
}
再来试一下呢:
静态方法支持链式调用
静态方法也要支持链式调用,我们必须要让他的返回值也能够访问到实例方法才行。一般情况下静态方法的返回值是不能返回实例的,但是我们现在已经有了chain
方法,我们直接让这个方法构造一个_
实例返回就行了,上面的实例方法支持链式调用是利用了现成的实例,返回的this,但是如果chain
返回一个新实例,也是兼容上面的,于是chain
改为:
_.chain = function(obj) {
var instance = _(obj);
instance._chain = true;
return instance;
}
这样我们的静态方法chain
也可以链式调用了,数据跟其他静态方法一样作为参数传给chain
:
优化代码
到这里我们的功能基本实现了,但是mixin
函数还有需要优化的地方:
-
var res = func.apply(this, args);
这里的this指向的是当前实例,但是一个方法作为静态方法调用时,比如_.map()
,方法里面的this指向的是_
,所以这里应该改成_
。之前这里传this是因为chain
里面操作的是this,现在已经改成新建实例,就不用传this,所以改为正确的_
。 -
对
item
进行了特异性判断,前面之所以这么做,也是因为chain
里面操作的是this,所以在apply里面其实已经设置了this._chain
为true,所以会走到if里面去,现在新建实例了,走到apply的时候,设置的其实是res._chain
,所以不会进到if,要调下一个实例方法的时候,this._chain
才会是true,所以这个if可以直接去掉了。_.mixin = function(obj) { _.each(_.functions(obj), function(item){ var func = obj[item]; _[item] = func; _.prototype[item] = function() { var value = this._wrapped; var args = [value]; Array.prototype.push.apply(args, arguments); var res = func.apply(_, args); var isChain = this._chain; if(isChain) { // if(item !== 'chain') { this._wrapped = res; // } return this; } return res; } }); }
-
Underscore里面还将
isChain
的判断单独提成了一个方法,我这里没这么做了,放在一起看着还直观点。
总结
本文主要讲解了Underscore源码的架构,并自己实现了一个简单的架子,部分变量名字和方法的具体实现可能不一样,但是原理是一样的。通过搭建这个简单的架子,其实我们学会了:
- 不用new构造实例对象
mixin
怎么扩展静态方法到原型上- 通过显式的调用
chain
来支持静态方法和实例方法的链式调用
文章的最后,感谢你花费宝贵的时间阅读本文,如果本文给了你一点点帮助或者启发,请不要吝啬你的赞和GitHub小星星,你的支持是作者持续创作的动力。
欢迎关注我的公众号进击的大前端第一时间获取高质量原创~
“前端进阶知识”系列文章:https://juejin.im/post/5e3ffc85518825494e2772fd
“前端进阶知识”系列文章源码GitHub地址: https://github.com/dennis-jiang/Front-End-Knowledges