jQuery庫中包括很多函數(shù),所以開發(fā)插件的時候往往就需要注意命名空間和私有作用域等方面,下面就由Shawn Khameneh老司機帶你解讀jQuery插件開發(fā)流程及相關(guān)注意點.

jquery插件開發(fā)模式

jquery插件一般有三種開發(fā)方式：

通過$.extend()來擴展jQuery

通過$.fn 向jQuery添加新的方法

通過$.widget()應(yīng)用jQuery UI的部件工廠方式創(chuàng)建

第一種$.extend()相對簡單，一般很少能夠獨立開發(fā)復(fù)雜插件，第三種是一種高級的開發(fā)模式，本文也不做介紹。第二種則是一般插件開發(fā)用到的方式，本文著重講講第二種。

插件開發(fā)

第二種插件開發(fā)方式一般是如下定義

$.fn.pluginName = function() {

  //your code here

}

插件開發(fā)，我們一般運用面向?qū)ο蟮乃季S方式

例如定義一個對象

var Haorooms= function(el, opt) {

  this.$element = el,

  this.defaults = {

    'color': 'red',

    'fontSize': '12px',

    'textDecoration':'none'

  },

  this.options = $.extend({}, this.defaults, opt)

}

//定義haorooms的方法

haorooms.prototype = {

  changecss: function() {

    return this.$element.css({

      'color': this.options.color,

      'fontSize': this.options.fontSize,

      'textDecoration': this.options.textDecoration

    });

  }

}

$.extend({}, this.defaults, opt)有{}主要是為了創(chuàng)建一個新對象，保留對象的默認(rèn)值。

$.fn.myPlugin = function(options) {

  //創(chuàng)建haorooms的實體

  var haorooms= new Haorooms(this, options);

  //調(diào)用其方法

  return Haorooms.changecss();

}

調(diào)用這個插件直接如下就可以

$(function() {

  $('a').myPlugin({

    'color': '#2C9929',

    'fontSize': '20px'

  });

})

上述開發(fā)方法的問題

上面的開發(fā)方法存在一個嚴(yán)重的問題，就是定義了一個全局的Haorooms，這樣對于插件的兼容等等各個方面都不好。萬一別的地方用到了Haorooms，那么你的代碼就悲催了！現(xiàn)在我們把上面的代碼包裝起來，用一個自調(diào)用匿名函數(shù)(有時又叫塊級作用域或者私有作用域)包裹，就不會出現(xiàn)這個問題了！包括js插件的開發(fā)，也是一樣的，我們用一個自調(diào)用匿名函數(shù)把自己寫的代碼包裹起來，就可以了！包裹方法如下：

(function(){

})()

用上面的這個包裹起來，就可以了。

但是還有一個問題，當(dāng)我們研究大牛的代碼的時候，前面經(jīng)常看到有“；”，那是為了避免代碼合并等不必要的錯誤。

例如，我們隨便定義一個函數(shù)：

var haoroomsblog=function(){

}

(function(){

  })()

由于haoroomsblog這個函數(shù)后面沒有加分號，導(dǎo)致代碼出錯，為了避免這類情況的發(fā)生，通常這么寫！

；(function(){

  })()

把你的插件代碼包裹在上面里面，就是一個簡單的插件了。（注js插件和jquery插件都是如此）

還有一個問題

把你的插件包裹在

；(function(){

  })()

基本上可以說是完美了。但是為了讓你開發(fā)的插件應(yīng)用更加廣泛，兼容性更加好，還要考慮到用插件的人的一些特殊的做法，例如，有些朋友為了避免jquery和zeptojs沖突，將jquery的前綴“$”,修改為“jQuery”，還有些朋友將默認(rèn)的document等方法修改。為了讓你的插件在這些東西修了了的情況下照常運行，那么我們的做法是，把代碼包裹在如下里面：

;(function($,window,document,undefined){

  //我們的代碼。。

})(jQuery,window,document);

就可以避免上面的一些情況了！

優(yōu)秀的示例

下面，我們有了一個插件的基本層次：

(function($) {

 var privateFunction = function() {

 // 代碼在這里運行

 }

 var methods = {

 init: function(options) {

  return this.each(function() {

  var $this = $(this);

  var settings = $this.data('pluginName');

  if(typeof(settings) == 'undefined') {

   var defaults = {

   propertyName: 'value',

   onSomeEvent: function() {}

   }

   settings = $.extend({}, defaults, options);

   $this.data('pluginName', settings);

  } else {

   settings = $.extend({}, settings, options);

  }

  // 代碼在這里運行

  });

 },

 destroy: function(options) {

  return $(this).each(function() {

  var $this = $(this);

  $this.removeData('pluginName');

  });

 },

 val: function(options) {

  var someValue = this.eq(0).html();

  return someValue;

 }

 };

 $.fn.pluginName = function() {

 var method = arguments[0];

 if(methods[method]) {

  method = methods[method];

  arguments = Array.prototype.slice.call(arguments, 1);

 } else if( typeof(method) == 'object' || !method ) {

  method = methods.init;

 } else {

  $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );

  return this;

 }

 return method.apply(this, arguments);

 }

})(jQuery);

你可能會注意到，我所提到代碼的結(jié)構(gòu)和其他插件代碼有很大的不同。根據(jù)你的使用和需求的不同，插件的開發(fā)方式也可能會呈現(xiàn)多樣化。我的目的是澄清代碼中的一些概念，足夠讓你找到適合自己的方法去理解和開發(fā)一個jQuery插件。

現(xiàn)在，來解剖我們的代碼吧！

容器：一個即時執(zhí)行函數(shù)

根本上來說，每個插件的代碼是被包含在一個即時執(zhí)行的函數(shù)當(dāng)中，如下：

(function(arg1, arg2) {

  // 代碼

})(arg1, arg2);

即時執(zhí)行函數(shù)，顧名思義，是一個函數(shù)。讓它與眾不同的是，它被包含在一對小括號里面，這讓所有的代碼都在匿名函數(shù)的局部作用域中運行。這并不是說DOM（全局變量）在函數(shù)內(nèi)是被屏蔽的，而是外部無法訪問到函數(shù)內(nèi)部的公共變量和對象命名空間。這是一個很好的開始，這樣你聲明你的變量和對象的時候，就不用擔(dān)心著變量名和已經(jīng)存在的代碼有沖突。

現(xiàn)在，因為函數(shù)內(nèi)部所有的所有公共變量是無法訪問的，這樣要把jQuery本身作為一個內(nèi)部的公共變量來使用就會成為問題。就像普通的函數(shù)一樣，即時函數(shù)也根據(jù)引用傳入對象參數(shù)。我們可以將jQuery對象傳入函數(shù)，如下：

(function($) {

  // 局部作用域中使用$來引用jQuery

})(jQuery);

我們傳入了一個把公共變量“jQuery”傳入了一個即時執(zhí)行的函數(shù)里面，在函數(shù)局部（容器）中我們可以通過“$”來引用它。也就是說，我們把容器當(dāng)做一個函數(shù)來調(diào)用，而這個函數(shù)的參數(shù)就是jQuery。因為我們引用的“jQuery”作為公共變量傳入，而不是它的簡寫“$”，這樣我們就可以兼容Prototype庫。如果你不用Prototype或者其它用“$”做簡寫的庫的話，你不這樣做也不會造成什么影響，但是知道這種用法仍是一件好事。

插件：一個函數(shù)

一個jQuery插件本質(zhì)上是我們?nèi)M(jìn)jQuery命名空間中一個龐大的函數(shù)，當(dāng)然，我們可以很輕易地用“jQuery.pluginName=function”，來達(dá)到我們的目的，但是如果我們這樣做的話我們的插件的代碼是處于沒有被保護的暴露狀態(tài)的。“jQuery.fn”是“jQuery.prototype”的簡寫，意味當(dāng)我們通過jQuery命名空間去獲取我們的插件的時候，它僅可寫（不可修改）。它事實上可以為你干點什么事呢？它讓你恰當(dāng)?shù)亟M織自己的代碼，和理解如何保護你的代碼不受運行時候不需要的修改。最好的說法就是，這是一個很好的實踐！

通過一個插件，我們獲得一個基本的jQuery函數(shù)：

(function($) {

 $.fn.pluginName = function(options) {

 // 代碼在此處運行

 return this;

 }

})(jQuery);

上面的代碼中的函數(shù)可以像其他的jQuery函數(shù)那樣通過“$(‘#element').pluginName()”來調(diào)用。注意，我是如何把“return this”語句加進(jìn)去的；這小片的代碼通過返回一個原來元素的集合（包含在this當(dāng)中）的引用來產(chǎn)生鏈?zhǔn)秸{(diào)用的效果，而這些元素是被一個jQuery對象所包裹的。你也應(yīng)該注意，“this”在這個特定的作用域中是一個jQuery對象，相當(dāng)于“$(‘#element')”。

根據(jù)返回的對象，我們可以總結(jié)出，在上面的代碼中，使用“$(‘#element').pluginName()”的效果和使用“$(‘#element')”的效果是一樣的。在你的即時執(zhí)行函數(shù)作用域中，沒必要用“$(this)”的方式來把this包裹到一個jQuery對象中，因為this本身已經(jīng)是被包裝好的jQuery對象。

多個元素：理解Sizzle

jQuery使用的選擇器引擎叫Sizzle，Sizzle可以為你的函數(shù)提供多元素操作（例如對所有類名相同的元素）。這是jQuery幾個優(yōu)秀的特性之一，但這也是你在開發(fā)插件過程中需要考慮的事情。即使你不準(zhǔn)備為你的插件提供多元素支持，但為這做準(zhǔn)備仍然是一個很好的實踐。

這里我添加了一小段代碼，它讓你的插件代碼為多元素集合中每個元素單獨地起作用：

function($) {

 // 向jQuery中被保護的“fn”命名空間中添加你的插件代碼，用“pluginName”作為插件的函數(shù)名稱

 $.fn.pluginName = function(options) {

 // 返回“this”（函數(shù)each（）的返回值也是this），以便進(jìn)行鏈?zhǔn)秸{(diào)用。

 return this.each(function() {

  // 此處運行代碼，可以通過“this”來獲得每個單獨的元素

  // 例如： $(this).show()；

  var $this = $(this);

 });

 }

})(jQuery);

在以上示例代碼中，我并不是用 each（）在我的選擇器中每個元素上運行代碼。在那個被 each（）調(diào)用的函數(shù)的局部作用域中，你可以通過this來引用每個被單獨處理的元素，也就是說你可以通過$(this)來引用它的jQuery對象。在局部作用域中，我用$this變量存儲起jQuery對象，而不是每次調(diào)用函數(shù)的時候都使用$(this)，這會是個很好的實踐。當(dāng)然，這樣做并不總是必要的；但我已經(jīng)額外把它包含在我的代碼中。還有要注意的是，我們將會對每個單獨方法都使用 each（），這樣到時我們就可以返回我們需要的值，而不是一個jQuery對象。

下面是一個例子，假如我們的插件支持一個 val 的方法，它可以返回我們需要的值：

$('#element').pluginName('val');

// 會返回我們需要的值，而不是一個jQuery對象

功能：公有方法和私有方法

一個基本的函數(shù)可能在某些情況下可以良好地工作，但是一個稍微復(fù)雜一點的插件就需要提供各種各樣的方法和私有函數(shù)。你可能會使用不同的命名空間去為你的插件提供各種方法，但是最好不要讓你的源代碼因為多余的命名空間而變得混亂。

下面的代碼定義了一個存儲公有方法的JSON對象，以及展示了如何使用插件中的主函數(shù)中去判斷哪些方法被調(diào)用，和如何在讓方法作用到選擇器每個元素上。

(function($) {

 // 在我們插件容器內(nèi)，創(chuàng)造一個公共變量來構(gòu)建一個私有方法

 var privateFunction = function() {

 // code here

 }

 // 通過字面量創(chuàng)造一個對象，存儲我們需要的共有方法

 var methods = {

 // 在字面量對象中定義每個單獨的方法

 init: function() {

  // 為了更好的靈活性，對來自主函數(shù)，并進(jìn)入每個方法中的選擇器其中的每個單獨的元素都執(zhí)行代碼

  return this.each(function() {

  // 為每個獨立的元素創(chuàng)建一個jQuery對象

  var $this = $(this);

  // 執(zhí)行代碼

  // 例如： privateFunction();

  });

 },

 destroy: function() {

  // 對選擇器每個元素都執(zhí)行方法

  return this.each(function() {

  // 執(zhí)行代碼

  });

 }

 };

 $.fn.pluginName = function() {

 // 獲取我們的方法，遺憾的是，如果我們用function(method){}來實現(xiàn)，這樣會毀掉一切的

 var method = arguments[0];

 // 檢驗方法是否存在

 if(methods[method]) {

  // 如果方法存在，存儲起來以便使用

  // 注意：我這樣做是為了等下更方便地使用each（）

  method = methods[method];

 // 如果方法不存在，檢驗對象是否為一個對象（JSON對象）或者method方法沒有被傳入

 } else if( typeof(method) == 'object' || !method ) {

  // 如果我們傳入的是一個對象參數(shù)，或者根本沒有參數(shù)，init方法會被調(diào)用

  method = methods.init;

 } else {

  // 如果方法不存在或者參數(shù)沒傳入，則報出錯誤。需要調(diào)用的方法沒有被正確調(diào)用

  $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );

  return this;

 }

 // 調(diào)用我們選中的方法

 // 再一次注意我們是如何將each（）從這里轉(zhuǎn)移到每個單獨的方法上的

 return method.call(this);

 }

})(jQuery);

注意我把 privateFunction 當(dāng)做了一個函數(shù)內(nèi)部的全局變量?？紤]到所有的代碼的運行都是在插件容器內(nèi)進(jìn)行的，所以這種做法是可以被接受的，因為它只在插件的作用域中可用。在插件中的主函數(shù)中，我檢驗了傳入?yún)?shù)所指向的方法是否存在。如果方法不存在或者傳入的是參數(shù)為對象， init 方法會被運行。最后，如果傳入的參數(shù)不是一個對象而是一個不存在的方法，我們會報出一個錯誤信息。

同樣要注意的是，我是如何在每個方法中都使用 this.each() 的。當(dāng)我們在主函數(shù)中調(diào)用 method.call(this) 的時候，這里的 this 事實上就是一個jQuery對象，作為 this 傳入每個方法中。所以在我們方法的即時作用域中，它已經(jīng)是一個jQuery對象。只有在被 each（）所調(diào)用的函數(shù)中，我們才有必要將this包裝在一個jQuery對象中。

下面是一些用法的例子：

/*

 注意這些例子可以在目前的插件代碼中正確運行，并不是所有的插件都使用同樣的代碼結(jié)構(gòu) 

*/

// 為每個類名為 ".className" 的元素執(zhí)行init方法

$('.className').pluginName();

$('.className').pluginName('init');

$('.className').pluginName('init', {}); // 向init方法傳入“{}”對象作為函數(shù)參數(shù)

$('.className').pluginName({}); // 向init方法傳入“{}”對象作為函數(shù)參數(shù)

// 為每個類名為 “.className” 的元素執(zhí)行destroy方法

$('.className').pluginName('destroy');

$('.className').pluginName('destroy', {}); // 向destroy方法傳入“{}”對象作為函數(shù)參數(shù)

// 所有代碼都可以正常運行

$('.className').pluginName('init', 'argument1', 'argument2'); // 把 "argument 1" 和 "argument 2" 傳入 "init"

// 不正確的使用

$('.className').pluginName('nonexistantMethod');

$('.className').pluginName('nonexistantMethod', {});

$('.className').pluginName('argument 1'); // 會嘗試調(diào)用 "argument 1" 方法

$('.className').pluginName('argument 1', 'argument 2'); // 會嘗試調(diào)用 "argument 1" ，“argument 2”方法

$('.className').pluginName('privateFunction'); // 'privateFunction' 不是一個方法

在上面的例子中多次出現(xiàn)了 {} ，表示的是傳入方法中的參數(shù)。在這小節(jié)中，上面代碼可以可以正常運行，但是參數(shù)不會被傳入方法中。繼續(xù)閱讀下一小節(jié)，你會知道如何向方法傳入?yún)?shù)。   設(shè)置插件：傳入?yún)?shù) 許多插件都支持參數(shù)傳入，如配置參數(shù)和回調(diào)函數(shù)。你可以通過傳入JS鍵值對對象或者函數(shù)參數(shù)，為方法提供信息。如果你的方法支持多于一個或兩個參數(shù)，那么沒有比傳入對象參數(shù)更恰當(dāng)?shù)姆绞健?/P>

(function($) {

 var methods = {

 init: function(options) {

  // 在每個元素上執(zhí)行方法

  return this.each(function() {

  var $this = $(this);

  // 創(chuàng)建一個默認(rèn)設(shè)置對象

  var defaults = {

   propertyName: 'value',

   onSomeEvent: function() {}

  }

  // 使用extend方法從options和defaults對象中構(gòu)造出一個settings對象

  var settings = $.extend({}, defaults, options);

  // 執(zhí)行代碼

  });

 }

 };

 $.fn.pluginName = function() {

 var method = arguments[0];

 if(methods[method]) {

  method = methods[method];

  // 我們的方法是作為參數(shù)傳入的，把它從參數(shù)列表中刪除，因為調(diào)用方法時并不需要它

  arguments = Array.prototype.slice.call(arguments, 1);

 } else if( typeof(method) == 'object' || !method ) {

  method = methods.init;

 } else {

  $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );

  return this;

 }

 // 用apply方法來調(diào)用我們的方法并傳入?yún)?shù)

 return method.apply(this, arguments);

 }

})(jQuery);

正如上面所示，一個“options”參數(shù)被添加到方法當(dāng)中，和“arguments”也被添加到了主函數(shù)中。如果一個方法已經(jīng)被聲明，在參數(shù)傳入方法之前，調(diào)用那個方法的參數(shù)會從參數(shù)列表中刪除掉。我用了“apply（）”來代替了“call（）”，“apply（）”本質(zhì)上是和“call（）”做著同樣的工作的，但不同的是它允許參數(shù)的傳入。這種結(jié)構(gòu)也允許多個參數(shù)的傳入，如果你愿意這樣做，你也可以為你的方法修改參數(shù)列表，例如：“init:function(arg1, arg2){}”。

如果你是使用JS對象作為參數(shù)傳入，你可能需要定義一個默認(rèn)對象。一旦默認(rèn)對象被聲明，你可以使用“$.extend”來合并參數(shù)對象和默認(rèn)對象中的值，以形成一個新的參數(shù)對象來使用（在我們的例子中就是“settings”）；

這里有一些例子，用來演示以上的邏輯：

var options = {

 customParameter: 'Test 1',

 propertyName: 'Test 2'

}

var defaults = {

 propertyName: 'Test 3',

 onSomeEvent: 'Test 4'

}

var settings = $.extend({}, defaults, options);

/*

settings == {

 propertyName: 'Test 2',

 onSomeEvent: 'Test 4',

 customParameter: 'Test 1'

}

*/

保存設(shè)置：添加持久性數(shù)據(jù)

有時你會想在你的插件中保存設(shè)置和信息，這時jQuery中的“data（）”函數(shù)就可以派上用場了。它在使用上是非常簡單的，它會嘗試獲取和元素相關(guān)的數(shù)據(jù)，如果數(shù)據(jù)不存在，它就會創(chuàng)造相應(yīng)的數(shù)據(jù)并添加到元素上。一旦你使用了“data（）”來為元素添加信息，請確認(rèn)你已經(jīng)記住，當(dāng)不再需要數(shù)據(jù)的時候，用“removeData（）”來刪除相應(yīng)的數(shù)據(jù)。

(function($) {

 var privateFunction = function() {

 // 執(zhí)行代碼

 }

 var methods = {

 init: function(options) {

  // 在每個元素上執(zhí)行方法

  return this.each(function() {

  var $this = $(this);

  // 嘗試去獲取settings，如果不存在，則返回“undefined”

  var settings = $this.data('pluginName');

  // 如果獲取settings失敗，則根據(jù)options和default創(chuàng)建它

  if(typeof(settings) == 'undefined') {

   var defaults = {

   propertyName: 'value',

   onSomeEvent: function() {}

   }

   settings = $.extend({}, defaults, options);

   // 保存我們新創(chuàng)建的settings

   $this.data('pluginName', settings);

  } else {

   / 如果我們獲取了settings，則將它和options進(jìn)行合并（這不是必須的，你可以選擇不這樣做）

   settings = $.extend({}, settings, options);

   // 如果你想每次都保存options，可以添加下面代碼：

   // $this.data('pluginName', settings);

  }

  // 執(zhí)行代碼

  });

 },

 destroy: function(options) {

  // 在每個元素中執(zhí)行代碼

  return $(this).each(function() {

  var $this = $(this);

  // 執(zhí)行代碼

  // 刪除元素對應(yīng)的數(shù)據(jù)

  $this.removeData('pluginName');

  });

 },

 val: function(options) {

  // 這里的代碼通過.eq(0)來獲取選擇器中的第一個元素的，我們或獲取它的HTML內(nèi)容作為我們的返回值

  var someValue = this.eq(0).html();

  // 返回值

  return someValue;

 }

 };

 $.fn.pluginName = function() {

 var method = arguments[0];

 if(methods[method]) {

  method = methods[method];

  arguments = Array.prototype.slice.call(arguments, 1);

 } else if( typeof(method) == 'object' || !method ) {

  method = methods.init;

 } else {

  $.error( 'Method ' + method + ' does not exist on jQuery.pluginName' );

  return this;

 }

 return method.apply(this, arguments);

 }

})(jQuery);

在上面的代碼中，我檢驗了元素的數(shù)據(jù)是否存在。如果數(shù)據(jù)不存在，“options”和“default”會被合并，構(gòu)建成一個新的settings，然后用“data（）”保存在元素中。