读Zepto源码之Form模块

陈江龙发布于2019-08-21 17:12 / 690人阅读

摘要：模块处理的是表单提交。表单提交包含两部分，一部分是格式化表单数据，另一部分是触发事件，提交表单。最终返回的结果是一个数组，每个数组项为包含和属性的对象。否则手动绑定事件，如果没有阻止浏览器的默认事件，则在第一个表单上触发，提交表单。

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)

最后，所有文章都会同步发送到微信公众号上，欢迎关注,欢迎提意见：

作者：对角另一面

专线服务私有云读源码源码中文说明之源码编译模块 linux 模块源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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