本篇是zepto源码分析系列第二篇,这里依旧有一份包含详细中文注释的zepto源代码,有需要的可以下载下来学习,觉得有帮助的话戳一颗星那就更好了

本篇会解析zepto源码中的form表单处理部分,这部分相对来说比较简单,仅包含三个方法:serialize,serializeArray,submit,依次分析如下

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
        }

这个方法的作用是将用作提交的表单元素的值编译成拥有namevalue对象组成的数组,主要内容就是一个遍历,将fieldset,submit,reset等组件类型剔除掉之后,执行$('form').serializeArray()之后会将form表单中的每一个项拿出来,执行add方法,嗯。。。比较简单,注释都有

serialize

$.fn.serialize = function () {
            var result = []
            //序列化表单元素
            this.serializeArray().forEach(function (elm) {
                //序列化后的元素进行编码
                result.push(encodeURIComponent(elm.name) + '=' + encodeURIComponent(elm.value))
            })
            //拼接字符串
            return result.join('&')
        }

serialize方法是对serializeArray的进一步封装,所做的是就是将serializeArray执行后产生的数组编码后拼接成字符串,编译成 URL编码的 字符串。

submit

$.fn.submit = function (callback) {
            if (0 in arguments) this.bind('submit', callback)//传入回调函数时,为submit绑定默认事件
            else if (this.length) {
                var event = $.Event('submit')
                this.eq(0).trigger(event)//触发一个submit事件
                if (!event.isDefaultPrevented()) this.get(0).submit()//执行submit操作
            }
            return this
        }

submit方法,一贯的尿性,实现两种功能,当传入回调函数时,会给当前的组件绑定一个submit事件,如果不传入参数,则会对当前的组件,一般是form,模拟发出一个submit事件,同时,对当前表当执行submit操作。

Logo

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐