Zepto.js源碼學習之一

元旦假期轉眼即過，終於在最後一天想起最初那個「宏偉」的計劃，而後默默撿起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處理。

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