码迷,mamicode.com
首页 > 其他好文 > 详细

Zepto源码分析-form模块

时间:2015-04-09 21:44:54      阅读:161      评论:0      收藏:0      [点我收藏+]

标签:

源码注释

//     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)

 

方法图

技术分享

Zepto源码分析-form模块

标签:

原文地址:http://www.cnblogs.com/mominger/p/4411546.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!