阅读 56

zepto源码结构

在引入zepto文件以后,我们就可以使用zepto的方法,例如$('.selector'),这是因为下面的代码:

  window.Zepto = Zepto;
  window.$ = undefined && (window.$ = Zepto)
复制代码

window对象上,我们绑定了ZeptoZepto这是一个立即执行函数。如果$不存在,就把window上的$赋值为Zepto。 下面是Zepto的结构:

var Zepto = (function () {
  zepto = {},
  function Z(dom, selector) {}
  zepto.Z.prototype = Z.prototype = $.fn
  $.zepto = zepto
  return $
})()
复制代码

Zepto是一个立即执行函数,最后返回的是$。这句代码:

zepto.Z.prototype = Z.prototype = $.fn
复制代码

这句代码把Zprototype指向了$.fn,这样Z的实例就继承了$.fn的方法。然后前面部分从下面这段代码来理解:

zepto.Z = function (dom, selector) {
  return new Z(dom, selector)
}
复制代码

zepto.Z返回的就是Z的实例。这里就是把两个对象的prototype都指向$.fn。这样zepto就具备了Z$.fn的方法了。 代码写成了多个模块,有IE模块,有event模块,多个模块是如何组织的呢。

(function ($) {
})(Zepto)
复制代码

可以看到的是这些模块都是这种方法阻止起来的,用立即函数执行,并且传入的参数是Zepto,那么这些就可以使用Zepto的方法了。然后再看看外部的包裹:

(function (global, factory) {
  if (typeof define === 'function' && define.amd)
    define(function () {
      return factory(global);
    })
  else 
    factory(global);
})(this, function (window) {
  return Zepto;
})
复制代码

这是一个立即函数,往里边传入的参数有两个,globalfactorythis就是global,也就是window。如果define是函数,并且有amd参数,就表示amd规范,就往define函数里边传入函数,否则返回工厂函数factory(global)

评论