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

【 js 基础 】【 源码学习 】源码设计 (持续更新)

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

 

目录结构:
第一部分: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 基础 】【 源码学习 】源码设计 (持续更新)