读Zepto源码之Form模块

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)

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


作者：对角另一面