jQuery源码分析之jQuery.param方法详解

buildParams方法源码：

var rbracket = /\[\]$/;function buildParams1( prefix, obj, traditional, add ) {var name;     //传入的是一个对象，这里是falseif ( jQuery.isArray( obj ) ) {// Serialize array item.//传入的第二个students是数组，那么会对这个数组再次进行遍历//如果traditional为true，或者这是数组是空的，那么调用add方法传入键名和这个数组项!jQuery.each( obj, function( i, v ) {if ( traditional || rbracket.test( prefix ) ) {// Treat each array item as a scalar.add( prefix, v );} else {// Item is non-scalar (array or object), encode its numeric index.//传入参数形式为：buildParams1("students['']","a1",traditional,add)//也就是这时候在add方法里面的key就是students[]这种形式的!也就是说这时候的key就是stutents[]!//然后对这个key进行编码!buildParams1( prefix + "[" + ( typeof v === "object" ? i : "" ) + "]", v, traditional, add );}});    //如果没有传入traditional同时还是对象} else if ( !traditional && jQuery.type( obj ) === "object" ) {// Serialize object item.//那么就会再次进行深度遍历，然后遍历出所有的属性，所以这里是深度遍历的!for ( name in obj ) {buildParams1( prefix + "[" + name + "]", obj[ name ], traditional, add );}} else {// Serialize scalar item.add( prefix, obj );}}

params源码：

//%20是空格符号var r20 = /%20/g;jQuery.param1 = function( a, traditional ) {var prefix,s = [],add = function( key, value ) {//如果value是函数，那么调用函数得到返回值作为真正的value值，如果value是null或者undefined//那么直接value是空字符串，其它情况value不变！// If value is a function, invoke it and return its valuevalue = jQuery.isFunction( value ) ? value() : ( value == null ? "" : value );//把key和value值都进行了转码调用encodeURIComponents[ s.length ] = encodeURIComponent( key ) + "=" + encodeURIComponent( value );};// Set traditional to true for jQuery <= 1.3.2 behavior.if ( traditional === undefined ) {traditional = jQuery.ajaxSettings && jQuery.ajaxSettings.traditional;}// If an array was passed in, assume that it is an array of form elements.if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) {// Serialize the form elementsjQuery.each( a, function() {//这里面的each指向前面的数组中的内容，也就是是一个对象!add( this.name, this.value );});} else {// If traditional, encode the "old" way (the way 1.3.2 or older// did it), otherwise encode params recursively.for ( prefix in a ) {//第二种方式jQuery.param1({ name:"CodePlayer", age:18 });调用//那么传入的第一个参数是键名，第二个参数是键值，第三个是traditional，第四个是add方法buildParams1( prefix, a[ prefix ], traditional, add );}}// Return the resulting serialization//最后把数组s中的所有的查询字符串通过&链接起来，并且把%20也就是空格用+表示!return s.join( "&" ).replace( r20, "+" );};

测试代码1：

var obj = [       { name: "names", value: { first:"Jim", second:"W", last:"Green" } },       { name: "uid", value: [ { name: "a", value: 1}, "James" ] }];var result=jQuery.param1(obj,false);alert(result);

note:这时候传入的是数组，那么在param方法里面直接调用通过each方法迭代处理每一个对象，在add里面进行处理!对键值和键名都调用encodeURIComponent方法得到结果!
测试代码2：

var result1=jQuery.param1({ name:"CodePlayer", age:18 ,students:["a1","a2"]});alert(result1);

note:这次传入的参数不是数组对象，所以调用for..in循环，对于最后一次调用buildParams传入的是一个数组，然后在buildParams里面继续对这个数组迭代，最后还是调用add方法放入数组s中!这时候传入的键值就是"students[]"等这种类型，所以他的键名最终会加上数组的标记!至于键值还是"a1"等数组!

总结：

（1）因为这个方法用于ajax请求参数的设定，所以要对键名和键值进行编码，调用了encodeURIComponent!如果是数组或者对象那么键名可能要加上[]，

（2）最后把数组成员通过&符号链接起来，并且把空格，也就是%20用+替换掉!这也是为什么在浏览器中输入中文空格全部变成加号的原因!