Zeptoソースコードを読むFormモジュール

Formモジュール処理はフォーム提出です.フォームコミットには、フォームデータのフォーマットと、フォームデータのトリガsubmitイベント、フォームのコミットの2つの部分が含まれます.
Zeptoソースシリーズの記事を読んでgithubに載せました.star:reading-zeptoを歓迎します.
ソースバージョン
本稿で読むソースコードはzepto 1である.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最終的に返される結果は1つの配列であり、各配列項目は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の条件判断であり,実際には関係のないフォーム要素を排除し,条件に合致するフォーム要素のみを処理する.
次の条件を1つ分析します.

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ソースのIOS 3モジュールを読む

ZeptoソースコードのFxモジュールを読む

Zeptoソースコードのfxを読むmethodsモジュール

ZeptoソースのStackモジュールを読む

添付文書

訳:Safariモバイル端末による画像リソースの制限の扱い方

リファレンス

zeptoソース分析のformモジュール

HTMLFormElement.elements

License
署名-非商業的使用-演繹禁止4.0国際(CC BY-NC-ND 4.0)
最後に、すべての文章は同時に微信の公衆番号に送信され、注目を歓迎し、意見を歓迎します.
作者:対角の反対側