Zepto源码设计结构剖析

Zepto 可以说是一个精简版的jQuery，主要针对移动端，使用方法没有太大差别，源码更易读。

基本结构

var Zepto = (function(){
    var $,
        zepto = {}

    // ...省略N行代码...

    zepto.init = function(selector, context) {
        // 函数内容
    }


    $ = function(selector, context){
        return zepto.init(selector, context)
    }

    // ...省略N行代码...

    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

所以我们在执行$(‘p’)时，实际上调用了 zepto.init(‘p’)

init函数

拆解一下init函数可得以下结构

zepto.init = function(selector, context) {
    var dom

    // ...此处省略N行...
    // 分情况对dom赋值：
    // 1. selector 为空
    // 2. selector 是字符串，其中又分好几种情况
    // 3. selector 是函数
    // 4. 其他情况，例如 selector 是数组、对象等

    return zepto.Z(dom, selector)
  }

老版Z函数

  zepto.Z = function(dom, selector) {
    dom = dom || []
    dom.__proto__ = $.fn
    dom.selector = selector || ''
    return dom
  }

以上代码中，dom是一个数组，并且把它的隐式原型赋值$.fn，而这里的$.fn其实就是一个普通的js对象，其中存放着各种工具函数。

比如我们使用$(‘p’).html() 这个函数实际上就定义在$.fn中。

新版Z函数

  function Z(dom, selector) {
    var i, len = dom ? dom.length : 0
    for (i = 0; i < len; i++) this[i] = dom[i]
    this.length = len
    this.selector = selector || ''
  }


  zepto.Z = function(dom, selector) {
    return new Z(dom, selector)
  }

  $.fn = {
    // ...很多属性...
  }

  zepto.Z.prototype = Z.prototype = $.fn

直接将构造函数的原型修改了，即 Z.prototype = $ .fn，经过这样一改，构造函数再new出来的对象的隐式原型 _ _ proto _ _自然就指向了$.fn。

新版Z函数区别于旧版的地方在于他返回的是一个对象数组即可以模拟进行数组操作的对象。

var objArray = {
    0: 'abc',
    1: 'bcd',
    2: 'cde',
    length: 3
};

console.log( objArray[1] )
console.log( objArray.length )

那为何不用数组，而用对象数组？——对象本质上更加灵活、直观

通过以下方式可以将对象数组转换成一个纯数组

var arr =  Array.prototype.slice.call(objArray);
console.log(arr);

总结

综合以上，我们总结出以下的代码结构

var Zepto = (function(){

    var $,zepto = {}

    // ...省略N行代码...

    $ = function(selector, context){
        return zepto.init(selector, context)
    }

    zepto.init = function(selector, context) {
        var dom

        // 针对参数情况，分别对dom赋值

        // 最终调用 zepto.Z 返回的数据
        return zepto.Z(dom, selector)
    }    

   function Z(dom, selector) {
      var i, len = dom ? dom.length : 0
      for (i = 0; i < len; i++) this[i] = dom[i]
      this.length = len
      this.selector = selector || ''
    }

   zepto.Z = function(dom, selector) {
     return new Z(dom, selector)
   }

    $.fn = {
        // 里面有若干个工具函数
    }


    zepto.Z.prototype = Z.prototype = $.fn


    // ...省略N行代码...

    return $
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)