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

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

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

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

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

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

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

什么都沒(méi)有傳入，返回一個(gè)空的zepto對(duì)象

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

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

如果是window,document，實(shí)際上也是直接返回

如果是一個(gè)html片段，那么生成節(jié)點(diǎn)

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

然后將得到的對(duì)象傳入zepto.Z，來(lái)到143-148行：

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

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

zepto.Z.prototype = $.fn

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

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

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/80062.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

fuyi501 2019-08-29 12:44 評(píng)論0 收藏0