Zepto.js源碼學習之一

hlcc 發布于2019-08-21 11:28 / 1222人閱讀

摘要：元旦假期轉眼即過，終于在最后一天想起最初那個宏偉的計劃，然后默默撿起源碼的第一行。在具體深入之前，我希望能對庫結構有一個整體的了解。最外層為一個匿名的立即執行函數，因為只需要執行一次。

元旦假期轉眼即過，終于在最后一天想起最初那個“宏偉”的計劃，然后默默撿起Zepto源碼的第一行。在具體深入之前，我希望能對Zepto庫結構有一個整體的了解。看的時間比較短，以下如果有不正確的地方，歡迎指出。

最外層

(function(global, factory) {
  if (typeof define === "function" && define.amd)
    define(function() {
      return factory(global);
    })
  else
    factory(global)
}(this, function(window) {
   blablabla......                               區域1
}))

區域1為略去的細節，后面會介紹，此處只集中注意力于最外層。
最外層為一個匿名的立即執行函數，因為只需要執行一次。該函數接受兩個參數，第一個參數表示zepto將掛載的這個對象，第二個參數為一個函數，主要的內容都由該函數完成（這里暫且稱之為‘主要函數’，即區域1），至于‘主要函數’具體做了哪些工作，下面介紹。

主要函數

‘主要函數’的縮略代碼如下

function (window) {
   var Zepto = (function() {
      blablablabla......                         區域2
   })();
   window.Zepto = Zepto;                         區域3
   window.$ === undefined && (window.$ = Zepto); 區域4
   (function($) {
      blablablabla......                         區域5
   })(Zepto);
   (function($) {
      blablablabla......                         區域6
   })(Zepto);
   (function($) {
      blablablabla......                         區域7
   })();
   return Zepto;                                 
}

該函數分為6個部分，分別對應上面代碼段的區域2-7，主要完成Zepto對象的定義以及Zepto對象上相關方法的定義。
區域2為定義Zepto對象；區域3將Zepto對象綁定為window對象的Zepto屬性和$屬性，$即成為Zepto的一個別名，這在使用中會牽涉到別名的沖突及處理，此處不詳細展開；區域4完成事件相關方法的定義；區域5主要定義網絡請求的相關方法；區域6主要是封裝表單數據處理的相關方法；區域7對getComputedStyle的參數進行兼容undefined處理。

下一次會更詳細的學習和分享，大概會按照上面的區域加以展開。

GPU云服務器云服務器 webrtc學習之一開篇 zepto.js 數據分析之一源碼學習

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/86753.html

Zepto這樣操作元素屬性

摘要：還有一點需要注意的是方法設置或者獲取都是在操作元素的屬性，那它和，的區別在哪呢可以查看設置設置與的設置部分比較類似，既支持直接傳入普通的字符串也支持傳入回調函數。前言使用Zepto的時候，我們經常會要去操作一些DOM的屬性，或元素本身的固有屬性或自定義屬性等。比如常見的有attr(),removeAttr(),prop(),removeProp(),data()等。接下來我們挨個整...

付倫 2019-08-21 17:59 評論0 收藏0
一步步搭建物聯網系統——無處不在的三劍客

摘要：無處不在的三劍客這時我們終于了解了我們的三劍客，他們也就這么可以結合到一起了，是這一切的基礎。無處不在的三劍客就這樣到了這里，寫得似乎很多也很少，但是還是沒有做出來一個東西，于是我們朝著這樣一個方向前進。無處不在的三劍客這時我們終于了解了我們的三劍客，他們也就這么可以結合到一起了，HTML+Javascript+CSS是這一切的基礎。而我們用到的其他語言如PHP、Python、R...

dreamans 2019-08-22 10:55 評論0 收藏0
Zepto.js源碼學習之二

摘要：本次主要分享關于上一篇區域的學習。區域為的核心部分，它的結構如下為了便于梳理思路，以上代碼省略了細節，只保留了輪廓脈絡。最終暴露給開發者的如下圖所示這里只分析了區域的結構，下一次會深入到函數語句粒度。本次主要分享關于上一篇區域2的學習。區域2為Zepto的核心部分，它的結構如下 var Zepto = (function() { var $, zepto = {}; fu...

kel 2019-08-20 13:31 評論0 收藏0
向zepto.js學習如何手動(trigger)觸發DOM事件

摘要：好啦我們已經解決了是啥的疑問了，現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。前言前端在最近幾年實在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個雙向數據綁定，不曉得啥是虛擬DOM，也許就被鄙視了。火熱的背后往往也是無盡的浮躁，學習這些先進流行的類庫或者框架可以讓我們走的更快，但是靜下心...

spacewander 2019-08-20 17:04 評論0 收藏0