Zepto.js源碼學(xué)習(xí)之二

kel 發(fā)布于2019-08-20 13:31 / 3538人閱讀

摘要：本次主要分享關(guān)于上一篇區(qū)域的學(xué)習(xí)。區(qū)域?yàn)榈暮诵牟糠郑慕Y(jié)構(gòu)如下為了便于梳理思路，以上代碼省略了細(xì)節(jié)，只保留了輪廓脈絡(luò)。最終暴露給開(kāi)發(fā)者的如下圖所示這里只分析了區(qū)域的結(jié)構(gòu)，下一次會(huì)深入到函數(shù)語(yǔ)句粒度。

本次主要分享關(guān)于上一篇區(qū)域2的學(xué)習(xí)。
區(qū)域2為Zepto的核心部分，它的結(jié)構(gòu)如下

var Zepto = (function() {
   var $, zepto = {};
   function Z(dom, selector) {}
   zepto.Z = function(dom, selector) {
      return new Z(dom, selector)
   }
   zepto.isZ = function(object) {
      return object instanceof zepto.Z
   }
   zepto.init = function(selector, context) {
      blablabla...
      return zepto.Z(dom, selector);
   }
   $ = function(selector, context) {
      return zepto.init(selector, context)
   }
   zepto.qsa = function(element, selector) {
      blablabla...
   });
   $.fn = {
      blablabla...
   };
   zepto.Z.prototype = Z.prototype = $.fn;
   $.zepto = zepto;
});

為了便于梳理思路，以上代碼省略了細(xì)節(jié)，只保留了輪廓脈絡(luò)。
這段代碼首先定義了兩個(gè)變量$和zepto，一個(gè)類Z；然后給空對(duì)象zepto定義屬性和方法，其中zepto.Z得到類Z的一個(gè)實(shí)例，至于zepto.init，從默認(rèn)執(zhí)行return zepto.Z(dom, selector)可以得知，它也是獲得類Z的實(shí)例，只是有可能因?yàn)閰?shù)不同作不同處理，在深入細(xì)節(jié)之前姑且這么理解；$是一個(gè)函數(shù)，返回值為zepto.init()，亦即類Z的實(shí)例；zepto.Z.prototype = Z.prototype = $.fn是為創(chuàng)建的類Z的實(shí)例設(shè)置原型屬性，同時(shí)為類Z設(shè)置原型屬性；$.zepto = zepto則是將以上各種處理得到的對(duì)象zepto懸掛到$上作為屬性zepto。
最終暴露給開(kāi)發(fā)者的$.zepto如下圖所示：

這里只分析了區(qū)域2的結(jié)構(gòu)，下一次會(huì)深入到函數(shù)語(yǔ)句粒度。