jQuery 插件開發全解析

時間 2019-11-24

原文原文鏈接

jQuery插件的開發包括兩種：javascript

一種是類級別的插件開發，即給jQuery添加新的全局函數，至關於給jQuery類自己添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數，另外一種是對象級別的插件開發，即給jQuery對象添加方法。下面就兩種函數的開發作詳細的說明。css

1、類級別的插件開發html

類級別的插件開發最直接的理解就是給jQuery類添加類方法，能夠理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類級別的插件開發能夠採用以下幾種形式進行擴展：java

1.1 添加一個新的全局函數閉包

添加一個全局函數，咱們只需以下定義： ide

Java代碼

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};

1.2 增長多個全局函數函數

添加多個全局函數，可採用以下定義：測試

Java代碼

jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
jQuery.bar = function(param) {
alert('This function takes a parameter, which is "' + param + '".');
};
調用時和一個函數的同樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');

1.3 使用jQuery.extend(object);　優化

Java代碼

jQuery.extend({
foo: function() {
alert('This is a test. This is only a test.');
},
bar: function(param) {
alert('This function takes a parameter, which is "' + param +'".');
}
});

1.4 使用命名空間ui

雖然在jQuery命名空間中，咱們禁止使用了大量的javaScript函數名和變量名。可是仍然不可避免某些函數或變量名將於其餘jQuery插件衝突，所以咱們習慣將一些方法封裝到另外一個自定義的命名空間。

Java代碼

jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};
採用命名空間的函數仍然是全局函數，調用時採用的方法：
$.myPlugin.foo();
$.myPlugin.bar('baz');

經過這個技巧（使用獨立的插件名），咱們能夠避免命名空間內函數的衝突。

2、對象級別的插件開發

對象級別的插件開發須要以下的兩種形式：、

形式1：

Java代碼

(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes here.
}
})
})(jQuery);

形式2：

Java代碼

(function($) {
$.fn.pluginName = function() {
// Our plugin implementation code goes here.
};
})(jQuery);

上面定義了一個 jQuery 函數 , 形參是 $ ，函數定義完成以後 , 把 jQuery 這個實參傳遞進去 . 當即調用執行。這樣的好處是 , 咱們在寫 jQuery 插件時 , 也可使用 $ 這個別名 , 而不會與 prototype 引發衝突 .

2.1 在JQuery名稱空間下申明一個名字

這是一個單一插件的腳本。若是你的腳本中包含多個插件，或者互逆的插件（例如： $.fn.doSomething() 和 $.fn.undoSomething()），那麼你須要聲明多個函數名字。可是，一般當咱們編寫一個插件時，力求僅使用一個名字來包含它的全部內容。咱們的示例插件命名爲「highlight「

Java代碼

$.fn.hilight = function() {
// Our plugin implementation code goes here.
};
咱們的插件經過這樣被調用：
$('#myDiv').hilight();

可是若是咱們須要分解咱們的實現代碼爲多個函數該怎麼辦？有不少緣由：設計上的須要；這樣作更容易或更易讀的實現；並且這樣更符合面向對象。這真是一個麻煩事，把功能實現分解成多個函數而不增長多餘的命名空間。出於認識到和利用函數是javascript中最基本的類對象，咱們能夠這樣作。就像其餘對象同樣，函數能夠被指定爲屬性。所以咱們已經聲明「hilight」爲jQuery的屬性對象，任何其餘的屬性或者函數咱們須要暴露出來的，均可以在"hilight" 函數中被聲明屬性。稍後繼續。
2.2 接受options參數以控制插件的行爲

讓咱們爲咱們的插件添加功能指定前景色和背景色的功能。咱們也許會讓選項像一個options對象傳遞給插件函數。例如：

Java代碼

// plugin definition
$.fn.hilight = function(options) {
var defaults = {
foreground: 'red',
background: 'yellow'
};
// Extend our default options with those provided.
var opts = $.extend(defaults, options);
// Our plugin implementation code goes here.
};
咱們的插件能夠這樣被調用：
$('#myDiv').hilight({
foreground: 'blue'
});

2.3 暴露插件的默認設置

咱們應該對上面代碼的一種改進是暴露插件的默認設置。這對於讓插件的使用者更容易用較少的代碼覆蓋和修改插件。接下來咱們開始利用函數對象。

Java代碼

// plugin definition
$.fn.hilight = function(options) {
// Extend our default options with those provided.
// Note that the first arg to extend is an empty object -
// this is to keep from overriding our "defaults" object.
var opts = $.extend({}, $.fn.hilight.defaults, options);
// Our plugin implementation code goes here.
};
// plugin defaults - added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
如今使用者能夠包含像這樣的一行在他們的腳本里：
//這個只須要調用一次，且不必定要在ready塊中調用
$.fn.hilight.defaults.foreground = 'blue';
接下來咱們能夠像這樣使用插件的方法，結果它設置藍色的前景色：
$('#myDiv').hilight();

如你所見，咱們容許使用者寫一行代碼在插件的默認前景色。並且使用者仍然在須要的時候能夠有選擇的覆蓋這些新的默認值：

// 覆蓋插件缺省的背景顏色

$.fn.hilight.defaults.foreground = 'blue';

// ...

// 使用一個新的缺省設置調用插件

$('.hilightDiv').hilight();

// ...

// 經過傳遞配置參數給插件方法來覆蓋缺省設置

$('#green').hilight({

foreground: 'green'

});

2.4 適當的暴露一些函數

這段將會一步一步對前面那段代碼經過有意思的方法擴展你的插件（同時讓其餘人擴展你的插件）。例如，咱們插件的實現裏面能夠定義一個名叫"format"的函數來格式化高亮文本。咱們的插件如今看起來像這樣，默認的format方法的實現部分在hiligth函數下面。

Java代碼

// plugin definition
$.fn.hilight = function(options) {
// iterate and reformat each matched element
return this.each(function() {
var $this = $(this);
// ...
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// define our format function
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};

咱們很容易的支持 options 對象中的其餘的屬性經過容許一個回調函數來覆蓋默認的設置。這是另一個出色的方法來修改你的插件。這裏展現的技巧是進一步有效的暴露 format 函數進而讓他能被從新定義。經過這技巧，是其餘人可以傳遞他們本身設置來覆蓋你的插件，換句話說，這樣其餘人也可以爲你的插件寫插件。
考慮到這個篇文章中咱們創建的無用的插件，你也許想知道究竟何時這些會有用。一個真實的例子是 Cycle 插件 . 這個 Cycle 插件是一個滑動顯示插件，他能支持許多內部變換做用到滾動，滑動，漸變消失等。可是實際上，沒有辦法定義也許會應用到滑動變化上每種類型的效果。那是這種擴展性有用的地方。 Cycle 插件對使用者暴露 "transitions" 對象，使他們添加本身變換定義。插件中定義就像這樣：

$.fn.cycle.transitions = {

// ...

};

這個技巧使其餘人能定義和傳遞變換設置到Cycle插件。

2.5 保持私有函數的私有性

這種技巧暴露你插件一部分來被覆蓋是很是強大的。可是你須要仔細思考你實現中暴露的部分。一但被暴露，你須要在頭腦中保持任何對於參數或者語義的改動也許會破壞向後的兼容性。一個通理是，若是你不能確定是否暴露特定的函數，那麼你也許不須要那樣作。

那麼咱們怎麼定義更多的函數而不攪亂命名空間也不暴露實現呢？這就是閉包的功能。爲了演示，咱們將會添加另一個「debug」函數到咱們的插件中。這個 debug函數將爲輸出被選中的元素格式到firebug控制檯。爲了建立一個閉包，咱們將包裝整個插件定義在一個函數中。

Java代碼