摘要:實際上,內部維護的的對象是一個類數組對象這里的。粗略的流程可以歸納為調用函數根據傳入的參數生成對象。重置對象的原型,使之擁有一系列方法
zepto版本為1.0。
這一章來看看入口是怎么實現的。
我們一般是這樣用的:$("#test"),在196行,zepto定義了函數$:
$ = function(selector, context){ return zepto.init(selector, context) }
這里的init方法做了些什么呢?在160行,可以看到,這里是根據不同參數返回不同的對象:
什么都沒有傳入,返回一個空的zepto對象
如果是一個函數,那么執行dom ready
如果已經是一個zepto對象,直接返回
如果是window,document,實際上也是直接返回
如果是一個html片段,那么生成節點
如果上述情況都不是,那么就用選擇器document.querySelectorAll獲取dom對象
然后將得到的對象傳入zepto.Z,來到143-148行:
zepto.Z = function(dom, selector) { dom = dom || [] dom.__proto__ = arguments.callee.prototype dom.selector = selector || "" return dom }
這里是入口最關鍵的步驟之一。實際上,zepto內部維護的的對象是一個類數組對象(這里的dom)。然后用zepto.Z的原型覆蓋了此類數組的的原型。那么zepto.Z的原型又是什么呢?我們跳到第608行:
zepto.Z.prototype = $.fn
那么$.fn是什么呢?再看278-550行:
$.fn = { //各種方法 }
因此,zepto.Z返回的類數組對象就有了$.fn的各種方法了。粗略的流程可以歸納為:
調用$函數
根據傳入的參數生成對象。
重置對象的原型,使之擁有一系列方法
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80062.html
摘要:元旦假期轉眼即過,終于在最后一天想起最初那個宏偉的計劃,然后默默撿起源碼的第一行。在具體深入之前,我希望能對庫結構有一個整體的了解。最外層為一個匿名的立即執行函數,因為只需要執行一次。 元旦假期轉眼即過,終于在最后一天想起最初那個宏偉的計劃,然后默默撿起Zepto源碼的第一行。在具體深入之前,我希望能對Zepto庫結構有一個整體的了解。看的時間比較短,以下如果有不正確的地方,歡迎指出。...
摘要:本來想學習一下的源碼,但由于的源碼有多行,設計相當復雜,所以決定從開始,分析一個成熟的框架的代碼結構及執行步驟。同時發表在我的博客源碼分析代碼結構 本來想學習一下jQuery的源碼,但由于jQuery的源碼有10000多行,設計相當復雜,所以決定從zepto開始,分析一個成熟的框架的代碼結構及執行步驟。 網上也有很多zepto的源碼分析,有的給源碼添加注釋,有的談與jQuery的不同,...
摘要:對象待會講,我認為是設計最巧妙的地方。在跨域的時候會使用到,這是為了禁止使用。的目的在于創建一個事件,然后在觸發他,如果默認行為被取消了,則返回。這是的初始化,默認是請求,是新建的對象,表示瀏覽器是否應該被允許緩存響應。 在學習zepto的源碼的時候,不得不稱贊這些人的厲害,我雖然能看明白,但是要我寫,估計吭哧吭哧寫不出來。雖然現在很少人使用zepto了,但是學習這些源碼我相信每次看都...
摘要:好啦我們已經解決了是啥的疑問了,現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。 前言 前端在最近幾年實在火爆異常,vue、react、angular各路框架層出不窮,咱們要是不知道個雙向數據綁定,不曉得啥是虛擬DOM,也許就被鄙視了。火熱的背后往往也是無盡的浮躁,學習這些先進流行的類庫或者框架可以讓我們走的更快,但是靜下心...
摘要:好啦我們已經解決了是啥的疑問了,現在回去開始一步步解讀如何實現手動觸發事件。我們主要看看這里面幾乎含有如何手動觸發一個事件的大部分步驟和內容。 前言 前端在最近幾年實在火爆異常,vue、react、angular各路框架層出不窮,咱們要是不知道個雙向數據綁定,不曉得啥是虛擬DOM,也許就被鄙視了。火熱的背后往往也是無盡的浮躁,學習這些先進流行的類庫或者框架可以讓我們走的更快,但是靜下心...
閱讀 3346·2021-11-25 09:43
閱讀 3134·2021-10-11 10:58
閱讀 2735·2021-09-27 13:59
閱讀 3074·2021-09-24 09:55
閱讀 2166·2019-08-30 15:52
閱讀 1826·2019-08-30 14:03
閱讀 2256·2019-08-30 11:11
閱讀 2020·2019-08-28 18:12