189 8069 5689

Underscore整体架构浅析

前言

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

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

常规调用

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

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

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

最简单的实现方式，我们可以把 _ 看做一个简单的对象：

 
 
    
  
  
  1. var _ = {}; 
    2. 
  
  
  2. _.each = function() { 
    3. 
  
  
  3.   // ... 
    4. 
  
  
  4. };  
    5.

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

 
 
    
  
  
  1. var _ = function(obj) { 
    2. 
  
  
  2.   if (obj instanceof _) return obj; 
    3. 
  
  
  3.   if (!(this instanceof _)) return new _(obj); 
    4. 
  
  
  4.   this._wrapped = obj; 
    5. 
  
  
  5. };  
    6.

为什么会是方法?我们接下去看。

OOP

Underscore 支持 OOP 形式的调用：

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

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

方法挂载

现在我们已经明确以下两点：

  1. _ 是一个函数(支持无 new 调用的构造函数)
  2. _ 的属性有很多方法，比如 _.each，_.template 等等

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

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

 
 
    
  
  
  1. // Add your own custom functions to the Underscore object. 
    2. 
  
  
  2. // 可向 underscore 函数库扩展自己的方法 
    3. 
  
  
  3. // obj 参数必须是一个对象（JavaScript 中一切皆对象） 
    4. 
  
  
  4. // 且自己的方法定义在 obj 的属性上 
    5. 
  
  
  5. // 如 obj.myFunc = function() {...} 
    6. 
  
  
  6. // 形如 {myFunc: function(){}} 
    7. 
  
  
  7. // 之后便可使用如下: _.myFunc(..) 或者 OOP _(..).myFunc(..) 
    8. 
  
  
  8. _.mixin = function(obj) { 
    9. 
  
  
  9.   // 遍历 obj 的 key，将方法挂载到 Underscore 上 
    10. 
  
  
  10.   // 其实是将方法浅拷贝到 _.prototype 上 
    11. 
  
  
  11.   _.each(_.functions(obj), function(name) { 
    12. 
  
  
  12.     // 直接把方法挂载到 _[name] 上 
    13. 
  
  
  13.     // 调用类似 _.myFunc([1, 2, 3], ..) 
    14. 
  
  
  14.     var func = _[name] = obj[name]; 
    15. 
  
  
  15.  
    16. 
  
  
  16.     // 浅拷贝 
    17. 
  
  
  17.     // 将 name 方法挂载到 _ 对象的原型链上，使之能 OOP 调用 
    18. 
  
  
  18.     _.prototype[name] = function() { 
    19. 
  
  
  19.       // ***个参数 
    20. 
  
  
  20.       var args = [this._wrapped]; 
    21. 
  
  
  21.  
    22. 
  
  
  22.       // arguments 为 name 方法需要的其他参数 
    23. 
  
  
  23.       push.apply(args, arguments); 
    24. 
  
  
  24.       // 执行 func 方法 
    25. 
  
  
  25.       // 支持链式操作 
    26. 
  
  
  26.       return result(this, func.apply(_, args)); 
    27. 
  
  
  27.     }; 
    28. 
  
  
  28.   }); 
    29. 
  
  
  29. }; 
    30. 
  
  
  30.  
    31. 
  
  
  31. // Add all of the Underscore functions to the wrapper object. 
    32. 
  
  
  32. // 将前面定义的 underscore 方法添加给包装过的对象 
    33. 
  
  
  33. // 即添加到 _.prototype 中 
    34. 
  
  
  34. // 使 underscore 支持面向对象形式的调用 
    35. 
  
  
  35. _.mixin(_);  
    36.

_.mixin 方法可以向 Underscore 库增加自己定义的方法：

 
 
    
  
  
  1. _.mixin({ 
    2. 
  
  
  2.   capitalize: function(string) { 
    3. 
  
  
  3.     return string.charAt(0).toUpperCase() + string.substring(1).toLowerCase(); 
    4. 
  
  
  4.   } 
    5. 
  
  
  5. }); 
    6. 
  
  
  6. _("fabio").capitalize(); 
    7. 
  
  
  7. => "Fabio"  
    8.

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

 
 
    
  
  
  1. // Add all mutator Array functions to the wrapper. 
    2. 
  
  
  2. // 将 Array 原型链上有的方法都添加到 underscore 中 
    3. 
  
  
  3. _.each(['pop', 'push', 'reverse', 'shift', 'sort', 'splice', 'unshift'], function(name) { 
    4. 
  
  
  4.   var method = ArrayProto[name]; 
    5. 
  
  
  5.   _.prototype[name] = function() { 
    6. 
  
  
  6.     var obj = this._wrapped; 
    7. 
  
  
  7.     method.apply(obj, arguments); 
    8. 
  
  
  8.  
    9. 
  
  
  9.     if ((name === 'shift' || name === 'splice') && obj.length === 0) 
    10. 
  
  
  10.       delete obj[0]; 
    11. 
  
  
  11.  
    12. 
  
  
  12.     // 支持链式操作 
    13. 
  
  
  13.     return result(this, obj); 
    14. 
  
  
  14.   }; 
    15. 
  
  
  15. }); 
    16. 
  
  
  16.  
    17. 
  
  
  17. // Add all accessor Array functions to the wrapper. 
    18. 
  
  
  18. // 添加 concat、join、slice 等数组原生方法给 Underscore 
    19. 
  
  
  19. _.each(['concat', 'join', 'slice'], function(name) { 
    20. 
  
  
  20.   var method = ArrayProto[name]; 
    21. 
  
  
  21.   _.prototype[name] = function() { 
    22. 
  
  
  22.     return result(this, method.apply(this._wrapped, arguments)); 
    23. 
  
  
  23.   }; 
    24. 
  
  
  24. });  
    25.

链式调用

Underscore 也支持链式调用：

 
 
    
  
  
  1. // 非 OOP 链式调用 
    2. 
  
  
  2. _.chain([1, 2, 3]) 
    3. 
  
  
  3.   .map(function(a) {return a * 2;}) 
    4. 
  
  
  4.   .reverse() 
    5. 
  
  
  5.   .value(); // [6, 4, 2] 
    6. 
  
  
  6.  
    7. 
  
  
  7. // OOP 链式调用 
    8. 
  
  
  8. _([1, 2, 3]) 
    9. 
  
  
  9.   .chain() 
    10. 
  
  
  10.   .map(function(a){return a * 2;}) 
    11. 
  
  
  11.   .first() 
    12. 
  
  
  12.   .value(); // 2  
    13.

乍一看似乎有 OOP 和非 OOP 两种链式调用形式，其实只是一种，_.chain([1, 2, 3]) 和 _([1, 2, 3]).chain() 的结果是一样的。如何实现的?我们深入 chain 方法看下。

_.chain = function(obj) {

 
 
    
  
  
  1. _.chain = function(obj) { 
    2. 
  
  
  2.   // 无论是否 OOP 调用，都会转为 OOP 形式 
    3. 
  
  
  3.   // 并且给新的构造对象添加了一个 _chain 属性 
    4. 
  
  
  4.   var instance = _(obj); 
    5. 
  
  
  5.  
    6. 
  
  
  6.   // 标记是否使用链式操作 
    7. 
  
  
  7.   instance._chain = true; 
    8. 
  
  
  8.  
    9. 
  
  
  9.   // 返回 OOP 对象 
    10. 
  
  
  10.   // 可以看到该 instance 对象除了多了个 _chain 属性 
    11. 
  
  
  11.   // 其他的和直接 _(obj) 的结果一样 
    12. 
  
  
  12.   return instance; 
    13. 
  
  
  13. };  
    14.

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

说了这么多，似乎还没讲到正题上，它是如何「链」下去的?我们以如下代码为例：

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

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

 
 
    
  
  
  1. // 执行 func 方法 
    2. 
  
  
  2. // 支持链式操作 
    3. 
  
  
  3. return result(this, func.apply(_, args));  
    4.

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

 
 
    
  
  
  1. // Helper function to continue chaining intermediate results. 
    2. 
  
  
  2. // 一个帮助方法(Helper function) 
    3. 
  
  
  3. var result = function(instance, obj) { 
    4. 
  
  
  4. // 如果需要链式操作，则对 obj 运行 chain 方法，使得可以继续后续的链式操作 
    5. 
  
  
  5. // 如果不需要，直接返回 obj 
    6. 
  
  
  6. return instance._chain ? _(obj).chain() : obj; 
    7. 
  
  
  7. };  
    8.

如果需要链式操作(实例会有带有 _chain 属性)，则对运算结果调用 chain 函数，使之可以继续链式调用。

小结

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


新闻标题：Underscore整体架构浅析
文章出自：http://cdxtjz.cn/article/dpjgjos.html

其他资讯