• jquery源码解析:each,makeArray,merge,grep,map详解


    jQuery的工具方法,其实就是静态方法,源码里面就是通过extend方法,把这些工具方法添加给jQuery构造函数的。

    jQuery.extend({ 

      ......    

      each: function( obj, callback, args ) {   //$.each(arr , function(i,value){}),第三个参数用于内部调用。此方法就是来遍历数组的,然后取数组中的值进行显示。不能改变原数组arr,跟map一样,但是map返回新数组,而each返回原数组。这里跟原生的forEach和map的回调方法参数不一样,原生的回调方法中,第三个参数是原数组,可以在回调方法中改变原数组的值。但jQuery的回调方法,不会传第三个参数。
        var value,
          i = 0,
          length = obj.length,
          isArray = isArraylike( obj );   //是否是类数组或数组,json(不包括jQuery这种对象形式)返回false

        if ( args ) {    //jQuery内部使用
          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;
              }
            }
          }

        }

        else {       //我们在外面调用时,执行的代码
          if ( isArray ) {   //如果是类数组
            for ( ; i < length; i++ ) {
              value = callback.call( obj[ i ], i, obj[ i ] );  //回调方法返回false就停止循环

              if ( value === false ) {
                break;
              }
            }
          }

          else {
            for ( i in obj ) {  //如果是json对象
              value = callback.call( obj[ i ], i, obj[ i ] );

              if ( value === false ) {
                break;
              }
            }
          }
        }

        return obj;
      }, 

      trim: function( text ) {   //core_trim是字符串的trim方法
        return text == null ? "" : core_trim.call( text );
      }, 

      makeArray: function( arr, results ) {  //把所有东西转换成数组,$.makeArray(json) -> [],第二个参数是给内部用的
        var ret = results || [];

        if ( arr != null ) {
          if ( isArraylike( Object(arr) ) ) {

          //如果arr为数字123,这里会返回false,因为number不是类数组。但是如果是字符串"hello",Object会把它转成具有length的json对象,所以就返回true。字符串是有length属性的。
            jQuery.merge( ret,
              typeof arr === "string" ?
                [ arr ] : arr
            );
          }

          else {    //如果传入123,就执行这里,把123push到数组中。假设有第二个参数,$.makeArray(123,{length:0}) ,那么就会出现[].push.call({length:0},123),这里我做了测试,是没有任何问题的,会变成{length:1,0:123}

            core_push.call( ret, arr );   
          }
        }

        return ret;
      },

      inArray: function( elem, arr, i ) {  //元素是否在arr数组中,从i位置开始找。core_indexOf=[].indexOf
        return arr == null ? -1 : core_indexOf.call( arr, elem, i );
      }, 

      merge: function( first, second ) {    //合并数组
        var l = second.length,
          i = first.length,
          j = 0;

        if ( typeof l === "number" ) {    //第二个参数,可能不是数组或类数组,特殊json。第一个参数必须是。
          for ( ; j < l; j++ ) {
            first[ i++ ] = second[ j ];
          }
        }

        else {
          while ( second[j] !== undefined ) {   //普通json的情况,{0:"0",1:"1"},但必须是0,1,2...这种
            first[ i++ ] = second[ j++ ];
          }
        }

        first.length = i;    //当第一个参数,不是数组时,比如是{0:"0",1:"1",length:2},length就需要手动改变

        return first;
      },   

      grep: function( elems, callback, inv ) {

      //过滤得到一个新数组,$.grep(arr,function(value,index){ return value>2}),arr数组中大于2的,才会返回生成数组。也就是返回true时,才会返回此值生成数组,第三个参数,true,就代表相反的(小于等于2)返回生成数组

        var retVal,
          ret = [],
          i = 0,
          length = elems.length;
        inv = !!inv;    //转换成true or false,不传的时候是undefined,就会变成fase.

        for ( ; i < length; i++ ) {
          retVal = !!callback( elems[ i ], i );    //转换成true or false
          if ( inv !== retVal ) {
            ret.push( elems[ i ] );
          }
        }

        return ret;
      },

      map: function( elems, callback, arg ) {  //支持普通json,数组,类数组,特殊json(jQuery对象形式)

      //$.map(arr,function(value,index){ return }),通过回调,把返回的值组成一个全新的数组,返回全新的数组。第三个参数内部调用
        var value,
          i = 0,
          length = elems.length,
          isArray = isArraylike( elems ),    //数组和类数组都可以,jQuery对象形式也可以
          ret = [];

        if ( isArray ) {
            for ( ; i < length; i++ ) {
              value = callback( elems[ i ], i, arg );

              if ( value != null ) {   //回调返回的值不是null或者undefined,就存入新数组中
                ret[ ret.length ] = value;
              }
            }

        }

        else {      //普通json就执行这里,比如:{name:"chaojidan",age:25}
            for ( i in elems ) {
              value = callback( elems[ i ], i, arg );//callback("chaojidan",name)

              if ( value != null ) {
                ret[ ret.length ] = value;
              }
            }
        }

        return core_concat.apply( [], ret );

        //core_concat=[].concat,以防回调方法返回的是数组形式,那么就会出现复合数组,比如:ret = [[1],[2],[3]],通过concat([1],[2],[3]),合并,返回[1,2,3]
      },

      ......

    })

    加油!

  • 相关阅读:
    day12-html(css)
    day-12- 前端 html
    python-day11 pymysql
    day11-mysql 练习题
    python-day11 Mysql 数据类操作
    python-day11 Mysql 数据类型
    python-day11-MYSQL 数据库及数据表
    最简单的checkbox, radio跟文字在一行
    前端压缩
    table td 设置宽高无效的问题
  • 原文地址:https://www.cnblogs.com/chaojidan/p/4156600.html
Copyright © 2020-2023  润新知