`

浅谈jQuery.extend()和jQuery.fn.extend()

阅读更多

最近在看一些jQuery的插件源码,发现了jQuery.extend()和jQuery.fn.extend()两个方法在插件中用到的频率非常高,在网上查询了下,说的要么是不清楚,要么就是不好理解。基于此,我写下自己的一些看些,希望大家指正。在JS中并没有类的概念,不过为了好解释或者是思想上的统一。我姑且把jQuery看成了一个类,方便理解。

找资源就上:去转盘(http://www.quzhuanpan.com

jQuery.extend(),是扩展的jQuery这个类。 
假设我们把jQuery这个类看成是人类,能吃饭能喝水能跑能跳,现在我们用jQuery.extend这个方法给这个类拓展一个能唱歌的技能。这样的话,不论是男人,女人,xx人…..等能继承这个技能(方法)了。

jQuery.extend({
        test:function(){
            alert("我是测试~");
        }
    }); 
$.test();    //弹出alert。test表明是jQuery的一个静态方法了

这个扩展也就是所谓的静态方法。只跟这个类(jQuery)本身有关。跟你具体的实例化对象$(“#ID”)是没关系滴。

Jquery的扩展方法原型是:   

extend(dest,src1,src2,src3...);

它的含义是将src1,src2,src3…合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:

var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。

这样就可以将src1,src2,src3…进行合并,然后将合并结果返回给newSrc了。如下例:

var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})

那么合并后的结果

  result={name:"Jerry",age:21,sex:"Boy"}

也就是说后面的参数如果和前面的参数存在相同的名称,那么后面的会覆盖前面的参数值。

省略dest参数 
上述的extend方法原型中的dest参数是可以省略的,如果省略了,则该方法就只能有一个src参数,而且是将该src合并到调用extend方法的对象中去,如: 
  1、$.extend(src) 
  该方法就是将src合并到jquery的全局对象中去,如:

 $.extend({
  hello:function(){alert('hello');}
  });

就是将hello方法合并到jquery的全局对象中。

jQuery.fn.extend(),是扩展的jQuery这个类的对象。

说白了就是得这么用(假设xyz()是拓展的方法): 
(‘selector′).xyz();你要是这么用.xyz();是会出错误滴。

(function($){
        $.fn.extend({
            xyz:function(){
                alert("我是测试对象的~~~");
            }
        });
    })(jQuery);

$("#ID").xyz();   //弹出alert,内容“我是测试对象的~~~”

总结,jQuery.extend()这个方法,主要是用来拓展个全局函数啦,例如.ajax()这种,要不就是拓展个选择器啦,例如.fn.each(),当选择器用。 
大部分插件都是用jQuery.fn.extend()。

附:Jquery的extend方法还有一个重载原型:

extend(boolean,dest,src1,src2,src3...)

第一个参数boolean代表是否进行深度拷贝,其余参数和前面介绍的一致,什么叫深层拷贝,我们看一个例子:

var result=$.extend( true,  {},  
    { name: "John", location: {city: "Boston",county:"USA"} },  
    { last: "Resig", location: {state: "MA",county:"China"} } ); 

我们可以看出src1中嵌套子对象location:{city:”Boston”},src2中也嵌套子对象location:{state:”MA”},第一个深度拷贝参数为true,那么合并后的结果就是:

result={name:"John",last:"Resig",
        location:{city:"Boston",state:"MA",county:"China"}}

也就是说它会将src中的嵌套子对象也进行合并,而如果第一个参数boolean为false,我们看看合并的结果是什么,如下:

var result=$.extend( false, {},  
{ name: "John", location:{city: "Boston",county:"USA"} },  
{ last: "Resig", location: {state: "MA",county:"China"} }  
                    ); 

那么合并后的结果就是:

 result={name:"John",last:"Resig",location:{state:"MA",county:"China"}}

以上就是$.extend()在项目中经常会使用到的一些细节

 

分享到:
评论

相关推荐

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

    在jQuery的API中,`jQuery.extend`和`jQuery.fn.extend`是两个重要的方法,它们用于合并对象属性,但作用范围和用途有所不同。本文将深入探讨这两个方法的差异,并通过实例解析它们的工作原理。 首先,`jQuery....

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

    jquery.fn.extend(object);给jQuery对象添加方法。 $.extend({  add:function(a,b){return a+b;} }); //$.add(3,4); //return 7 jQuery添加一个为 add的“静态方法”,之后便可以在引入 jQuery 的地方,使用这...

    jquery $.fn.extend

    `$.extend`可以用于浅复制或深复制对象,而`$.fn.extend`则是用来扩展jQuery的功能。两者在用途上有明显的区别,但它们的实现原理是相似的。 ### `$.fn.extend`的深度扩展 `$.fn.extend`也可以接受多个对象作为...

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

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

    jQuery.extend 函数详解

    通过本文的介绍,我们可以看到`jQuery.extend`是一个非常强大的工具,它不仅可以用来扩展jQuery的核心功能,还可以帮助开发者方便地管理和扩展自定义插件。理解它的不同用法和特性,对于提高前端开发效率和代码质量...

    jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析

    主要介绍了jQuery.extend 与 jQuery.fn.extend的用法及区别,结合实例形式分析了jQuery.extend与jQuery.fn.extend的功能、使用方法及区别,需要的朋友可以参考下

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

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 代码如下: jQuery.extend({ showName : ...

    深入理解jquery的$.extend()、$.fn和$.fn.extend()

    在jQuery中,`$.extend()`、`.fn`(即`jQuery.fn`)和`.fn.extend()`是开发者用于增强其功能和创建插件的关键部分。下面我们将详细探讨这三个概念。 1. `$.extend()` `$.extend()`方法用于合并一个或多个对象的属性...

    jQuery:jQuery.extend函数详解

    `jQuery.extend`不仅可以用于简单的对象合并,还可以用来扩展jQuery的静态方法和实例方法。 ##### 1. 扩展静态方法 通过使用`$.extend`,可以直接向jQuery全局对象中添加新的方法: ```javascript $.extend({ ...

    jquery.json-2.3.min.js和jquery.json-2.3.js

    jquery.json-2.3.min.js和jquery.json-2.3.js jQuery为开发插件提拱了两个方法,分别是:jQuery.extend(object); 为扩展jQuery类本身 jQuery.fn.extend(object);给jQuery对象添加方法。

    开发插件的两个方法jquery.fn.extend与jquery.extend

    jQuery为开发插件提拱了两个方法,分别是: JavaScript代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object)...

    jQuery.js中继承的实现.pdf

    `jQuery.fn`是jQuery对象的原型,因此`jQuery.fn.extend()`会将方法扩展到jQuery对象的实例上,使得实例可以直接调用这些方法。而`jQuery.extend()`则不会将方法扩展到实例上,这些方法通常需要通过jQuery类本身来...

    jQuery.fn和jQuery.prototype区别介绍

    在JavaScript和jQuery的世界里,`jQuery.fn...`jQuery.extend` 和 `jQuery.fn.extend` 分别用于扩展jQuery静态方法和实例方法。理解这些概念有助于更好地掌握jQuery的内部工作原理,以及如何有效地扩展和定制jQuery库。

    jquery的extend和fn.extend的使用说明

    jQuery为开发插件提拱了两个方法,分别是: 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象...

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

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

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

    在jQuery库中,`$.fn.extend` 和 `$.extend` 是两个非常重要的功能,它们用于扩展jQuery的功能和对象。这两个函数虽然名字相似,但作用却截然不同。 首先,`$.fn.extend` 是用于扩展jQuery选择器对象的方法。当你...

Global site tag (gtag.js) - Google Analytics