zepto源码之form.js

一、前言

研究总结下之前用过的zepto类库，先从表单模块源码开始。

二、源码

//部分代码改动，为了消除警告和格式排版
//form表单(序列化form表单里面字段和注册submit事件以及触发表单提交事件)
(function ($) {
//序列表单内容为JSON数组
$.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;
//排除fieldset，禁用元素，submit,reset,button，file和未被选中的radio,checkbox,原因是这些元素不需要传递给服务器
if (name && field.nodeName.toLowerCase() != 'fieldset' && !field.disabled && type != 'submit' && type != 'reset' && type != 'button' && type != 'file' &&
((type != 'radio' && type != 'checkbox') || field.checked))
//{name:value}形式加入到结果数组中
add($(field).val())
});
return result
};

//序列表表单内容为查询字符串
$.fn.serialize = function () {
var result = [];
this.serializeArray().forEach(function (elm) {
//每个key-value，都保守URI编码
result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
});
return result.join('&')
};

//提交表单
$.fn.submit = function (callback) {
//0 in arguments 判断是否传了回调函数，传了回调，就当成绑定submit事件
if (0 in arguments) this.bind('submit', callback);
else if (this.length) { //没有传回调，当成直接提交，this.length表示有表单元素
var event = $.Event('submit');
//get和eq方法不同，get方法返回的dom节点，eq返回的还是Zepto对象集合
this.eq(0).trigger(event);
if (!event.isDefaultPrevented()) this.get(0).submit()
}
return this
}
})(Zepto);

三、源码分析

整个表单模块被一个自运行匿名函数包含,防止作用域污染。

serializeArray

1、循环递归函数add解决value为数组的情况;

2、formObject.elements为包含表单里面所有字段节点的数组;

提示:如果elements数组具有名称(input标签的id或name属性),那么该元素的名称就是formObject的一个属性,因此可以使用名称而不是数字来引用input对象;

举例,假设x是一个form对象,其中的一个input对象的名称是fname,则可以使用x.fname来引用该对象

submit

1、$.Event是创建事件,trigger(event)出发自定义事件,并不会提交表单;

2、document.forms[0].submit()执行默认提交表单处理