【 js 基础】【源码学习】源码设计（持续更新）

首页 > 代码库 > 【 js 基础】【源码学习】源码设计（持续更新）

【 js 基础】【源码学习】源码设计（持续更新）

2024-09-30 17:07:02 219人阅读

学习源码，除了学习对一些方法的更加聪明的代码实现，同时也要学习源码的设计，把握整体的架构。（推荐对源码有一定熟悉了之后，再看这篇文章）

目录结构：
第一部分：zepto 设计分析
第二部分：underscore 设计分析

第一部分： zepto 设计分析
zepto 是一个轻量级的 Javascript 库。相对于 jquery 来说在 size 上更加小，主要是定位于移动设备。它是非常好的学习源码的入门级 javascript 库。这里重点说一下，这个库的设计，而对于详细的源码学习大家可以 star 我的 github 源码学习项目（https://github.com/JiayiLi/source-code-study）进行关注。

让我们先看看把所有代码删除只剩下这几行的 zepto ：

1 var Zepto = (function() {
2     return $
3 })() 
4 window.Zepto = Zepto 
5 window.$ === undefined && (window.$ = Zepto)

一个匿名自执行函数返回 $ 传递给了 Zepto。然后把 Zepto 挂到 window 上，使其成为全局 window 的一个属性，同时，如果 window.$ 符号没有被占用，那么 $ 会被赋值为 Zepto，故可以全局范围内使用 $。

然后咱们再来看看赋值给 zepto 的匿名自执行函数的核心代码具体干了什么：

 1 var Zepto = (function() {
 2     //zepto和$是Zepto中的两个命名空间，用来挂载静态函数
 3     var $，zepto = {};
 4 
 5     function Z(dom, selector) {
 6         var i, len = dom ? dom.length: 0
 7         for (i = 0; i < len; i++) this[i] = dom[i] this.length = len this.selector = selector || ‘‘
 8     }
 9 
10     zepto.Z = function(dom, selector) {
11         return new Z(dom, selector)
12     }
13     zepto.init = function(selector, context) {....
14         return zepto.Z(dom, selector)
15     }
16 
17     //$()的返回值能够调用$.fn中的方法
18     $ = function(selector, context) {
19         return zepto.init(selector, context);
20     }
21 
22     $.fn = {
23         // 里面有若干个工具函数
24     };
25 
26     zepto.Z.prototype = $.fn;
27     $.zepto = zepto
28 
29     return $ //返回$,赋值给Zepto
30 })()
31 
32 window.Zepto = Zepto
33 //当$未被占用时就把Zepto赋值给$
34 window.$ === undefined && (window.$ = Zepto)

首先定义了两个变量 zepto 和 $ ，还有一个构造函数 Z 。
对于变量 zepto ，给其定义了两个方法 Z 和 init。init 方法中调用了 zepto 的 Z 方法，而在 zepto 的 Z 方法中则实例化了构造函数 Z。
对于变量 $ ，则是个函数，内部调用了 zepto 的 init 方法，也就是最后返回了构造函数 Z 的新实例。同时也给 $ 上定义了一个属性 fn，fn 是一个对象，这个对象里面实现了多个工具函数，比如 concat、slice、each、filter 等。

然后将刚才定义的变量 zepto 中的 Z 方法的原型即构造函数的原型指向了 $.fn ，这样调用 $ 函数所返回的 Z 实例，就继承了 $.fn 中的方法。

最后通过 $.zepto = zepto 将内部 API 导出。如果有需要可以调用 zepto 上的内部方法。

Z 实例实际上一个对象数组，即可以模拟数组操作的对象。

咱们再用个图来梳理一下思路：

技术分享

学习并感谢：

https://www.kancloud.cn/wangfupeng/zepto-design-srouce/173681

https://segmentfault.com/a/1190000007515865#articleHeader4

第二部分 underscore 设计分析
underscore 是一个Javascript 实用库。是函数式编程的典型代表。它是非常好的学习源码的入门级 javascript 库，尤其是学习函数式编程的好材料。这里重点说一下，这个库的设计，而对于详细的源码学习大家可以 star 我的 github 源码学习项目（https://github.com/JiayiLi/source-code-study）进行查看。

underscore 的所有代码都包裹在匿名自执行函数中，

1 (function() {
2       ...
3 }.call(this))   //  通过传入this（浏览器环境中其实就是window对象）来改变函数的作用域

大多数的源码设计都是使用的匿名自执行函数，这样做的好处：
1、避免全局污染：库中所定义的变量，方法都封装到了该函数的作用域中。
2、隐私保护：使用方只能获得库想暴露在外面的变量方法，而不能访问不想暴露的内部变量方法。

再说设计之前，这里还要说一个知识点：
underscore 采用的是典型的函数式编程风格，这与面向对象的编程风格并不相同。
函数式编程（fp）风格，设计的函数方法并不会属于任何一个对象，对象只是这些函数方法的参数。
而面向对象的编程（oop）风格则是设计的函数方法都隶属于一个对象。作为对象的一个属性。
如果你还没有明白，这里看一下调用方式的不同：
函数式编程风格：

1 var arr = [1, 2, 3];
2 _.map(arr,function(item) {
3      return item * 2;
4 });

arr 这个对象只是 map 方法的一个参数，map 并不属于 arr。

面向对象风格：

1 var arr = [1, 2, 3];
2 arr.map(function(item) {
3      return item * 2;
4 });

map是对象arr的一个方法。

看出区别了吗？

回到匿名自执行函数内部，核心代码如下：

  1 (function() {
  2      var root = this;
  3 
  4      // 核心函数
  5      // `_` 其实是一个构造函数
  6      var _ = function(obj) {
  7           // 以下均针对 OOP 形式的调用
  8           // 如果是非 OOP 形式的调用，不会进入该函数内部
  9           // 如果 obj 已经是 `_` 函数的实例，则直接返回 obj
 10           if (obj instanceof _) return obj;
 11 
 12           // 如果不是 `_` 函数的实例
 13           // 则调用 new 运算符，返回实例化的对象
 14           if (! (this instanceof _)) return new _(obj);
 15 
 16           // 将 obj 赋值给 this._wrapped 属性
 17           this._wrapped = obj;
 18      };
 19 
 20      // 将上面定义的 `_` 局部变量赋值给全局对象中的 `_` 属性
 21      // 即客户端中 window._ = _
 22      // 服务端(node)中 exports._ = _
 23      // 同时在服务端向后兼容老的 require() API
 24      // 这样暴露给全局后便可以在全局环境中使用 `_` 变量(方法)
 25      if (typeof exports !== ‘undefined‘) {
 26           if (typeof module !== ‘undefined‘ && module.exports) {
 27                exports = module.exports = _;
 28           }
 29           exports._ = _;
 30      } else {
 31           root._ = _;
 32      }
 33 
 34      // .....  定义工具函数  如 _.each, _.map 等
 35 
 36 
 37      _.mixin = function(obj) {
 38           // 遍历 obj 的 key，将方法挂载到 Underscore 上
 39           // 其实是将方法浅拷贝到 _.prototype 上
 40           _.each(_.functions(obj),
 41           function(name) {
 42                // 直接把方法挂载到 _[name] 上
 43                // 调用类似 _.myFunc([1, 2, 3], ..)
 44                var func = _[name] = obj[name];
 45 
 46                // 浅拷贝
 47                // 将 name 方法挂载到 _ 对象的原型链上，使之能 OOP 调用
 48                _.prototype[name] = function() {
 49                     // 第一个参数
 50                     var args = [this._wrapped];
 51 
 52                     // arguments 为 name 方法需要的其他参数
 53                     push.apply(args, arguments);
 54                     // 执行 func 方法
 55                     // 支持链式操作
 56                     return result(this, func.apply(_, args));
 57                };
 58           });
 59      };
 60 
 61      // Add all of the Underscore functions to the wrapper object.
 62      // 将前面定义的 underscore 方法添加给包装过的对象
 63      // 即添加到 _.prototype 中
 64      // 使 underscore 支持面向对象形式的调用
 65      _.mixin(_);
 66 
 67      // Add all mutator Array functions to the wrapper.
 68      // 将 Array 原型链上有的方法都添加到 underscore 中
 69      _.each([‘pop‘, ‘push‘, ‘reverse‘, ‘shift‘, ‘sort‘, ‘splice‘, ‘unshift‘],
 70      function(name) {
 71           var method = ArrayProto[name];
 72           _.prototype[name] = function() {
 73                var obj = this._wrapped;
 74                method.apply(obj, arguments);
 75 
 76                if ((name === ‘shift‘ || name === ‘splice‘) && obj.length === 0) delete obj[0];
 77 
 78                // 支持链式操作
 79                return result(this, obj);
 80           };
 81      });
 82 
 83      // Add all accessor Array functions to the wrapper.
 84      // 添加 concat、join、slice 等数组原生方法给 Underscore
 85      _.each([‘concat‘, ‘join‘, ‘slice‘],
 86      function(name) {
 87           var method = ArrayProto[name];
 88           _.prototype[name] = function() {
 89                return result(this, method.apply(this._wrapped, arguments));
 90           };
 91      });
 92      // 一个包装过(OOP)并且链式调用的对象
 93      // 用 value 方法获取结果
 94      _.prototype.value = http://www.mamicode.com/function() {
 95           return this._wrapped;
 96      };
 97 
 98      _.prototype.valueOf = _.prototype.toJSON = _.prototype.value;
 99 
100      _.prototype.toString = function() {
101           return ‘‘ + this._wrapped;
102      };
103 
104 }.call(this))

将this（浏览器环境中其实就是window对象）传入匿名自执行函数，并赋值给 root。
创建 _ 函数，将其挂到 root 即全局作用域下，故可以全局范围内使用 _ 。
然后在 _ 上定义了工具函数(函数即对象，可以在对象上添加方法)，像 _.each, _.map 等。
这样就可以全局使用函数式编程风格的方式调用 _ 上的方法了， _.each, _.map等。

但同时 underscore 也做了针对面向对象风格的调用方式的兼容。需要通过_()来包裹一下对象，调用例子：

1 var arr = [1, 2, 3];
2 _(arr).map(function(item) {
3      return item * 2;
4 });

看一下 _ 函数内部：

var _ = function(obj) {
     // 以下均针对 OOP 形式的调用
     // 如果是非 OOP 形式的调用，不会进入该函数内部
     // 如果 obj 已经是 `_` 函数的实例，则直接返回 obj
     if (obj instanceof _) return obj;

     // 如果不是 `_` 函数的实例
     // 则调用 new 运算符，返回实例化的对象
     if (! (this instanceof _)) return new _(obj);

     // 将 obj 赋值给 this._wrapped 属性
     this._wrapped = obj;
};

如果你采用的是函数式编程风格调用的话，不传 obj ，所以不会进入两个 if 判断而直接执行最后一句 this._wrapped = obj;。
如果你采用的是面向对象的编程风格调用的话，如果 obj 已经是 _ 函数的实例，则直接返回 obj，如果不是 _ 函数的实例，则调用 new 运算符，返回实例化的对象。

那么面向对象风格的调用方式，是如何拥有所有定义的方法的呢？
从代码中的 _.mixin 函数开始，就是为了兼容这一种调用。
定义了一个 _.mixin 方法，并在之后立即执行了，传入了 _ 作为参数。

_.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(_);

// 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));
    };
});
// 一个包装过(OOP)并且链式调用的对象
// 用 value 方法获取结果
_.prototype.value = http://www.mamicode.com/function() {
    return this._wrapped;
};

_.prototype.valueOf = _.prototype.toJSON = _.prototype.value;

_.prototype.toString = function() {
    return ‘‘ + this._wrapped;
};

_.mixin 函数中将遍历_的属性，如果某个属性的类型是function，就把该函数挂载到 _ 原型链上，这样对于 _ 函数的实例自然就可以调用 _ 原型链上的方法。

对于函数式编程，其实是另一种编程思想，它相较于大家所熟知的面向对象的编程风格来说，应该是各有好处。推荐大家看 underscore源码和书《Javascript函数式编程》深入了解。

学习并感谢：
http://www.jianshu.com/p/e602ce36b6f7
https://yoyoyohamapi.gitbooks.io/undersercore-analysis/content/base/%E7%BB%93%E6%9E%84.html

文章会持续更新，下一步的计划是 backbone ，一个以类 jq 和 underscore 为基础的 mvc 框架。欢迎大家 star 我的 github 阅读源码项目（https://github.com/JiayiLi/source-code-study），进行关注。

【 js 基础】【源码学习】源码设计（持续更新）

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 【 js 基础 】【 源码学习 】源码设计 （持续更新）

【 js 基础 】【 源码学习 】源码设计 （持续更新）

看完仍有疑问？有类似问题直接问程序猿

首页 > 代码库 > 【 js 基础】【源码学习】源码设计（持续更新）

【 js 基础】【源码学习】源码设计（持续更新）