摘要：形如源代碼在的原型上添加了相關(guān)方法。類似源代碼每個(gè)表單的和都通過(guò)編碼最后通過(guò)符號(hào)分割有了的基礎(chǔ)，就是將相應(yīng)的和都通過(guò)編碼，然后用符號(hào)進(jìn)行分割，也就達(dá)到了我們要的結(jié)果。

JavaScript最初的一個(gè)應(yīng)用場(chǎng)景就是分擔(dān)服務(wù)器處理表單的責(zé)任，打破處處依賴服務(wù)器的局面，這篇文章主要介紹zepto中form模塊關(guān)于表單處理的幾個(gè)方法，serialize、serializeArray、submit。

原文鏈接

github項(xiàng)目地址

在開(kāi)始學(xué)些form模塊相關(guān)方法前，我們先來(lái)回顧一下表單提交時(shí)，瀏覽器是怎么樣將數(shù)據(jù)發(fā)送給服務(wù)器的(以下內(nèi)容摘自《JavaScript高級(jí)程序設(shè)計(jì)》第14章 14.4節(jié) 表單序列化)

對(duì)表單字段的名稱和值進(jìn)行URL編碼，使用&分隔。

不發(fā)送禁用的表單字段。(也就是屬性disabled為true的)

只發(fā)送勾選的復(fù)選框和單選按鈕

不發(fā)送type為reset和button的按鈕

多選選擇框中每個(gè)選擇的值多帶帶一個(gè)條目

在單擊提交按鈕表單的情況下，也會(huì)發(fā)送提交按鈕的value值，否則不發(fā)送提交按鈕。

select元素的值，就是選中的option元素的value屬性的值，如果option元素沒(méi)有value屬性，則是option元素的文本值。 在表單序列化得過(guò)程中，一般不包含任何按鈕字段，因?yàn)榻Y(jié)果字符串很可能是通過(guò)其他方式提交的，除此之外其他規(guī)則都應(yīng)該遵循。

有了上面的知識(shí)的回顧，接下來(lái)我們開(kāi)始看zepto中serialize和serializeArray的實(shí)現(xiàn)

因?yàn)閟erialize依賴serializeArray的實(shí)現(xiàn)，所以我們先來(lái)看看它是怎么實(shí)現(xiàn)的。而他的作用是把form表單序列化成一個(gè)由 name 和 value 屬性組成的對(duì)象的數(shù)組。形如：

[
  {name: "qianlongo", value: "haha"},
  {name: "wangmin", value: "heihei"}
]

源代碼

 $.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相關(guān)方法。一開(kāi)始聲明了name,type, result三個(gè)變量，分別存儲(chǔ)表單控件的name屬性，type屬性，以及最后函數(shù)執(zhí)行完成后要返回的數(shù)組。

首先通過(guò)this[0]判斷有未選中表單元素，如果沒(méi)有返回的結(jié)果就是一個(gè)空數(shù)組了。如果選中了，則對(duì)該表單的相關(guān)控件(form.elements表示表單中所有控件的集合)進(jìn)行遍歷。

獲取單個(gè)控件的類型(type)，name屬性(name),再接著就是判斷符合提交到服務(wù)器端的表單控件條件了。

需要有name屬性(條件為"真")

不能是fieldset元素

不能是已經(jīng)禁止的元素(即disable為true)

不能是submit、reset、button、file等元素

對(duì)于單選和多選控件，只發(fā)送已經(jīng)勾選的。

在上面的條件都滿足的條件下，調(diào)用add函數(shù)并將通過(guò)$(elements).val()獲取到的值傳入。

add函數(shù)的邏輯也非常簡(jiǎn)單。如果value是數(shù)組，則將value數(shù)組遞歸的每一項(xiàng)傳入add。不是數(shù)組就是直接按照{ name: name, value: value }形式推入result了。

不過(guò)什么時(shí)候value會(huì)為數(shù)組呢？我們需要從zepto模塊的val函數(shù)實(shí)現(xiàn)看起

val函數(shù)實(shí)現(xiàn)

function val (value) {
  if (0 in arguments) {
    if (value == null) value = ""
    return this.each(function (idx) {
      this.value = funcArg(this, value, idx, this.value)
    })
  } else {
    // 主要看這里,multiple是用來(lái)設(shè)置下拉列表是否可以多選的。
    // 如果是多選的，則選擇被選中(即selected為true)的元素并通過(guò)pluck方法，讀取該元素的value值，最后返回的是一個(gè)數(shù)組
    return this[0] && (this[0].multiple ?
      $(this[0]).find("option").filter(function () { return this.selected }).pluck("value") :
      this[0].value)
  }
}

將表單內(nèi)容序列化為查詢字符串。類似name=qianlongo&sex=boy

源代碼

$.fn.serialize = function(){
  var result = []
  this.serializeArray().forEach(function(elm){
    // 每個(gè)表單的name和value都通過(guò)encodeURIComponent編碼
    result.push(encodeURIComponent(elm.name) + "=" + encodeURIComponent(elm.value))
  })
  // 最后通過(guò)&符號(hào)分割
  return result.join("&")
}

有了serializeArray的基礎(chǔ)，serialize就是將相應(yīng)的name和value都通過(guò)encodeURIComponent編碼，然后用&符號(hào)進(jìn)行分割，也就達(dá)到了我們要的結(jié)果。

有兩種用法，當(dāng)傳入了一個(gè)回調(diào)函數(shù)的時(shí)候，是給指定的表單的submit事件添加一個(gè)回調(diào)處理函數(shù)。
如果沒(méi)有傳入回調(diào)函數(shù)則觸發(fā)當(dāng)前表單submit事件，并且執(zhí)行默認(rèn)的提交表單行為(前提是沒(méi)有阻止瀏覽器默認(rèn)行為)

源代碼

$.fn.submit = function(callback) {
  // 如果傳了回調(diào)函數(shù)，則在選中的元素上添加submit事件
  if (0 in arguments) this.bind("submit", callback)
  // 否則在沒(méi)有傳遞回調(diào)函數(shù)的情況下，并且選中有表單元素  
  else if (this.length) {
    var event = $.Event("submit")
    // 觸發(fā)選中的第一個(gè)表單的是submit事件，注意這里只是手動(dòng)觸發(fā)綁定的submit事件，并不會(huì)提交表單
    this.eq(0).trigger(event)
    // 如果沒(méi)有阻止默認(rèn)事件，便調(diào)用form.submit()提交表單
    if (!event.isDefaultPrevented()) this.get(0).submit()
  }
  return this
}

以上是zepto form模塊的相關(guān)源碼分析，歡迎大家指正。

文章記錄

form模塊

zepto源碼分析之form模塊

zepto模塊

這些Zepto中實(shí)用的方法集

Zepto核心模塊之工具方法拾遺

event模塊

mouseenter與mouseover為何這般糾纏不清？

向zepto.js學(xué)習(xí)如何手動(dòng)觸發(fā)DOM事件

誰(shuí)說(shuō)你只是"會(huì)用"jQuery?

ajax模塊

原來(lái)你是這樣的jsonp(原理與具體實(shí)現(xiàn)細(xì)節(jié))