資訊專(zhuān)欄INFORMATION COLUMN
摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā)事件，提交表單。最終返回的結(jié)果是一個(gè)數(shù)組，每個(gè)數(shù)組項(xiàng)為包含和屬性的對(duì)象。否則手動(dòng)綁定事件，如果沒(méi)有阻止瀏覽器的默認(rèn)事件，則在第一個(gè)表單上觸發(fā)，提交表單。
Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數(shù)據(jù)，另一部分是觸發(fā) submit 事件，提交表單。
讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto
源碼版本本文閱讀的源碼為 zepto1.2.0
GitBook《reading-zepto》
.serializeArray()$.fn.serializeArray = function() {
var name, type, result = [],
add = function(value) {
if (value.forEach) return value.forEach(add)
result.push({ name: name, value: value })
}
if (this[0]) $.each(this[0].elements, function(_, field){
type = field.type, name = field.name
if (name && field.nodeName.toLowerCase() != "fieldset" &&
!field.disabled && type != "submit" && type != "reset" && type != "button" && type != "file" &&
((type != "radio" && type != "checkbox") || field.checked))
add($(field).val())
})
return result
}
serializeArray 是格式化部分的核心方法，后面的 serialize 方法內(nèi)部調(diào)用的也是 serializeArray 方法。
serializeArray 最終返回的結(jié)果是一個(gè)數(shù)組，每個(gè)數(shù)組項(xiàng)為包含 name 和 value 屬性的對(duì)象。其中 name 為表單元素的 name 屬性值。
add函數(shù)add = function(value) {
if (value.forEach) return value.forEach(add)
result.push({ name: name, value: value })
}
表單的值交由 add 函數(shù)處理，如果值為數(shù)組（支持 forEach ） 方法，則調(diào)用 forEach 遍歷，繼續(xù)由 add 函數(shù)處理。否則將結(jié)果存入數(shù)組 result 中。最后返回的結(jié)果也是這個(gè) result。
遍歷表單元素if (this[0]) $.each(this[0].elements, function(_, field){
type = field.type, name = field.name
if (name && field.nodeName.toLowerCase() != "fieldset" &&
!field.disabled && type != "submit" && type != "reset" && type != "button" && type != "file" &&
((type != "radio" && type != "checkbox") || field.checked))
add($(field).val())
})
如果集合中有多個(gè)表單，則只處理第一個(gè)表單的表單元素。this[0].elements 用來(lái)獲取第一個(gè)表單所有的表單元素。
type 為表單類(lèi)型，name 為表單元素的 name 屬性值。
這一大段代碼的關(guān)鍵在 if 中的條件判斷，其實(shí)是將一些無(wú)關(guān)的表單元素排除，只處理符合條件的表單元素。
以下一個(gè)條件一個(gè)條件來(lái)分析：
field.nodeName.toLowerCase() != "fieldset" 排除 fieldset 元素；
!field.disabled 排除禁用的表單，已經(jīng)禁用了，肯定是沒(méi)有值需要提交的了；
type != "submit" 排除確定按鈕；
type != "reset" 排除重置按鈕；
type != "button" 排除按鈕；
type != "file" 排除文件選擇控件；
((type != "radio" && type != "checkbox") || field.checked)) 如果是 radio 或 checkbox 時(shí)，則必須要選中，這個(gè)也很好理解，如果沒(méi)有選中，也不會(huì)有值需要處理。
然后調(diào)用 add 方法，將表單元素的值獲取到交由其處理。
.serialize()$.fn.serialize = function(){
var result = []
this.serializeArray().forEach(function(elm){
result.push(encodeURIComponent(elm.name) + "=" + encodeURIComponent(elm.value))
})
return result.join("&")
}
表單元素處理完成后，最終是要拼成如 name1=value1&name2=value2&... 的形式，serialize 方法要做的就是這部分事情。
這里對(duì) serizlizeArray 返回的數(shù)組再做進(jìn)一步的處理，首先用 encodeURIComponent 序列化 name 和 value 的值，并用 = 號(hào)拼接成字符串，存進(jìn)新的數(shù)組中，最后調(diào)用 join 方法，用 & 將各項(xiàng)拼接起來(lái)。
.submit()$.fn.submit = function(callback) {
if (0 in arguments) this.bind("submit", callback)
else if (this.length) {
var event = $.Event("submit")
this.eq(0).trigger(event)
if (!event.isDefaultPrevented()) this.get(0).submit()
}
return this
}
處理完數(shù)據(jù)，接下來(lái)該到提交了。
if (0 in arguments) this.bind("submit", callback)
如果有傳遞回調(diào)函數(shù) callback ，則在表單上綁定 submit 事件，以 callback 作為事件的回調(diào)。
else if (this.length) {
var event = $.Event("submit")
this.eq(0).trigger(event)
if (!event.isDefaultPrevented()) this.get(0).submit()
}
否則手動(dòng)綁定 submit 事件，如果沒(méi)有阻止瀏覽器的默認(rèn)事件，則在第一個(gè)表單上觸發(fā) submit ，提交表單。
注意 eq 和 get 的區(qū)別， eq 返回的是 Zepto 對(duì)象，而 get 返回的是 DOM 元素。
系列文章讀Zepto源碼之代碼結(jié)構(gòu)
讀Zepto源碼之內(nèi)部方法
讀Zepto源碼之工具函數(shù)
讀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模塊
附文譯：怎樣處理 Safari 移動(dòng)端對(duì)圖片資源的限制
參考zepto源碼分析之form模塊
HTMLFormElement.elements
License署名-非商業(yè)性使用-禁止演繹 4.0 國(guó)際 (CC BY-NC-ND 4.0)
最后，所有文章都會(huì)同步發(fā)送到微信公眾號(hào)上，歡迎關(guān)注,歡迎提意見(jiàn)：
作者：對(duì)角另一面
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/89246.html
摘要：的模塊用來(lái)獲取節(jié)點(diǎn)中的屬性的數(shù)據(jù)，和儲(chǔ)存跟相關(guān)的數(shù)據(jù)。獲取節(jié)點(diǎn)指定的緩存值。如果存在，則刪除指定的數(shù)據(jù)，否則將緩存的數(shù)據(jù)全部刪除。為所有下級(jí)節(jié)點(diǎn)，如果為方法，則節(jié)點(diǎn)自身也是要被移除的，所以需要將自身也加入到節(jié)點(diǎn)中。 Zepto 的 Data 模塊用來(lái)獲取 DOM 節(jié)點(diǎn)中的 data-* 屬性的數(shù)據(jù)，和儲(chǔ)存跟 DOM 相關(guān)的數(shù)據(jù)。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡...
摘要：私有變量用來(lái)臨時(shí)存放配置中的，即請(qǐng)求成功后執(zhí)行的回調(diào)函數(shù)名，該配置可以為類(lèi)型。是根據(jù)配置得出的回調(diào)函數(shù)名。接下來(lái)，將的占位符，替換成回調(diào)函數(shù)名，最后將插入到頁(yè)面中，發(fā)送請(qǐng)求。 Ajax 模塊也是經(jīng)常會(huì)用到的模塊，Ajax 模塊中包含了 jsonp 的現(xiàn)實(shí)，和 XMLHttpRequest 的封裝。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-...
摘要：讀源碼系列文章已經(jīng)放到了上，歡迎源碼版本本文閱讀的源碼為改寫(xiě)原有的方法模塊改寫(xiě)了以上這些方法，這些方法在調(diào)用的時(shí)候，會(huì)為返回的結(jié)果添加的屬性，用來(lái)保存原來(lái)的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡迎star: reading-zepto 源碼版本 本文閱讀的...
摘要：模塊基于上的事件的封裝，利用屬性，封裝出系列事件。這個(gè)判斷需要引入設(shè)備偵測(cè)模塊。然后是監(jiān)測(cè)事件，根據(jù)這三個(gè)事件，可以組合出和事件。其中變量對(duì)象和模塊中的對(duì)象的作用差不多，可以先看看讀源碼之模塊對(duì)模塊的分析。 Gesture 模塊基于 IOS 上的 Gesture 事件的封裝，利用 scale 屬性，封裝出 pinch 系列事件。 讀 Zepto 源碼系列文章已經(jīng)放到了github上，歡...
摘要：所以模塊依賴(lài)于模塊，在引入前必須引入模塊。原有的方法分析見(jiàn)讀源碼之樣式操作方法首先調(diào)用原有的方法，將元素顯示出來(lái)，這是實(shí)現(xiàn)動(dòng)畫(huà)的基本條件。如果沒(méi)有傳遞，或者為值，則表示不需要?jiǎng)赢?huà)，調(diào)用原有的方法即可。 fx 模塊提供了 animate 動(dòng)畫(huà)方法，fx_methods 利用 animate 方法，提供一些常用的動(dòng)畫(huà)方法。所以 fx_methods 模塊依賴(lài)于 fx 模塊，在引入 fx_m...
閱讀 630·2021-09-24 09:48
閱讀 2492·2021-08-26 14:14
閱讀 517·2019-08-30 13:08
閱讀 1445·2019-08-29 15:22
閱讀 3066·2019-08-29 11:06
閱讀 1001·2019-08-26 18:26
閱讀 1034·2019-08-26 13:53
閱讀 2512·2019-08-26 12:21
