jQuery中工具方法$.aaa()的源码分析

来源:互联网 发布:js对象 extend 编辑:程序博客网 时间:2024/06/16 03:11

each():

// args is for internal usage onlyeach: function( obj, callback, args ) {var value,i = 0,length = obj.length,//数组、类数组和this指针都有length属性,但是{}没有length属性isArray = isArraylike( obj );//数组、类数组和this指针返回true        //args参数为真,内部使用if ( args ) {if ( isArray ) {for ( ; i < length; i++ ) {value = callback.apply( obj[ i ], args );if ( value === false ) {break;}}} else {for ( i in obj ) {value = callback.apply( obj[ i ], args );if ( value === false ) {break;}}}// A special, fast, case for the most common use of each} else {//如果是数组 类数组或this,使用for语句进行循环if ( isArray ) {for ( ; i < length; i++ ) {value = callback.call( obj[ i ], i, obj[ i ] );//将下标和对应的元素传给回调函数if ( value === false ) {break;//用来终止循环遍历}}} else {//如果是{}则使用for(...in ...)进行遍历for ( i in obj ) {value = callback.call( obj[ i ], i, obj[ i ] );if ( value === false ) {break;}}}}return obj;},


jQuery中的类数组判断:

vardiv1={0:'a',2:'b',length:0};vardiv2={0:'a',2:'b',length:2};vardiv3={0:'a',2:'b',length:3};function isArraylike( obj ) {     var length = obj.length,     type = jQuery.type( obj );       if ( jQuery.isWindow( obj ) ) {       return false;        }if ( obj.nodeType === 1 && length ) {alert(1);return true;}    //length===0,是因为arguments,没有参数的情况    return type === "array" || type !== "function" &&( length === 0 ||typeof length === "number" && length > 0 && ( length - 1 ) in obj );}console.log(isArraylike(div1));//true length是0,就是类数组console.log(isArraylike(div2));//falseconsole.log(isArraylike(div3));//true


map():会返回一个新的数组。

// arg is for internal usage onlymap: function( elems, callback, arg ) {var value,i = 0,length = elems.length,isArray = isArraylike( elems ),ret = [];// Go through the array, translating each of the items to theirif ( isArray ) {for ( ; i < length; i++ ) {value = callback( elems[ i ], i, arg );if ( value != null ) {ret[ ret.length ] = value;}}// Go through every key on the object,} else {for ( i in elems ) {value = callback( elems[ i ], i, arg );if ( value != null ) {ret[ ret.length ] = value;}}}// Flatten any nested arraysreturn core_concat.apply( [], ret );//将数组变为简单数组[[1],[2],[3]]变为[1,2,3]},


grep():过滤数组

//当inv为true时,将不满足条件的元素组成新数组数组并返回grep: function( elems, callback, inv ) {var retVal,ret = [],i = 0,length = elems.length;inv = !!inv; //inv未写这个参数时是undefined,前面加!!会转变为false// Go through the array, only saving the items// that pass the validator functionfor ( ; i < length; i++ ) {retVal = !!callback( elems[ i ], i );if ( inv !== retVal ) {ret.push( elems[ i ] );}}return ret;},


当没有设置参数inv时:
 var arr=[1,2,3,4] ;   arr1=$.grep(arr,function(value,i){   return value>2;   });   alert(arr);//1,2,3,4   alert(arr1);//3,4
当inv时true时:

arr1=$.grep(arr,function(value,i){   return value>2;   },true);   alert(arr);//1,2,3,4   alert(arr1);//1,2

merge():合并数组

merge: function( first, second ) {//{}没有length属性,但有一种特殊的,如{0:,1:,length:2},可以当做数组看待var l = second.length,i = first.length,j = 0;if ( typeof l === "number" ) {for ( ; j < l; j++ ) {first[ i++ ] = second[ j ];}} else {//用来处理没有length属性,但属性名字是0,1,2...{0:,1:,2:..}while ( second[j] !== undefined ) {first[ i++ ] = second[ j++ ];}}first.length = i;return first;},
merge()可以使下列四种形式:

$.merge(['a','b'],['c','d']);$.merge(['a','b'],{0:'c',1:'d'});$.merge({0:'a',1:'b',length:2},{0:'c',1:'d'});$.merge({0:'a',1:'b',length:2},['c','d']) ;


makeArray():类数组转真数组:

//result参数是内部使用,我们使用时,用一个参数,返回真数组makeArray: function( arr, results ) {var ret = results || [];if ( arr != null ) {if ( isArraylike( Object(arr) ) ) {//Object("hello")是类数组//如果是类数组,则进行数组合并,如果不是,就用push()方法jQuery.merge( ret,typeof arr === "string" ?[ arr ] : arr);} else {core_push.call( ret, arr );//如果不是类数组元素,直接用数组方法push}}return ret;},