博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery.extend函数详细用法
阅读量:4465 次
发布时间:2019-06-08

本文共 3288 字,大约阅读时间需要 10 分钟。

 jQuery中的extend方法通过不同的参数实现了几种不同的继承方法:

1. extend(src), 扩展jQuery静态方法.

也就是说,将src对象的属性和方法逐一复制给jQuery

Java代码  
  1. $.extend({  
  2.   test:function(){alert('test函数')}  
  3.  })   

 

2. extend(dest,src1,src2,src3...srcN) ,合并多个对象.

为jQuery.extend(css1,css2)为例,css1,css2各有一些属性(方法照样会如此处理,这里只讲属性).

extend函数会把css2有而css2没有的属性加到css1中,如果css2的某个属性与css1的某个属性名称享用,就会用css2的属性去覆盖css1的同名属性。css1就是最后的整和对象。或者也可以用 :

var newcss = jquery.extend(css1,css2)  newcss就是合并的新对象。

var newcss = jquery.extend({},css1,css2) newcss就是合并的新对象.而且没有破坏css1的结构。

Java代码  
  1. //用法: jQuery.extend(obj1,obj2,obj3,..)  
  2. ar Css1={size: "10px",style: "oblique"}  
  3. var Css2={size: "12px",style: "oblique",weight: "bolder"}  
  4. $.jQuery.extend(Css1,Css2)  
  5. //结果:Css1的size属性被覆盖,而且继承了Css2的weight属性  
  6. // Css1 = {size: "12px",style: "oblique",weight: "bolder"}7  

 

 3.extend(boolean,dest,src1,src2...),深度镶套对象

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。

Java代码  
  1. // 以前的 .extend()     
  2.    jQuery.extend(     
  3.     { name: “John”, location: { city: “Boston” } },    
  4.     { last: “Resig”, location: { state: “MA” } }     
  5.    );     
  6.   // 结果:    
  7.   // => { name: “John”, last: “Resig”, location: { state: “MA” } }  
  8.   // 新的更深入的 .extend()     
  9.   jQuery.extend( true,     
  10.      { name: “John”, location: { city: “Boston” } },    
  11.      { last: “Resig”, location: { state: “MA” } }    
  12.  );     
  13.   // 结果     
  14.   // => { name: “John”, last: “Resig”,     
  15.   //      location: { city: “Boston”, state: “MA” } }  1617  

 

 与其他的类库不同的是,jQuery的extend方法提供了“深层拷贝”的功能,如果你传入的第一个参数为boolean型变量,则该变量为深层拷贝的标志,第二个参数为extend方法的目标对象,其余参数为需要进行继承的“父类”。如果第一个参数的值为true(深层拷贝),并且dest和src元素都包括相同名称的对象属性,则对该对象属性的方法和属性再进行一次复制。

    * 最后我们来通过分析源代码,来加深对该继承机制的理解:

jQuery.extend = jQuery.fn.extend = function() {

    // copy reference to target object
    var target = arguments[0] || {}, i = 1, length = arguments.length, deep = false, options;

    // Handle a deep copy situation  /*如果第一个参数为boolean值,则取第二个参数为目标对象*/

    if ( target.constructor == Boolean ) {
        deep = target;
        target = arguments[1] || {};
        // skip the boolean and the target
        i = 2;
    }

    // Handle case when target is a string or something (possible in deep copy)

    /*如果目标参数不是object或者function,那么就有可能是深度copy,*/
    if ( typeof target != "object" && typeof target != "function" )
        target = {};

    // extend jQuery itself if only one argument is passed /*如果参数长度为1,则将参数表示的对象的属性和方法复  制给jQuery本身*/

    if ( length == i ) {
        target = this;
        --i;
    }

    for ( ; i < length; i++ )

        // Only deal with non-null/undefined values当参数都为非空时,
        if ( (options = arguments[ i ]) != null )
            // Extend the base object
            for ( var name in options ) {
                var src = target[ name ], copy = options[ name ];

                // Prevent never-ending loop /*防止死循环*/

                if ( target === copy )
                    continue;

                // Recurse if we're merging object values/*深度继承的实现*/

                if ( deep && copy && typeof copy == "object" && !copy.nodeType )
                    target[ name ] = jQuery.extend( deep,
                        // Never move original objects, clone them
                        src || ( copy.length != null ? [ ] : { } )
                    , copy );

                // Don't bring in undefined values  /*正常情况下的继承实现*/

                else if ( copy !== undefined )
                    target[ name ] = copy;

            }

    // Return the modified object

    return target;
};

    * 注意:

在这里还有一个特殊的地方,就是在函数开头的地方有jQuery.extend = jQuery.fn.extend,而在程序的前面已经将jQuery.prototype赋值给jQuery.fn了,所以在后面的调用中会出现 jQuery.extend()和jQuery.fn.extend()的不同调用,这两个方法调用产生的结果也不一样,jQuery.extend() 的调用并不会把方法扩展到对象的实例上,引用它的方法也需要通过jQuery类来实现,如jQuery.init(),而 jQuery.fn.extend()的调用把方法扩展到了对象的prototype上,所以实例化一个jQuery对象的时候,它就具有了这些方法,这是很重要的,在jQuery.js中到处体现这一点

转载于:https://www.cnblogs.com/hfgb/p/4113137.html

你可能感兴趣的文章
结合实际业务场景聊一聊MVP模式的应用
查看>>
WinPE启动U盘的制作方法与软件下载(通用PE工具箱/老毛桃/大白菜WinPE)(转载)...
查看>>
行为型设计模式之5--中介者模式
查看>>
Android DevArt6:Android中IPC的六种方式
查看>>
PMP学习感想
查看>>
Zookeeper全解析——Paxos作为灵魂
查看>>
集合-强大的集合工具类:java.util.Collections中未包含的集合工具
查看>>
CSS清除浮动
查看>>
数据库基础-数据库常用命令总结
查看>>
java8 按对象属性值排序
查看>>
【转帖】国产x86处理器KX-6000发布
查看>>
04-js的运算符
查看>>
第三天 while循环 及其用法
查看>>
Delphi 10 seattle 去掉自带的代码连接线
查看>>
构建高并发高可用的电商平台架构实践(转)
查看>>
Geometry Imager Viewport Filter
查看>>
九度oj 题目1025:最大报销额
查看>>
数字及字符串
查看>>
【转载】OmniGraffle (二)基础绘图和模具
查看>>
一些提高开发效率的 Category
查看>>