`
xinyao
  • 浏览: 99119 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery.extend函数学习

阅读更多
jQuery中的extend方法通过不同的参数实现了几种不同的继承方法:
转载:http://yyang1986321.iteye.com/blog/592318
便于以后查看!

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

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

$.extend({   
  test:function(){alert('test函数')}   
 }) 
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的结构。
//用法: jQuery.extend(obj1,obj2,obj3,..)   
ar Css1={size: "10px",style: "oblique"}   
var Css2={size: "12px",style: "oblique",weight: "bolder"}   
$.jQuery.extend(Css1,Css2)   
//结果:Css1的size属性被覆盖,而且继承了Css2的weight属性   
// Css1 = {size: "12px",style: "oblique",weight: "bolder"}7 

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

新的extend()允许你更深度的合并镶套对象。下面的例子是一个很好的证明。
// 以前的 .extend()      
   jQuery.extend(      
    { name: “John”, location: { city: “Boston” } },     
    { last: “Resig”, location: { state: “MA” } }      
   );      
  // 结果:     
  // => { name: “John”, last: “Resig”, location: { state: “MA” } }   
  // 新的更深入的 .extend()      
  jQuery.extend( true,      
     { name: “John”, location: { city: “Boston” } },     
     { last: “Resig”, location: { state: “MA” } }     
 );      
  // 结果      
  // => { name: “John”, last: “Resig”,      
  //      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中到处体现这一点

分享到:
评论

相关推荐

    jQuery.extend和jQuery.fn.extend的区别

    其次,`jQuery.fn.extend`是jQuery的一个重要特性,它用于扩展jQuery的函数集,也就是jQuery对象的方法。`jQuery.fn`实际上是`jQuery.prototype`的别名,因此`jQuery.fn.extend`实际上是在原型对象上添加新方法。...

    jQuery.extend 函数详解

    ### jQuery.extend 函数详解 #### 一、概述 在JavaScript前端开发中,jQuery是一个非常流行的库,它简化了许多常见的操作,比如DOM操作、事件处理、AJAX交互等。`jQuery.extend`是jQuery提供的一个用于扩展jQuery...

    jQuery:jQuery.extend函数详解

    ### jQuery.extend函数详解 #### 一、概述 `jQuery.extend`是jQuery库中一个非常实用且功能强大的函数,主要用于合并两个或多个对象的属性至一个新的对象中。这使得开发人员能够在编写插件或其他代码时方便地扩展...

    jQuery.extend

    jQuery.extend提供了一个机会让你自定义合并规则,通过传递一个函数作为第一个参数,该函数将在合并属性时被调用。函数有两个参数,分别是当前属性的值和源属性的值。返回值将决定目标对象最终的属性值。 ```...

    浅谈jquery.fn.extend与jquery.extend区别

    1.jquery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jquery.fn.extend(object);给jQuery对象添加方法。... 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使

    Jquery实现$.fn.extend和$.extend函数_.docx

    在JavaScript中,jQuery库提供了两种扩展对象的方法,即`$.fn.extend`和`$.extend`。它们都用于增加或修改现有对象的功能,但应用场景不同。本文将深入解析这两种方法的实现原理和用途。 首先,`$.fn.extend`是用于...

    jQuery.js中继承的实现.pdf

    jQuery.js库提供了一种优雅的解决方案,通过`jQuery.extend()`方法实现了对象的继承功能。这个方法在jQuery中扮演着至关重要的角色,它不仅用于合并对象,还用于实现类之间的继承。 `jQuery.extend()`方法的基本...

    jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : function(name){ alert&#40;name&#41; } }); jQuery.showName...

    jquery $.fn.extend

    这个方法允许开发者自定义jQuery的函数,从而实现对DOM元素的操作或添加新的功能。在jQuery中,`$.fn`实际上是`$.prototype`的一个别名,因此`$.fn.extend`就是在扩展jQuery的原型,使得每个jQuery实例都可以访问到...

    Jquery.json.js

    jQuery提供了方便的方法来处理JSON数据,包括`$.getJSON()`和`$.ajax()`等函数,可以方便地从服务器获取JSON数据并将其转化为JavaScript对象,或者将JavaScript对象转换为JSON字符串发送到服务器。 **jQuery的get...

    模仿JQuery.extend函数扩展自己对象的js代码

    在本文中,我们将深入理解这个概念,并模仿 `JQuery.extend` 来创建一个自定义的扩展函数。 首先,让我们回顾一下 `JQuery.extend` 的基本用法。它接受一个或多个对象作为参数,并将这些对象的属性合并到第一个对象...

    jquery.validate.js表单验证.pdf

    8. jQuery.extend使用:在引入自定义验证信息时,文件展示了如何使用jQuery.extend方法来扩展$.validator.messages对象。 综上所述,jquery.validate.js提供了一个非常便捷的方式来实现表单验证,通过引入相应的JS...

    jQuery.extend 函数的详细用法

    `jQuery.extend` 是 jQuery 库中的一个非常重要的函数,它用于合并一个或多个对象到一个目标对象中。这个函数在创建自定义插件、配置默认选项以及处理对象属性时非常有用。下面我们将深入探讨 `jQuery.extend` 的...

    jQuery.extend 函数及用法详细

    jquery.extend函数详解 JQuery的extend扩展方法:  Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解。 一、Jquery的扩展方法原型是: extend(dest,src1...

    jQuery学习笔记之jQuery.extend(),jQuery.fn.extend()分析

    在jQuery库中,`jQuery.extend()` 和 `jQuery.fn.extend()` 是两种非常重要的方法,它们用于扩展和合并对象的属性。这两个方法在开发自定义插件或进行jQuery对象的定制时非常常见。 `jQuery.extend()` 用于合并一个...

    jQuery.js执行过程分析

    ### jQuery.js执行过程深入解析 #### 一、概述 jQuery是一个快速、简洁的JavaScript库,其设计宗旨是“写得更少,做得更...通过学习和实践,我们可以更好地利用jQuery的强大功能,提升Web应用的开发效率和用户体验。

Global site tag (gtag.js) - Google Analytics