zepto版本为1.0。
这一章来看看入口是怎么实现的。

我们一般是这样用的:$("#test"),在196行,zepto定义了函数$:

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

这里的init方法做了些什么呢?在160行,可以看到,这里是根据不同参数返回不同的对象:

  • 什么都没有传入,返回一个空的zepto对象

  • 如果是一个函数,那么执行dom ready

  • 如果已经是一个zepto对象,直接返回

  • 如果是window,document,实际上也是直接返回

  • 如果是一个html片段,那么生成节点

  • 如果上述情况都不是,那么就用选择器document.querySelectorAll获取dom对象

然后将得到的对象传入zepto.Z,来到143-148行:

zepto.Z = function(dom, selector) {
    dom = dom || []
    dom.__proto__ = arguments.callee.prototype
    dom.selector = selector || ''
    return dom
  }

这里是入口最关键的步骤之一。实际上,zepto内部维护的的对象是一个类数组对象(这里的dom)。然后用zepto.Z的原型覆盖了此类数组的的原型。那么zepto.Z的原型又是什么呢?我们跳到第608行:

zepto.Z.prototype = $.fn

那么$.fn是什么呢?再看278-550行:

$.fn = {
   //各种方法
}

因此,zepto.Z返回的类数组对象就有了$.fn的各种方法了。粗略的流程可以归纳为:

  • 调用$函数

  • 根据传入的参数生成对象。

  • 重置对象的原型,使之拥有一系列方法


hello雨荷
243 声望5 粉丝

« 上一篇
关于BFC