利用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。