jQuery外掛開發全解析

jQuery外掛的開發包括兩種：一種是類級別的外掛開發，即給jQuery新增新的全域性函式，相當於給jQuery類本身新增方法。jQuery的全域性函式就是屬於jQuery名稱空間的函式，另一種是物件級別的外掛開發，即給jQuery物件新增方法。下面就兩種函式的開發做詳細的說明。

1、類級別的外掛開發

類級別的外掛開發最直接的理解就是給jQuery類新增類方法，可以理解為新增靜態方法。典型的例子就是$.AJAX()這個函式，將函式定義於jQuery的名稱空間中。關於類級別的外掛開發可以採用如下幾種形式進行擴充套件：

1.1 新增一個新的全域性函式

新增一個全域性函式，我們只需如下定義：

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 使用名稱空間

雖然在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();

現在使用者可以包含像這樣的一行在他們的指令碼里：

//這個只需要呼叫一次，且不一定要在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程式碼

(function($) {
// plugin definition
$.fn.hilight = function(options) {
debug(this);
// ...
};
// private function for debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// ...
})(jQuery);

我們的“debug”方法不能從外部閉包進入,因此對於我們的實現是私有的。

2.6 支援Metadata外掛

在你正在寫的外掛的基礎上，新增對Metadata外掛的支援能使他更強大。個人來說，我喜歡這個Metadata外掛，因為它讓你使用不多的"markup”覆蓋外掛的選項(這非常有用當建立例子時)。而且支援它非常簡單。更新：註釋中有一點優化建議。

Java程式碼

$.fn.hilight = function(options) {
// ...
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
return this.each(function() {
var $this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
//...

這些變動行做了一些事情：它是測試Metadata外掛是否被安裝如果它被安裝了，它能擴充套件我們的options物件通過抽取後設資料這行作為最後一個引數新增到JQuery.extend，那麼它將會覆蓋任何其它選項設定。現在我們能從"markup”處驅動行為,如果我們選擇了“markup”：

呼叫的時候可以這樣寫： jQuery.foo(); 或 $.foo();

Java程式碼

<div class="hilight { background: 'red', foreground: 'white' }">
Have a nice day!
</div>
<div class="hilight { foreground: 'orange' }">
Have a nice day!
</div>
<div class="hilight { background: 'green' }">
Have a nice day!
</div>
現在我們能高亮哪些div僅使用一行指令碼：
$('.hilight').hilight();

2.7 整合

下面使我們的例子完成後的程式碼：

Java程式碼

// 建立一個閉包
(function($) {
// 外掛的定義
$.fn.hilight = function(options) {
debug(this);
// build main options before element iteration
var opts = $.extend({}, $.fn.hilight.defaults, options);
// iterate and reformat each matched element
return this.each(function() {
$this = $(this);
// build element specific options
var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
// update element styles
$this.css({
backgroundColor: o.background,
color: o.foreground
});
var markup = $this.html();
// call our format function
markup = $.fn.hilight.format(markup);
$this.html(markup);
});
};
// 私有函式：debugging
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
// 定義暴露format函式
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
// 外掛的defaults
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
// 閉包結束
})(jQuery);

這段設計已經讓我建立了強大符合規範的外掛。我希望它能讓你也能做到。

3、總結

jQuery為開發外掛提拱了兩個方法，分別是：

jQuery.fn.extend(object); 給jQuery物件新增方法。

jQuery.extend(object); 為擴充套件jQuery類本身.為類新增新的方法。

3.1 jQuery.fn.extend(object);

fn 是什麼東西呢。檢視jQuery程式碼，就不難發現。

jQuery.fn = jQuery.prototype = {

init: function( selector, context ) {//....

//......

};

原來 jQuery.fn = jQuery.prototype.對prototype肯定不會陌生啦。雖然 javascript　沒有明確的類的概念，但是用類來理解它，會更方便。jQuery便是一個封裝得非常好的類，比如我們用語句　$("#btn1") 會生成一個 jQuery類的例項。

jQuery.fn.extend(object); 對jQuery.prototype進得擴充套件，就是為jQuery類新增“成員函式”。jQuery類的例項可以使用這個“成員函式”。

比如我們要開發一個外掛，做一個特殊的編輯框，當它被點選時，便alert 當前編輯框裡的內容。可以這麼做：

$.fn.extend({

alertWhileClick:function(){

$(this).click(function(){

alert($(this).val());

});

}

});

$("#input1").alertWhileClick(); //頁面上為：

$("#input1")　為一個jQuery例項，當它呼叫成員方法 alertWhileClick後，便實現了擴充套件，每次被點選時它會先彈出目前編輯裡的內容。

3.2 jQuery.extend(object);

為jQuery類新增新增類方法，可以理解為新增靜態方法。如：

$.extend({
add:function(a,b){return a+b;}
});

便為　jQuery　新增一個為 add　的　“靜態方法”，之後便可以在引入 jQuery　的地方，使用這個方法了，$.add(3,4); //return 7

原文：http://www.iteye.com/topic/545971

jQuery外掛開發全解析

相關文章