zepto.js源碼解讀(一）：初窺全貌

因爲公司是電商公司的緣故，主做H5頁面，故使用了zepto.js這個庫。因此就萌生解讀一下源碼的想法。以此記錄下，方便自己歸納知識，以及督促自己。don’t talk, show me the code.

down了1.1.6的未壓縮版。打開源碼，可以看到九百多行代碼。

它定義了一個Zepto變量，它被包含在一個快速執行函數裏面。

 var Zepto = (function(){
        //...
})();
window.Zepto = Zepto
window.$ === undefined && (window.$ = Zepto)

可以看到，Zepto被掛載在了window這個全局對象上（window.Zepto = Zepto）。並且當window對象上的$未定義的時候，將Zepto賦給這個 $。那麼我們平時用的$(ele)其實就是Zepto(ele)。

展開Zepto這個變量，我們發現包裹它的這個快速執行函數給我們返回了一個值：$。那麼這個$是怎麼來的呢?抽象下源碼：

var Zepto = (function() {
    var $;
    //...
    $ = function(selector, context){
    return zepto.init(selector, context)
  }
  //...
$.zepto = zepto;
//zepto掛載到$上
return $
})()

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

$呢，其實就是function(selector, context){//…}這個函數的返回值。

總結下就是： 定義個Zepto變量 ==> 把它掛載在全局對象window上 ==> window上未定義$，就將Zepto賦給$。==> Zepto變量的執行結果是返回一個$, $又是一個函數（zepto.init()）的返回值，zepto這個對象被掛載到了這個$上。
注意這裏的Zepto和小寫的zepto不是一個概念。

那麼 zepto又是什麼?

//....
zepto = {};
//....
zepto.init = function(selector, context) {
//...
}

它一開始被定義爲一個空對象，它有一個init方法。結合上面抽象出來的代碼，我們發現，當$(‘div’)的時候，其實調用了zepto.init()這個函數的返回值。

zepto.init()又做了什麼呢？

如果接着往下說，篇幅可能有點大，放在下篇去講。