zepto源码进修（1）

2024年5月21日 158次阅读 来源: hello雨荷

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雨荷
    原文地址: https://segmentfault.com/a/1190000006232642
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞