zepto原始碼結構

2021-09-11 09:40:46 字數 1741 閱讀 5404

在引入zepto檔案以後,我們就可以使用zepto的方法,例如$('.selector'),這是因為下面的**:

window.zepto = zepto;

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

複製**

window物件上,我們繫結了zeptozepto這是乙個立即執行函式。如果$不存在,就把window上的$賦值為zepto。 下面是zepto的結構:

var zepto = (function () ,

function

z(dom, selector) {}

zepto.z.prototype = z.prototype = $.fn

$.zepto = zepto

return $

})()

複製**

zepto是乙個立即執行函式,最後返回的是$。這句**:

zepto.z.prototype = z.prototype = $.fn

複製**

這句**把zprototype指向了$.fn,這樣z的例項就繼承了$.fn的方法。然後前面部分從下面這段**來理解:

zepto.z = function (dom, selector) 

複製**

zepto.z返回的就是z的例項。這裡就是把兩個物件的prototype都指向$.fn。這樣zepto就具備了z$.fn的方法了。 **寫成了多個模組,有ie模組,有event模組,多個模組是如何組織的呢。

(function ($) )(zepto)

複製**

可以看到的是這些模組都是這種方法阻止起來的,用立即函式執行,並且傳入的引數是zepto,那麼這些就可以使用zepto的方法了。然後再看看外部的包裹:

(function (global, factory) )

else

factory(global);

})(this, function (window) )

複製**

這是乙個立即函式,往裡邊傳入的引數有兩個,globalfactorythis就是global,也就是window。如果define是函式,並且有amd引數,就表示amd規範,就往define函式裡邊傳入函式,否則返回工廠函式factory(global)

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 我們修...

Zepto原始碼之ie模組

function catch e catch e 這段 的主要作用是改寫 getcomputedstyle 方法。主要是為了 zepto 在不同的瀏覽器下,可以進行相同的操作。通過檢視 我們可以看出主要使用的方法是利用 try catch 來進行異常處理。同時這是乙個立即執行函式,使得我們在載入框架...

zepto原始碼知識點

記錄看原始碼時候不太了解的知識點 matchesselector element.matches element.webkitmatchesselector element.mozmatchesselector element.omatchesselector element.matchessele...