Underscore 总体架构浅析

前言

终于，楼主的「Underscore 源码解读系列」underscore-analysis 即将进入尾声，关注下 timeline 会发现楼主最近加快了解读速度。十一月，多事之秋，最近好多事情搞的楼主心力憔悴，身心俱疲，也想尽快把这个系列完结掉，也好了却一件心事。

本文预计是解读系列的倒数第二篇，最后一篇那么显然就是大总结了。楼主的 Underscore 系列解读完整版地址 https://github.com/hanzichi/u...

常规调用

以前写的文章，关注点大多在具体的方法，具体的知识细节，也有读者留言建议楼主讲讲总体架构，这是必须会讲的，只是楼主把它安排在了最后，也就是本文，由于楼主以为不掌握总体架构对于具体方法的理解也是没有大的问题的。

Underscore 大多数时候的调用形式为 _.funcName(xx, xx)，这也是 文档中 的调用方式。

_.each([1, 2, 3], alert);

最简单的实现方式，咱们能够把 _ 看作一个简单的对象：

var _ = {};
_.each = function() {
  // ...
};

在 JavaScript 中，一切皆对象，实际上，源码中的 _ 变量是一个方法：

var _ = function(obj) {
  if (obj instanceof _) return obj;
  if (!(this instanceof _)) return new _(obj);
  this._wrapped = obj;
};

为何会是方法？咱们接下去看。

OOP

Underscore 支持 OOP 形式的调用：

_([1, 2, 3]).each(alert);

这实际上是很是经典的「无 new 构造」，_ 其实就是一个 构造函数，_([1, 2, 3]) 的结果就是一个对象实例，该实例有个 _wrapped 属性，属性值是 [1, 2, 3]。实例要调用 each 方法，其自己没有这个方法，那么应该来自原型链，也就是说 _.prototype 上应该有这个方法，那么，方法是如何挂载上去的呢？

方法挂载

如今咱们已经明确如下两点：

1. _ 是一个函数（支持无 new 调用的构造函数）

2. _ 的属性有不少方法，好比 _.each，_.template 等等

咱们的目标是让 _ 的构造实例也能调用这些方法。仔细想一想，其实也不难，咱们能够遍历 _ 上的属性，若是属性值类型是函数，那么就将函数挂到 _ 的原型链上去。

源码中用来完成这件事的是 _.mixin 方法：

// Add your own custom functions to the Underscore object.
// 可向 underscore 函数库扩展本身的方法
// obj 参数必须是一个对象（JavaScript 中一切皆对象）
// 且本身的方法定义在 obj 的属性上
// 如 obj.myFunc = function() {...}
// 形如 {myFunc: function(){}}
// 以后即可使用以下: _.myFunc(..) 或者 OOP _(..).myFunc(..)
_.mixin = function(obj) {
  // 遍历 obj 的 key，将方法挂载到 Underscore 上
  // 实际上是将方法浅拷贝到 _.prototype 上
  _.each(_.functions(obj), function(name) {
    // 直接把方法挂载到 _[name] 上
    // 调用相似 _.myFunc([1, 2, 3], ..)
    var func = _[name] = obj[name];

    // 浅拷贝
    // 将 name 方法挂载到 _ 对象的原型链上，使之能 OOP 调用
    _.prototype[name] = function() {
      // 第一个参数
      var args = [this._wrapped];

      // arguments 为 name 方法须要的其余参数
      push.apply(args, arguments);
      // 执行 func 方法
      // 支持链式操做
      return result(this, func.apply(_, args));
    };
  });
};

// Add all of the Underscore functions to the wrapper object.
// 将前面定义的 underscore 方法添加给包装过的对象
// 即添加到 _.prototype 中
// 使 underscore 支持面向对象形式的调用
_.mixin(_);

_.mixin 方法能够向 Underscore 库增长本身定义的方法：

_.mixin({
  capitalize: function(string) {
    return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase();
  }
});
_("fabio").capitalize();
=> "Fabio"

同时，Underscore 也加入了一些 Array 原生的方法：

// Add all mutator Array functions to the wrapper.
// 将 Array 原型链上有的方法都添加到 underscore 中
_.each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) {
  var method = ArrayProto[name];
  _.prototype[name] = function() {
    var obj = this._wrapped;
    method.apply(obj, arguments);

    if ((name === 'shift' || name === 'splice') && obj.length === 0)
      delete obj[0];

    // 支持链式操做
    return result(this, obj);
  };
});

// Add all accessor Array functions to the wrapper.
// 添加 concat、join、slice 等数组原生方法给 Underscore
_.each(['concat', 'join', 'slice'], function(name) {
  var method = ArrayProto[name];
  _.prototype[name] = function() {
    return result(this, method.apply(this._wrapped, arguments));
  };
});

链式调用

Underscore 也支持链式调用：

// 非 OOP 链式调用
_.chain([1, 2, 3])
  .map(function(a) {return a * 2;})
  .reverse()
  .value(); // [6, 4, 2]

// OOP 链式调用
_([1, 2, 3])
  .chain()
  .map(function(a){return a * 2;})
  .first()
  .value(); // 2

乍一看彷佛有 OOP 和非 OOP 两种链式调用形式，其实只是一种，_.chain([1, 2, 3]) 和 _([1, 2, 3]).chain() 的结果是同样的。如何实现的？咱们深刻 chain 方法看下。

_.chain = function(obj) {
  // 不管是否 OOP 调用，都会转为 OOP 形式
  // 而且给新的构造对象添加了一个 _chain 属性
  var instance = _(obj);

  // 标记是否使用链式操做
  instance._chain = true;

  // 返回 OOP 对象
  // 能够看到该 instance 对象除了多了个 _chain 属性
  // 其余的和直接 _(obj) 的结果同样
  return instance;
};

咱们看下 _.chain([1, 2, 3]) 的结果，将参数代入函数中，其实就是对参数进行无 new 构造，而后返回实例，只是实例多了个 _chain 属性，其余的和直接 _([1, 2, 3]) 如出一辙。再来看 _([1, 2, 3]).chain()，_([1, 2, 3]) 返回构造实例，该实例有 chain 方法，调用方法，为实例添加 _chain 属性，返回该实例对象。因此，这二者效果是一致的，结果都是转为了 OOP 的形式。

说了这么多，彷佛还没讲到正题上，它是如何「链」下去的？咱们以以下代码为例：

_([1, 2, 3])
  .chain()
  .map(function(a){return a * 2;})
  .first()
  .value(); // 2

当调用 map 方法的时候，实际上可能会有返回值。咱们看下 _.mixin 源码：

// 执行 func 方法
// 支持链式操做
return result(this, func.apply(_, args));

result 是一个重要的内部帮助函数（Helper function ）：

// Helper function to continue chaining intermediate results.
// 一个帮助方法（Helper function）
var result = function(instance, obj) {
  // 若是须要链式操做，则对 obj 运行 chain 方法，使得能够继续后续的链式操做
  // 若是不须要，直接返回 obj
  return instance._chain ? _(obj).chain() : obj;
};

若是须要链式操做（实例会有带有 _chain 属性），则对运算结果调用 chain 函数，使之能够继续链式调用。

小结

Underscore 总体架构，或者说是基础实现大概就是这个样子，代码部分就讲到这了，接下去系列解读最后一篇，讲讲这段时间（几乎也是历时半年了）的一些心得体会吧，没钱的就捧我的场吧！