利用jQuery对插件进行扩展时，方法$.extend()、$.fn.extend()区别与联系

 

利用JQ开发插件的方法：

 一、jQuery.extend();

 二、jQuery.fn.extend();

 三、经过$.widget()应用jQuery UI的部件工厂方式建立。

因为第三种方式一般用于开发比较高级的jQuery的部件，开发难度较大，因此第一种和第二种方式用的更为普遍，下面主要对前两种方式的区别和联系以及使用的方法作一些介绍。

 

 简要的说明一下： jQuery是一个封装的很是好的类，$(“#btn”)就至关于建立了一个jQuery的实例。

1、方法jQuery.fn .extend()= jQuery.prototype.extend()，也就是说利用方法二扩展插件至关于对jQuery的原型进行扩展，每一个实例化的对象均可以直接调用扩展的方法。如：

  $.fn.extend({

       Init:function(){

             本身写的代码

          }

          })

 经过$(“#btn”)实例化后就能够直接调用init方法，$(“#btn”).init().

2、经过方法1j传入一个参数时，进行插件的开发至关于对jQuery的静态方法进行了扩展，扩展的方法须要经过类来调用,如：$.extend({

                   Init:function(){};

                 } )

Init方法只能经过$.init()调用，由于它是静态的方法不能经过实例调用。

3、当方法一中传入了多个的参数时，能够经过$.extend()方法对对象进行扩展即用一个或多个其余对象来扩展一个对象，返回被扩展的对象Objectj Query.extend( target, object1, [objectN])

如：var settings = { validate: false, limit: 5, name: "foo" };

var options = { validate: true, name: "bar" };

jQuery.extend(settings, options);

结果：settings == { validate: true, limit: 5, name: "bar" } 经过结果能够知道，当后面对象与前面对象中具备同名的参数时前面的参数会被后面的参数给覆盖，没有的就合并。

可是这其中会有深度拷贝和浅拷贝的问题：

当方法中传入的第一个参数不为true时表示当前的拷贝为浅拷贝：

var a={};

var b={name:{age:19}};

$.extend(a,b)

a.name.age=100;

alert(b.name.age);//弹出的将会是100

（1）浅拷贝时若是对象b中具备对象，而后将b拷贝给a，且后面a对其做了修改则b对象中的对象也会改变，可是引用类型的将不会被修改。如：

  var a={};

  var b={age:19,name:{height:100}};

  $.extend(a,b)

  a.age=100;

  alert(b.age);//弹出的将会是19

（2）若是进行深拷贝则直接给方法1传入参数true就好，无论a 做何修改b对象的值都不会发生变化。

  var a={};

  var b={name:{age:19}};

  $.extend(true,a,b)

  a.name.age=100;

  alert(b.name.age);//弹出的将会是19

 

4、为了不和其余的js包发生冲突，同时避免$符号被重写，一般在扩展插件时会定义一个匿名的带有$为参数的函数来进行插件扩展。(function( $ ){

$.fn.tooltip = function( options ) {

};

})( jQuery );

//等价于

(function( $ ){

var tooltip = {

function(options){

     }

};

$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip

})( jQuery );

 直接定义一个匿名的函数而且调用同时传递参数jQuery，于是在后面的使用时$就表明的是jQuery。