成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

讀Zepto源碼之代碼結(jié)構(gòu)

warkiz / 688人閱讀

摘要：源碼結(jié)構(gòu)整體結(jié)構(gòu)如果在編輯器中將的源碼折疊起來，看到的就跟上面的代碼一樣。參考源碼分析代碼結(jié)構(gòu)對象思想與源碼分析設(shè)計(jì)和源碼分析源碼中關(guān)于的問題最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注歡迎提意見

雖然最近工作中沒有怎么用 zepto ，但是據(jù)說 zepto 的源碼比較簡單，而且網(wǎng)上的資料也比較多，所以我就挑了 zepto 下手，希望能為以后閱讀其他框架的源碼打下基礎(chǔ)吧。

源碼版本

本文閱讀的源碼為 zepto1.2.0

閱讀zepto之前需要了解 javascript 原型鏈和閉包的知識(shí)，推薦閱讀王福朋的這篇文章深入理解 Javascript 原型和閉包，寫得很詳細(xì)，也非常易于閱讀。

源碼結(jié)構(gòu) 整體結(jié)構(gòu) 
var Zepto = (function () {
  ...
})()

window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

如果在編輯器中將 zepto 的源碼折疊起來，看到的就跟上面的代碼一樣。

zepto 的核心是一個(gè)閉包，加載完畢后立即執(zhí)行。然后暴露給全局變量 zepto ，如果 $ 沒有定義，也將 $ 賦值為 zepto 。

核心結(jié)構(gòu)

在這部分中，我們先不關(guān)注 zepto 的具體實(shí)現(xiàn)，只看核心的結(jié)構(gòu)，因此我將zepto中的邏輯先移除，得出如下的核心結(jié)構(gòu)：

var zepto = {}, $

function Z(doms) {
  var len = doms.length 
  for (var i = 0; i < len; i++) {
    this[i] = doms[i]
  }
  this.length = doms.length
}

zepto.Z = function(doms) {
  return new Z(doms)
}

zepto.init = function(doms) {
  var doms = ["domObj1","domObj2","domObj3"]
  return zepto.Z(doms)
}

$ = function() {
  return zepto.init()
}

$.fn = {
  constructor: zepto.Z,
  method: function() {
    return this
  }
}

zepto.Z.prototype = Z.prototype = $.fn

return $

在源碼中，可以看出， $ 其實(shí)是一個(gè)函數(shù)，同時(shí)在 $ 身上又掛了很多屬性和方法（這里體現(xiàn)在 $.fn 身上，其他的會(huì)在后續(xù)的文章中談到）。

我們在使用 zepto 的時(shí)候，會(huì)用 $ 去獲取 dom ，并且在這些 dom 對象身上都有 zepto 定義的各種各樣的操作方法。

從上面的偽代碼中，可以看到，$ 其實(shí)調(diào)用了 zepto.init() 方法，在 init 方法中，會(huì)獲取到 dom 元素集合，然后將集合交由 zepto.Z() 方法處理，而 zepto.Z 方法返回的是函數(shù) Z 的一個(gè)實(shí)例。

函數(shù) Z 會(huì)將 doms 展開，變成實(shí)例的屬性，key 為對應(yīng) domObj 的索引， 并且設(shè)置實(shí)例的 length 屬性。

zepto.Z.prototype = Z.prototype = $.fn

讀到這里，你可能會(huì)有點(diǎn)疑惑，$ 最終返回的是 Z 函數(shù)的實(shí)例，但是 Z 函數(shù)明明沒有 dom 的操作方法啊，這些操作方法都定義在 $.fn 身上，為什么 $ 可以調(diào)用這些方法呢？

其實(shí)關(guān)鍵在于這句代碼 Z.prototype = $.fn ，這句代碼將 Z 的 prototype 指向 $.fn ，這樣，Z 的實(shí)例就繼承了 $.fn 的方法。

既然這樣就已經(jīng)讓 Z 的實(shí)例繼承了 $.fn 的方法，那 zepto.Z.prototype = $.fn 又是為什么呢？

如果我們再看源碼，會(huì)發(fā)現(xiàn)有這樣的一個(gè)方法：

zepto.isZ = function(object) {
  return object instanceof zepto.Z
}

這個(gè)方法是用來判讀一個(gè)對象是否為 zepto 對象，這是通過判斷這個(gè)對象是否為 zepto.Z 的實(shí)例來完成的，因此需要將 zepto.Z 和 Z 的 prototype 指向同一個(gè)對象。 isZ 方法會(huì)在 init 中用到，后面也會(huì)介紹。

參考

zepto源碼分析-代碼結(jié)構(gòu)

zepto對象思想與源碼分析

zepto設(shè)計(jì)和源碼分析

zepto源碼中關(guān)于zepto.Z.prototype = $.fn的問題

?

最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注,歡迎提意見：

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/82365.html

相關(guān)文章

  • 讀Zepto源碼之Gesture模塊

    摘要：模塊基于上的事件的封裝，利用屬性，封裝出系列事件。這個(gè)判斷需要引入設(shè)備偵測模塊。然后是監(jiān)測事件，根據(jù)這三個(gè)事件，可以組合出和事件。其中變量對象和模塊中的對象的作用差不多，可以先看看讀源碼之模塊對模塊的分析。 Gesture 模塊基于 IOS 上的 Gesture 事件的封裝，利用 scale 屬性，封裝出 pinch 系列事件。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡...

    coolpail 評(píng)論0 收藏0

  • 讀Zepto源碼之Stack模塊

    摘要：讀源碼系列文章已經(jīng)放到了上，歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法，這些方法在調(diào)用的時(shí)候，會(huì)為返回的結(jié)果添加的屬性，用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的...

    crossea 評(píng)論0 收藏0

  • 讀Zepto源碼之assets模塊

    摘要：模塊是為解決移動(dòng)版加載圖片過大過多時(shí)崩潰的問題。因?yàn)闆]有處理過這樣的場景，所以這部分的代碼解釋不會(huì)太多，為了說明這個(gè)問題，我翻譯了這篇文章作為附文怎樣處理移動(dòng)端對圖片資源的限制，更詳細(xì)地解釋了這個(gè)模塊的應(yīng)用場景。 assets 模塊是為解決 Safari 移動(dòng)版加載圖片過大過多時(shí)崩潰的問題。因?yàn)闆]有處理過這樣的場景，所以這部分的代碼解釋不會(huì)太多，為了說明這個(gè)問題，我翻譯了《How to...

    thursday 評(píng)論0 收藏0

  • 讀Zepto源碼之Form模塊

    摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā)事件，提交表單。最終返回的結(jié)果是一個(gè)數(shù)組，每個(gè)數(shù)組項(xiàng)為包含和屬性的對象。否則手動(dòng)綁定事件，如果沒有阻止瀏覽器的默認(rèn)事件，則在第一個(gè)表單上觸發(fā)，提交表單。 Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā) submit 事件，提交表單。 讀 Zepto 源碼系列文章已...

    陳江龍 評(píng)論0 收藏0

  • 讀Zepto源碼之IOS3模塊

    摘要：用法與參數(shù)要理解這段代碼，先來看一下的用法和參數(shù)用法參數(shù)回調(diào)函數(shù)，有如下參數(shù)上一個(gè)回調(diào)函數(shù)返回的值或者是初始值當(dāng)前值當(dāng)前值在數(shù)組中的索引調(diào)用的數(shù)組初始值，如果沒有提供，則為數(shù)組的第一項(xiàng)。接下來，檢測回調(diào)函數(shù)是否為，如果不是，拋出類型錯(cuò)誤。 IOS3 模塊是針對 IOS 的兼容模塊，實(shí)現(xiàn)了兩個(gè)常用方法的兼容，這兩個(gè)方法分別是 trim 和 reduce 。 讀 Zepto 源碼系列文章...

    lavnFan 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<