zepto原始碼之html 方法

2021-09-28 21:43:38 字數 1261 閱讀 5667

要了解html()方法的實現,首先了解它的用法和引數。

html() 方法設定或返回被選元素的內容(innerhtml)。

當該方法用於返回內容時,則返回第乙個匹配元素的內容。

當該方法用於設定內容時,則重寫所有匹配元素的內容。

返回內容:

$(selector).html()

設定內容:

$(selector).html(content)

使用函式設定內容:

$(selector).html(function(index,currentcontent))

引數描述

content

必需。規定被選元素的新內容(可包含 html 標籤)。

function(index,currentcontent)

可選。規定返回被選元素的新內容的函式。

因為 html() 函式內部使用到了zepto中自定義的函式funcarg(),所以先看一下funcarg()的有什麼作用。

function funcarg(context, arg, idx, payload)
funcarg函式用來判定第二個引數arg(就是傳進來的html)是否是乙個函式(通過上面引數的學習,我們知道引數可以為乙個函式),如果是乙個函式,則讓this指向context(html()呼叫時傳進的是this,其實就是當前當前呼叫html()方法的元素),否則返回arg ,看完了這個函式,就可以來看html()的內部實現。

html: function(html)) :

(0 in this ? this[0].innerhtml : null)

}

首先這個方法內是用了乙個三元運算子來實現的,0 in arguments這裡用來檢測引數(不知道in操作符的小夥伴補下習哦),當0 in arguments為假時,也就是引數為空,說明是返回html內容,然後判斷當前this(也就是當前呼叫html()方法的元素為不為空),不為空返回就是它的innerhtml,否則返回null。當0 in arguments為真時,則有引數說明是設定內容,因為this獲取的元素可能不止乙個,所以要each每乙個獲取的元素,先把老的innerhtml獲取備用,再清空插入新的html。此時就用到funcarg函式,判斷是直接設定內容還是函式設定內容。

Zepto原始碼之ie模組

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

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原始碼結構

在引入zepto檔案以後,我們就可以使用zepto的方法,例如 selector 這是因為下面的 window.zepto zepto window.undefined window.zepto 複製 在window物件上,我們繫結了zepto,zepto這是乙個立即執行函式。如果 不存在,就把wi...