讀Zepto原始碼之Form模組

2022-07-03 15:12:15 字數 2696 閱讀 7614

form模組處理的是表單提交。表單提交包含兩部分,一部分是格式化表單資料,另一部分是觸發submit事件,提交表單。

讀 zepto 原始碼系列文章已經放到了github上,歡迎star: reading-zepto

本文閱讀的原始碼為 zepto1.2.0

《reading-zepto》

$.fn.serializearray = function() )

}if (this[0]) $.each(this[0].elements, function(_, field))

return result

}

serializearray是格式化部分的核心方法,後面的serialize方法內部呼叫的也是serializearray方法。

serializearray最終返回的結果是乙個陣列,每個陣列項為包含namevalue屬性的物件。其中name為表單元素的name屬性值。

add = function(value) )

}

表單的值交由add函式處理,如果值為陣列(支援foreach) 方法,則呼叫foreach遍歷,繼續由add函式處理。否則將結果存入陣列result中。最後返回的結果也是這個result

if (this[0]) $.each(this[0].elements, function(_, field))
如果集合中有多個表單,則只處理第乙個表單的表單元素。this[0].elements用來獲取第乙個表單所有的表單元素。

type為表單型別,name為表單元素的name屬性值。

這一大段**的關鍵在if中的條件判斷,其實是將一些無關的表單元素排除,只處理符合條件的表單元素。

然後呼叫add方法,將表單元素的值獲取到交由其處理。

$.fn.serialize = function())

return result.join('&')

}

表單元素處理完成後,最終是要拼成如name1=value1&name2=value2&...的形式,serialize方法要做的就是這部分事情。

這裡對serizlizearray返回的陣列再做進一步的處理,首先用encodeuricomponent序列化namevalue的值,並用=號拼接成字串,存進新的陣列中,最後呼叫join方法,用&將各項拼接起來。

$.fn.submit = function(callback) 

return this

}

處理完資料,接下來該到提交了。

if (0 in arguments) this.bind('submit', callback)
如果有傳遞**函式callback,則在表單上繫結submit事件,以callback作為事件的**。

else if (this.length)
否則手動繫結submit事件,如果沒有阻止瀏覽器的預設事件,則在第乙個表單上觸發submit,提交表單。

注意eqget的區別,eq返回的是zepto物件,而get返回的是dom元素。

讀zepto原始碼之**結構

讀zepto原始碼之內部方法

讀zepto原始碼之工具函式

讀zepto原始碼之神奇的$

讀zepto原始碼之集合操作

讀zepto原始碼之集合元素查詢

讀zepto原始碼之操作dom

讀zepto原始碼之樣式操作

讀zepto原始碼之屬性操作

讀zepto原始碼之event模組

讀zepto原始碼之ie模組

讀zepto原始碼之callbacks模組

讀zepto原始碼之deferred模組

讀zepto原始碼之ajax模組

讀zepto原始碼之assets模組

讀zepto原始碼之selector模組

讀zepto原始碼之touch模組

讀zepto原始碼之gesture模組

讀zepto原始碼之ios3模組

讀zepto原始碼之fx模組

讀zepto原始碼之fx_methods模組

讀zepto原始碼之stack模組

署名-非商業性使用-禁止演繹 4.0 國際 (cc by-nc-nd 4.0)

讀Zepto原始碼之Gesture模組

gesture模組基於ios上的gesture事件的封裝,利用scale屬性,封裝出pinch系列事件。讀 zepto 原始碼系列文章已經放到了github上,歡迎star reading zepto 本文閱讀的原始碼為 zepto1.2.0 reading zepto function gestu...

讀Zepto原始碼之Stack模組

stack模組為zepto新增了addself和end方法。讀 zepto 原始碼系列文章已經放到了github上,歡迎star reading zepto 本文閱讀的原始碼為 zepto1.2.0 filter,add,not,eq,first,last,find,closest,parents,...

讀Zepto原始碼之Gesture模組

gesture模組基於ios上的gesture事件的封裝,利用scale屬性,封裝出pinch系列事件。讀 zepto 原始碼系列文章已經放到了github上,歡迎star reading zepto 本文閱讀的原始碼為 zepto1.2.0 reading zepto function gestu...