详解jQuery插件开发中的extend方法

Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型，
dest是要整合的空间可以使{} 或者不写

src是一个JSON表达式表示的javascript对象.... 因此里面可以添加方法属性等等...

我么通过不同的应用可以将我们自己的方法整合到jQuery空间中....实现插件开发

在jQuery中定义  jQuery.extend = jQuery.fn.extend  所以这两个函数式相同的

 一、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的全局对象中。
2、$.fn.extend(src)
该方法将src合并到jquery的实例对象中去，如:


代码如下:

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

就是将hello方法合并到jquery的实例对象中。

下面例举几个常用的扩展实例：

$.extend({net:{}});

这是在jquery全局对象中扩展一个net命名空间。


代码如下:

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

这是将hello方法扩展到之前扩展的Jquery的net命名空间中去。

三、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()在项目中经常会使用到的一些细节。

赞 (0)

相关推荐

  • jQuery.extend()的实现方式详解及实例

    复制代码 代码如下: <script type="text/javascript" src="jquery-1.5.2.js"></script><script>obj1 = { a : 'a', b : 'b' };obj2 = {  x : { xxx : 'xxx', yyy : 'yyy' },  y : 'y' }; $.extend(true, obj1, obj2); alert(obj1.x.xxx);  // 得

  • jQuery中extend()和fn.extend()方法详解

    这两个方法用的是相同的代码,一个用于给jQuery对象或者普通对象合并属性和方法一个是针对jQuery对象的实例,对于基本用法举几个例子: html代码如下: 复制代码 代码如下: <!doctype html> <html>    <head>       <title></title>         <script src='jquery-1.7.1.js'></script>    </head>   

  • jQuery中extend函数的实现原理详解

    jQuery中extend函数的实现原理详解

    extend()是jQuery中一个重要的函数,作用是实现对对象的扩展, 它经常用于jQuery插件的开发,jQuery内部也使用它来扩展属性方法,如上篇文章中讲到的noConflict方法,就是用extend方法来扩展的. 在jQuery的API手册中,我们看到,extend实际上是挂载在jQuery和jQuery.fn上的两个不同方法,尽管在jQuery内部jQuery.extend()和jQuery.fn.extend()是用相同的代码实现的,但是它们的功能却不太一样.来看一下官方API对

  • jQuery插件开发的两种方法及$.fn.extend的详解

    jQuery插件开发分为两种: 1 类级别 类级别你可以理解为拓展jquery类,最明显的例子是$.ajax(...),相当于静态方法. 开发扩展其方法时使用$.extend方法,即jQuery.extend(object); 复制代码 代码如下: $.extend({ add:function(a,b){return a+b;} , minus:function(a,b){return a-b;} }); 页面中调用: 复制代码 代码如下: var i = $.add(3,2); var j

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

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用

  • jQuery源码解读之extend()与工具方法、实例方法详解

    本文实例讲述了jQuery源码解读之extend()与工具方法.实例方法.分享给大家供大家参考,具体如下: 使用jQuery的时候会发现,jQuery中有的函数是这样使用的: $.get(); $.post(); $.getJSON(); 有些函数是这样使用的: $('div').css(); $('ul').find('li'); 有些函数是这样使用的: $('li').each(callback); $.each(lis,callback); 这里涉及到两个概念:工具方法与实例方法.通常我们

  • jQuery.extend 函数详解

    JQuery的extend扩展方法: Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. 一.Jquery的扩展方法原型是: 复制代码 代码如下: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: 复制代码 代码

  • jQuery.extend 函数的详细用法

    Jquery的扩展方法extend是我们在写插件的过程中常用的方法,该方法有一些重载原型,在此,我们一起去了解了解. Jquery的扩展方法原型是: extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的.如果想要得到合并的结果却又不想修改dest的结构,可以如下使用: var newSrc=$.extend({},src1,src2,src3..

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

    jQuery为开发插件提拱了两个方法,分别是: 复制代码 代码如下: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法. fn 是什么东西呢.查看jQuery代码,就不难发现. 复制代码 代码如下: jQuery.fn = jQuery.prototype = { init: fu

  • Jquery中扩展方法extend使用技巧

    在使用Jquery开发的过程中,extend是常用的参数处理函数,特别是对默认值的使用. Jquery的扩展方法原型是: var v=$.extend(dest,src1,src2,[,src3...]); 作用是把src1,src2,src3合并到到dest中并返回合并后的dest. 但是在使用过程中,默认值往往是不能被改变的, 如下: var defaut={'selector':'select','default':'默认值','backcolor':'#85e137','forecolo

  • jQuery $.extend()用法总结

    jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法. jQuery.fn.extend(object);给jQuery对象添加方法.这个应该很好理解吧.举个例子. 复制代码 代码如下: <span style="font-size:18px;"><html> <head>

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

    但在写的过程中发现,如果要在之前写好的对象中添加新的静态方法或实例方法,要修改原有的对象结构,于是查看了jquery了extend方法,果然extend方法支持了jq的半边天,拿来主义,给自己的对象做扩张用. 下面进入正题: 假如有以下一个对象 复制代码 代码如下: var MyMath = { //加法 Add: function(a, b){ return a + b; }, //减法 Sub: function(a, b){ return a - b; } } 对象名MyMath,有两个静

随机推荐