您的位置:首页 > 其它

Zepto源码分析-form模块

2015-04-09 20:14 567 查看
源码注释

//     Zepto.js
//     (c) 2010-2015 Thomas Fuchs
//     Zepto.js may be freely distributed under the MIT license.

;(function($){

/**
* 序列表单内容为JSON数组
* 返回类似[{a1:1},{a2:2}]的数组
* @returns {Array}
*/
$.fn.serializeArray = function() {
var name, type, result = [],

//{name:value}形式加入到结果数组中
add = function(value) {
//value是数组,递归添加到数组中
//注意这里的写法    value.forEach(add)   将value数组递归的每一项传入add
// 如 {a:[1,2,3]} -->  [{a:1},{a:2},{a:3}]
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
}

/**
* 序列表表单内容为查询字符串
*  转换成 a=1&b=2
* @returns {string}
*/
$.fn.serialize = function(){
var result = []
this.serializeArray().forEach(function(elm){
// 每个key-value,都保守URI编码
result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
})
return result.join('&')
}

/**
* 提交表单
* @param callback
* @returns {*}
*/
$.fn.submit = function(callback) {
//0 in arguments 判断是否传了回调函数
//      这里不应用bind,所有事件应该统一用on
//传了回调,就当成绑定submit事件
if (0 in arguments) this.bind('submit', callback)
//没有传回调,当成直接提交
else if (this.length) {//有表单元素
var event = $.Event('submit')

//第一个表单直接触发submit事件
//如果绑定过submit事件,此处会执行submit绑定函数
//注意,这里只是抛出事件,并不会提交表单
this.eq(0).trigger(event)

//如果未阻止浏览器默认事件,调用document.forms[0].submit()执行默认处理
//document.forms[0].submit()提交表单
if (!event.isDefaultPrevented()) this.get(0).submit()
}
return this
}

})(Zepto)


方法图

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: