zepto原始碼分析

首先我們看一下如下**，如何給乙個陣列物件新增其他方法

var arr = [1,2,3];
arr.__proto__ = ,
concat: array.prototype.concat,
push: array.prototype.push
};arr.push(4); // [1, 2, 3, 4]
arr.addclass(); // 'addclass'

我們修改了陣列arr的隱式原型__proto__，使它擁有了更多方法，更多原型繼承可以參考另一篇博文原型繼承與應用。zepto的原理也是這樣：通過$()選擇器返回的類陣列物件，將物件的隱式原型修改，使zepto物件具有多種方法可以被我們使用

zepto主要結構如下所示，先使用iife(立即執行函式)返回乙個值，然後把這個返回值放在window的zepto屬性中，也就是說zepto成為了乙個全域性變數。window.$ === false && expression，這是乙個簡潔寫法，意為第乙個表示式為false時返回第二個表示式，也就是執行expression。當$沒被定義時將$函式賦值給zepto。所以我們引用$()的時候，實際上是引用zepto。

var zepto = (function
()()
window.zepto = zepto;
window.$ === undefined && (window.$ = zepto)

顯而易見，iife的返回值是乙個物件，因為我們經過$()選擇元素之後，可以使用一系列方法，如addclass ，find等等。那麼這個物件是什麼，請看以下**

var zepto = (function
() return $;
}()

當我們使用$('#aa')的時候，其實執行的是zepto('#aa')，也就是iife的返回值$(selector, context)，也就是zepto.init(selector, context)

zepto.init = function
(selector, context)

主邏輯轉移到了zepto.z函式中

上個版本的z函式是這樣實現的：

zepto.z = function
(dom, selector)

最新版本的z函式如下：

function
z(dom, selector)
zepto.z = function
(dom, selector)
zepto.z.prototype = z.prototype = $.fn

這種方法直接改變了建構函式z的原型，導致new出來的物件的__proto__指向$.fn，和上面的方法效果相同，唯一不同的是，最新的z函式返回的是像

前者的物件稱為類陣列物件，而原來是陣列

[dom[0], dom[1], dom[2]]

zepto原始碼分析

Zepto原始碼分析 deferred模組

zepto原始碼結構

Zepto原始碼之ie模組

zepto原始碼分析

Zepto原始碼分析 deferred模組

zepto原始碼結構

Zepto原始碼之ie模組

相關推薦