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

 

利用JQ开发插件的方法：

 1、jQuery.extend();

 2、jQuery.fn.extend();

 3、通过$.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。