zepto源碼學(xué)習(xí)（1）

izhuhaodev 發(fā)布于2019-08-20 10:15 / 2104人閱讀

摘要：實際上，內(nèi)部維護(hù)的的對象是一個類數(shù)組對象這里的。粗略的流程可以歸納為調(diào)用函數(shù)根據(jù)傳入的參數(shù)生成對象。重置對象的原型，使之擁有一系列方法

zepto版本為1.0。
這一章來看看入口是怎么實現(xiàn)的。

我們一般是這樣用的：$("#test"),在196行，zepto定義了函數(shù)$:

$ = function(selector, context){
    return zepto.init(selector, context)
  }

這里的init方法做了些什么呢？在160行，可以看到，這里是根據(jù)不同參數(shù)返回不同的對象：

什么都沒有傳入，返回一個空的zepto對象

如果是一個函數(shù)，那么執(zhí)行dom ready

如果已經(jīng)是一個zepto對象，直接返回

如果是window,document，實際上也是直接返回

如果是一個html片段，那么生成節(jié)點

如果上述情況都不是，那么就用選擇器document.querySelectorAll獲取dom對象

然后將得到的對象傳入zepto.Z，來到143-148行：

zepto.Z = function(dom, selector) {
    dom = dom || []
    dom.__proto__ = arguments.callee.prototype
    dom.selector = selector || ""
    return dom
  }

這里是入口最關(guān)鍵的步驟之一。實際上，zepto內(nèi)部維護(hù)的的對象是一個類數(shù)組對象(這里的dom)。然后用zepto.Z的原型覆蓋了此類數(shù)組的的原型。那么zepto.Z的原型又是什么呢？我們跳到第608行：

zepto.Z.prototype = $.fn

那么$.fn是什么呢？再看278-550行：

$.fn = {
   //各種方法
}

因此，zepto.Z返回的類數(shù)組對象就有了$.fn的各種方法了。粗略的流程可以歸納為：

調(diào)用$函數(shù)

根據(jù)傳入的參數(shù)生成對象。

重置對象的原型，使之擁有一系列方法

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/80062.html

相關(guān)文章

Zepto.js源碼學(xué)習(xí)之一

摘要：元旦假期轉(zhuǎn)眼即過，終于在最后一天想起最初那個宏偉的計劃，然后默默撿起源碼的第一行。在具體深入之前，我希望能對庫結(jié)構(gòu)有一個整體的了解。最外層為一個匿名的立即執(zhí)行函數(shù)，因為只需要執(zhí)行一次。元旦假期轉(zhuǎn)眼即過，終于在最后一天想起最初那個宏偉的計劃，然后默默撿起Zepto源碼的第一行。在具體深入之前，我希望能對Zepto庫結(jié)構(gòu)有一個整體的了解?？吹臅r間比較短，以下如果有不正確的地方，歡迎指出。...

hlcc 2019-08-21 11:28 評論0 收藏0
zepto源碼分析-代碼結(jié)構(gòu)

摘要：本來想學(xué)習(xí)一下的源碼，但由于的源碼有多行，設(shè)計相當(dāng)復(fù)雜，所以決定從開始，分析一個成熟的框架的代碼結(jié)構(gòu)及執(zhí)行步驟。同時發(fā)表在我的博客源碼分析代碼結(jié)構(gòu) 本來想學(xué)習(xí)一下jQuery的源碼，但由于jQuery的源碼有10000多行，設(shè)計相當(dāng)復(fù)雜，所以決定從zepto開始，分析一個成熟的框架的代碼結(jié)構(gòu)及執(zhí)行步驟。網(wǎng)上也有很多zepto的源碼分析，有的給源碼添加注釋，有的談與jQuery的不同，...

sherlock221 2019-08-20 12:20 評論0 收藏0
zepto源碼ajax模塊學(xué)習(xí)

摘要：對象待會講，我認(rèn)為是設(shè)計最巧妙的地方。在跨域的時候會使用到，這是為了禁止使用。的目的在于創(chuàng)建一個事件，然后在觸發(fā)他，如果默認(rèn)行為被取消了，則返回。這是的初始化，默認(rèn)是請求，是新建的對象，表示瀏覽器是否應(yīng)該被允許緩存響應(yīng)。在學(xué)習(xí)zepto的源碼的時候，不得不稱贊這些人的厲害，我雖然能看明白，但是要我寫，估計吭哧吭哧寫不出來。雖然現(xiàn)在很少人使用zepto了，但是學(xué)習(xí)這些源碼我相信每次看都...

hizengzeng 2019-08-23 10:46 評論0 收藏0
向zepto.js學(xué)習(xí)如何手動(trigger)觸發(fā)DOM事件

摘要：好啦我們已經(jīng)解決了是啥的疑問了，現(xiàn)在回去開始一步步解讀如何實現(xiàn)手動觸發(fā)事件。我們主要看看這里面幾乎含有如何手動觸發(fā)一個事件的大部分步驟和內(nèi)容。前言前端在最近幾年實在火爆異常，vue、react、angular各路框架層出不窮，咱們要是不知道個雙向數(shù)據(jù)綁定，不曉得啥是虛擬DOM，也許就被鄙視了?；馃岬谋澈笸彩菬o盡的浮躁，學(xué)習(xí)這些先進(jìn)流行的類庫或者框架可以讓我們走的更快，但是靜下心...

spacewander 2019-08-20 17:04 評論0 收藏0
向zepto.js學(xué)習(xí)如何手動(trigger)觸發(fā)DOM事件

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

fuyi501 2019-08-29 12:44 評論0 收藏0