首页 > 代码库 > JQuery_2.1.0_日记 4.29 $.extend

JQuery_2.1.0_日记 4.29 $.extend

2024-07-02 10:38:09   227人阅读

     因为在JQuery一切皆JQuery,所以JQuery没有EXT那么恐怖的继承体系,比起EXT的Ext.extends(),$.extend()函数还是很好理解的,只是把一个对象的属性和方法添加到目标对象上.刚出生的JQuery是很弱小的,JQuery源码后面和我们自己扩展都是通过$.extend()函数.
     
     Test_Html
     <body>
     <div id= "div1">div1</div ><div id= "div2">div2</div >
     <span id= "span1">span1</span ><span id= "span2">span2</span ><span id="span3" >span3 </span>
   </body>

   Test_Script
   $.extend(target, src);
   target.show();//function[native object]说明this是javascript内建对象构造函数

   $.extend(src);
   $.show();//function[native object]说明this是javascript内建对象构造函数,JQuery = function(){};

   $.fn.extend(src);
   $(‘div‘).show(); //function(selector, context)

   可以看到想扩展JQuery的静态方法和属性就$.extend,想扩展JQuery对象就用$.fn.extend,当然也可以扩展自己的简单js对象.

   再看$.extend()源码之前，先看一个深克隆和浅克隆的例子.
     
   浅克隆
   var target = {};
   var src = http://www.mamicode.com/{copy:{name:‘原始数据‘ }};
              
              
   $.extend(target, src);
   target.copy.name = ‘覆盖数据‘ ;
   alert(src.copy.name); //覆盖数据

   深克隆
   var target = {};
   var src = http://www.mamicode.com/{copy:{name:‘原始数据‘ }};
              
              
   $.extend(true, target, src);
   target.copy.name = ‘覆盖数据‘ ;
   alert(src.copy.name); //原始数据



   $.extend源码
   
jQuery.extend = jQuery.fn.extend = function() {
        var options, name, src, copy, copyIsArray, clone,
              target = arguments[0] || {},
              i = 1,
              length = arguments.length,
              deep = false ;

        // Handle a deep copy situation
        //如果第一个参数是boolean类型
        //修正参数,将第二个参数作为target
        if ( typeof target === "boolean" ) {
              deep = target;

               // skip the boolean and the target
              target = arguments[ i ] || {};
               //i++是为了后续 i === length的判断
              i++;
       }

        // Handle case when target is a string or something (possible in deep copy)
        //如果目标既不是对象也不是方法(例如给基本类型扩展属性方法和属性不会报错但是是无用的)，修正target为 js对象
        if ( typeof target !== "object" && !jQuery.isFunction(target) ) {
              target = {};
       }

        // extend jQuery itself if only one argument is passed
        //如果只有一个参数，修正对象为JQuery函数或JQuery对象
        if ( i === length ) {
              target = this ;
               //修正target所在位置,后面的都是要添加给target的对象
              i--;
       }

        for ( ; i < length; i++ ) {
               // Only deal with non-null/undefined values
               if ( (options = arguments[ i ]) != null ) {
                      // Extend the base object
                      for ( name in options ) {
                           src = http://www.mamicode.com/target[ name ];
                           copy = options[ name ];

                            // Prevent never-ending loop
                            //如果target和copy是同一个对象，略过，防止自己的属性引用了本身对象导致的循环引用,以致GC无法回收
                            if ( target === copy ) {
                                   continue ;
                           }

                            // Recurse if we‘re merging plain objects or arrays
                            //如果是deep为true，并且要添加给target的copy为对象获数组
                            if ( deep && copy && ( jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)) ) ) {
                                   if ( copyIsArray ) {
                                         copyIsArray = false ;
                                         clone = src && jQuery.isArray(src) ? src : [];

                                  } else {
                                         clone = src && jQuery.isPlainObject(src) ? src : {};
                                  }
                     
                                   // Never move original objects, clone them
                                   //很巧妙 ,用一个递归,实现引用对象的深克隆,递归的返回条件是属性石基本类型,基本类型都是深克隆
                                  target[ name ] = jQuery.extend( deep, clone, copy );

                            // Don‘t bring in undefined values
                           } else if ( copy !== undefined ) {
                                   //浅克隆
                                  target[ name ] = copy;
                           }
                     }
              }
       }

        // Return the modified object
        return target;
};
   

JQuery_2.1.0_日记 4.29 $.extend


联系
我们