jQuery serialize

jQuery serialize模块是对象数组序列化模块。

首先我们先看一下《JavaScript高级程序设计》中的序列化函数，专门用于form参数序列化的。

 

serialize函数

function serialize(form){
    var parts = [],
        field = null,
        i,
        len,
        j,
        optLen,
        option,
        optValue;
        
    for(i = 0, len = form.elements.length; i < len; i++){
        field = form.elements[i];
        
        switch(field.type){
            case "select-one":
            case "select-multiple":
            
            if(field.name.length){
                for(j = 0, optLen = field.options.length; j < optLen; j++){
                    option= field.options[j];
                    if(option.selected){
                        optValue = "";
                        if(option.hasAttribute){
                            optValue = (option.hasAttribute("value")) ? 
                                        option.value : ooption.text);
                        }else{
                            optValue = (option.attributes["value"].specified ?
                                        option.value : option.text);
                        }
                        parts.push(encodeURIComponent(field.name) + "=" +
                                    encodeURIComponent(optValue));
                    }
                }
            }
            
            case undefined:
            case "file":
            case "submit":
            case "reset":
            case "button":
                break;
                
            case "radio":
            case "checkbox":
                if(!fied.checked){
                    break;
                }
                
            default:
                if(field.name.length){
                    parts.push(encodeURIComponent(field.name) + "=" +
                                encodeURIComponent(field.value));
                }
                
            }
        
        }
        return parts.join("&");
    }


}

这能帮我们理解下面有些操作，当然从整体实现是差不多的。

但是jQuery提供了利用递归将深入对象或数组内部去序列化，而该方法只能对其下一级序列化，不能再深入下去。

而且jQuery能对满足要求对象、数组进行序列化。

 

jQuery.param

jQuery.param = function( a, traditional ) {
    var prefix,
        s = [],
        // 内部函数充填函数
        add = function( key, value ) {
            // 如果value是一个函数，运行并得到其值
            value = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );
            // 向数组s中推入字符串"key=value"
            s[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );
        };

    // 如果traditional为true，提供jQuery1.3.2以下版本兼容处理
    
    // 如果traditional没定义
    if ( traditional === undefined ) {
        // 将traditional设置成jQuery.ajaxSettings.traditional
        traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;
    }

    // 如果a数组，假设其是一个包含元素的数组
    if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {
        // Serialize the form elements
        // 对a中所有元素的name和value推入s数组
        jQuery.each( a, function() {
            add( this.name, this.value );
        });

    // 否则
    } else {
        // 如果是traditional方式，则以老的方式encode(jQuery1.3.2以下版本)
        // 否则递归encode
        for ( prefix in a ) {
            buildParams( prefix, a[ prefix ], traditional, add );
        }
    }

    // 将s数组用&连接成字符串，将空白替换成+
    return s.join( "&" ).replace( r20, "+" );
};

jQuery.param能将所有参数序列化，提供了对jQuery1.3.2一下版本不深入对象内部的兼容模式。

 

buildParams函数

function buildParams( prefix, obj, traditional, add ) {
    var name;

    // 如果obj是一个数组
    if ( jQuery.isArray( obj ) ) {
        // 序列化数组所有元素
        jQuery.each( obj, function( i, v ) {
            // 如果tranditional为true，或者prefix即当前obj名字为xxx[]
            if ( traditional || rbracket.test( prefix ) ) {
                // 则v可当成常量直接推入
                add( prefix, v );
            // 否则，即prefix不是xxx[]形式，可能会xxx或者xxx[i]形式
            } else {
                // v不是常量(是数组或者对象)，如果v此时不是数组或则对象，则下次可以当成是常量了，即变成xxx[]
                // 否则变成xxx[i]，递归
                buildParams( prefix + "[" + ( typeof v === "object" ? i : "" ) + "]", v, traditional, add );
            }
        });
    // 否则，非tranditional且obj是对象
    } else if ( !traditional && jQuery.type( obj ) === "object" ) {
        // 遍历序列化
        for ( name in obj ) {
            // 递归，变成xxx[name]
            buildParams( prefix + "[" + name + "]", obj[ name ], traditional, add );
        }

    } else {
        // 到这里，证明不是对象也不是数组，或者是traditional模式，那么直接添加吧
        add( prefix, obj );
    }
};

如果是传统模式，则不递归，直接输出，否则递归。 

 

jQuery.fn.serialize

jQuery.fn.serialize = function() {
    // 利用jQuery.param和jQuery.fn.serializeArray
    return jQuery.param( this.serializeArray() );
};

序列化函数，实际上是调用param来序列化。

不过先要用serializeArray组装一下。 

 

jQuery.fn.serializeArray

jQuery.fn.serializeArray: function() {
    // 使用jQuery.fn.map遍历所有元素
    return this.map(function(){
        // 读取this.elements
        var elements = jQuery.prop( this, "elements" );
        // 如果elements存在则变成数组返回，否则返回this
        return elements ? jQuery.makeArray( elements ) : this;
    })
    // 过滤
    .filter(function(){
        // 得到type
        var type = this.type;
        // Use .is(":disabled") so that fieldset[disabled] works
        // 如果该元素有name属性，并且这个元素不是:disabled
        return this.name && !jQuery( this ).is( ":disabled" ) &&
            // 如果节点名字是input、select、textarea或者keygen，
            // 并且type不是submit、button、image或reset这些可提交元素
            rsubmittable.test( this.nodeName ) && !rsubmitterTypes.test( type ) &&
            // 如果this.checked为true，或者不是checkbox、radio
            ( this.checked || !manipulation_rcheckableType.test( type ) );
        
        // 满足的保留，否则过滤
    })
    // 再次map遍历所有剩下元素
    .map(function( i, elem ){
        // 通过.val获取elem的值
        var val = jQuery( this ).val();

        // 如果val为null
        return val == null ?
            // 则返回null
            null :
            // 否则如果是数组
            jQuery.isArray( val ) ?
                // 遍历数组的子元素
                jQuery.map( val, function( val ){
                    // 组装成下面形式的元素组成的数组
                    return { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
                }) :
                // 返回这种形式
                { name: elem.name, value: val.replace( rCRLF, "\r\n" ) };
    }).get(); //转成数组返回，此时不能链式了
};

 组装参数对象，并过滤掉一些不需要序列化的元素。

 

jQuery.fn.map

jQuery.fn.map = function( callback ) {
    return this.pushStack( jQuery.map(this, function( elem, i ) {
        return callback.call( elem, i, elem );
    }));
};

我们可以看出其主要使用了jQuery.map来实现的。

 

jQuery.map

jQuery.map = function( elems, callback, arg ) {
    var value,
        i = 0,
        length = elems.length,
        isArray = isArraylike( elems ),
        ret = [];

    // 先看看elems是不是数组
    if ( isArray ) {
        // 遍历数组
        for ( ; i < length; i++ ) {
            // 得到callback的返回值
            value = callback( elems[ i ], i, arg );

            // 组装返回值数组
            if ( value != null ) {
                ret[ ret.length ] = value;
            }
        }

    // 如果不是数组，那么就当他是一个对象
    } else {
        // 遍历其所有key
        for ( i in elems ) {
            // 得到callback的返回值
            value = callback( elems[ i ], i, arg );

            // 组装返回值数组
            if ( value != null ) {
                ret[ ret.length ] = value;
            }
        }
    }

    // 合并所有嵌套数组
    return core_concat.apply( [], ret );
};