讀Zepto源碼之Form模塊

陳江龍發布于2019-08-21 17:12 / 806人閱讀

摘要：模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發事件，提交表單。最終返回的結果是一個數組，每個數組項為包含和屬性的對象。否則手動綁定事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發，提交表單。

Form 模塊處理的是表單提交。表單提交包含兩部分，一部分是格式化表單數據，另一部分是觸發 submit 事件，提交表單。

讀 Zepto 源碼系列文章已經放到了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 方法內部調用的也是 serializeArray 方法。

serializeArray 最終返回的結果是一個數組，每個數組項為包含 name 和 value 屬性的對象。其中 name 為表單元素的 name 屬性值。

add函數

add = function(value) {
  if (value.forEach) return value.forEach(add)
  result.push({ name: name, value: value })
}

表單的值交由 add 函數處理，如果值為數組（支持 forEach ）方法，則調用 forEach 遍歷，繼續由 add 函數處理。否則將結果存入數組 result 中。最后返回的結果也是這個 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())
})

如果集合中有多個表單，則只處理第一個表單的表單元素。this[0].elements 用來獲取第一個表單所有的表單元素。

type 為表單類型，name 為表單元素的 name 屬性值。

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

以下一個條件一個條件來分析：

field.nodeName.toLowerCase() != "fieldset" 排除 fieldset 元素；

!field.disabled 排除禁用的表單，已經禁用了，肯定是沒有值需要提交的了；

type != "submit" 排除確定按鈕；

type != "reset" 排除重置按鈕；

type != "button" 排除按鈕；

type != "file" 排除文件選擇控件；

((type != "radio" && type != "checkbox") || field.checked)) 如果是 radio 或 checkbox 時，則必須要選中，這個也很好理解，如果沒有選中，也不會有值需要處理。

然后調用 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 方法要做的就是這部分事情。

這里對 serizlizeArray 返回的數組再做進一步的處理，首先用 encodeURIComponent 序列化 name 和 value 的值，并用 = 號拼接成字符串，存進新的數組中，最后調用 join 方法，用 & 將各項拼接起來。

.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
}

處理完數據，接下來該到提交了。

if (0 in arguments) this.bind("submit", callback)

如果有傳遞回調函數 callback ，則在表單上綁定 submit 事件，以 callback 作為事件的回調。

else if (this.length) {
  var event = $.Event("submit")
  this.eq(0).trigger(event)
  if (!event.isDefaultPrevented()) this.get(0).submit()
}

否則手動綁定 submit 事件，如果沒有阻止瀏覽器的默認事件，則在第一個表單上觸發 submit ，提交表單。

注意 eq 和 get 的區別， 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模塊

附文

譯：怎樣處理 Safari 移動端對圖片資源的限制

參考

zepto源碼分析之form模塊

HTMLFormElement.elements

License

署名-非商業性使用-禁止演繹 4.0 國際 (CC BY-NC-ND 4.0)

最后，所有文章都會同步發送到微信公眾號上，歡迎關注,歡迎提意見：

作者：對角另一面

GPU云服務器云服務器讀源碼源碼中文說明之源碼編譯模塊 linux 模塊源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89246.html

讀Zepto源碼之Data模塊

摘要：的模塊用來獲取節點中的屬性的數據，和儲存跟相關的數據。獲取節點指定的緩存值。如果存在，則刪除指定的數據，否則將緩存的數據全部刪除。為所有下級節點，如果為方法，則節點自身也是要被移除的，所以需要將自身也加入到節點中。 Zepto 的 Data 模塊用來獲取 DOM 節點中的 data-* 屬性的數據，和儲存跟 DOM 相關的數據。讀 Zepto 源碼系列文章已經放到了github上，歡...

wua_wua2012 2019-08-21 17:14 評論0 收藏0
讀Zepto源碼之Ajax模塊

摘要：私有變量用來臨時存放配置中的，即請求成功后執行的回調函數名，該配置可以為類型。是根據配置得出的回調函數名。接下來，將的占位符，替換成回調函數名，最后將插入到頁面中，發送請求。 Ajax 模塊也是經常會用到的模塊，Ajax 模塊中包含了 jsonp 的現實，和 XMLHttpRequest 的封裝。讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-...

Crazy_Coder 2019-08-20 18:59 評論0 收藏0
讀Zepto源碼之Stack模塊

摘要：讀源碼系列文章已經放到了上，歡迎源碼版本本文閱讀的源碼為改寫原有的方法模塊改寫了以上這些方法，這些方法在調用的時候，會為返回的結果添加的屬性，用來保存原來的集合。方法的分析可以看讀源碼之模塊。 Stack 模塊為 Zepto 添加了 addSelf 和 end 方法。讀 Zepto 源碼系列文章已經放到了github上，歡迎star: reading-zepto 源碼版本本文閱讀的...

crossea 2019-08-21 17:03 評論0 收藏0
讀Zepto源碼之Gesture模塊

摘要：模塊基于上的事件的封裝，利用屬性，封裝出系列事件。這個判斷需要引入設備偵測模塊。然后是監測事件，根據這三個事件，可以組合出和事件。其中變量對象和模塊中的對象的作用差不多，可以先看看讀源碼之模塊對模塊的分析。 Gesture 模塊基于 IOS 上的 Gesture 事件的封裝，利用 scale 屬性，封裝出 pinch 系列事件。讀 Zepto 源碼系列文章已經放到了github上，歡...

coolpail 2019-08-21 16:43 評論0 收藏0
讀Zepto源碼之fx_methods模塊

摘要：所以模塊依賴于模塊，在引入前必須引入模塊。原有的方法分析見讀源碼之樣式操作方法首先調用原有的方法，將元素顯示出來，這是實現動畫的基本條件。如果沒有傳遞，或者為值，則表示不需要動畫，調用原有的方法即可。 fx 模塊提供了 animate 動畫方法，fx_methods 利用 animate 方法，提供一些常用的動畫方法。所以 fx_methods 模塊依賴于 fx 模塊，在引入 fx_m...

junbaor 2019-08-21 16:59 評論0 收藏0