多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
只要还能往前走,就先走着,那些岔道回头再说。只要思路捋顺了,那些零碎的问题,都不是问题。 <br> ## `zepto.Z` 函数 上一节了解到`zepto.init`函数中,最终又将数据传递给了`zepto.Z`函数。这个函数其实非常简单,如果你看不懂,可能是忘记之前讲过的原型链的知识了。 ```js // `$.zepto.Z` swaps out the prototype of the given `dom` array // of nodes with `$.fn` and thus supplying all the Zepto functions // to the array. Note that `__proto__` is not supported on Internet // Explorer. This method can be overriden in plugins. zepto.Z = function(dom, selector) { dom = dom || [] dom.__proto__ = $.fn dom.selector = selector || '' return dom } ``` 以上代码中,`dom`是一个数组,并且把它的隐式原型赋值`$.fn`,而这里的`$.fn`其实就是一个普通的js对象(马上要说),跟我们之前讲述js原型链的时候一模一样。 ----- **PS:后来发现,最新的`zepto.Z`实现上目前不一样,到最后再给大家聊聊这事儿。不过这丝毫不影响其他代码的讲解,请放心** <br> ## `$.fn`是个什么鬼? 我们在之前的章节说过,`$`是一个函数,即 ```js $ = function(selector, context){ return zepto.init(selector, context) } ``` 而函数也像对象一样,可以随便定义属性赋值的。之前我们说过,每个函数都会有一个内置的`prototype`属性,这是内置的,我们完全可以自定义一个属性,这个完全可以的。 ```js $.fn = { a: 100 }; ``` 而zepto源码中,`$.fn`是这样赋值的,可以去源码中挨个看看其中的属性。 ![](https://box.kancloud.cn/2016-07-03_5778a76cc9f98.png) 我们之前模拟过一个zepto设计的代码,还记得吧。我们代码分析到这里,你可以发现,zepto的源码实现,跟我们之前模拟的一模一样。 *当然,之前的模拟是我故意那么做的,目的是为了将大家更容易的带入进来*