jQuery 外掛程式開發全解析

標籤：style   color   io   os   使用   ar   java   for   strong   

jQuery外掛程式的開發包括兩種：
一種是類層級的外掛程式開發，即給jQuery添加新的全域函數，相當於給jQuery類本身添加方法。jQuery
的全域函數就是屬於jQuery命名空間的函數，另一種是對象層級的外掛程式開發，即給jQuery對象添加方法。下
面就兩種函數的開發做詳細的說明。
1 、類層級的外掛程式開發
類層級的外掛程式開發最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態方法。典型的例子就
是$.AJAX()這個函數，將函數定義於jQuery的命名空間中。關於類層級的外掛程式開發可以採用如下幾種形式進
行擴充：
1.1  添加一個新的全域函數
添加一個全域函數，我們只需如下定義：

jQuery.foo = function() {<span style="white-space:pre"></span>alert('This is a test. This is only a test.');};

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

1.2  增加多個全域函數
添加多個全域函數，可採用如下定義：

jQuery.foo = function() {<span style="white-space:pre"></span>alert('This is a test. This is only a test.');};jQuery.bar = function(param) {<span style="white-space:pre"></span>alert('This function takes a parameter, which is "' + param + '".');};

調用時和一個函數的一樣的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(‘bar‘);

1.3  使用jQuery.extend(object);

jQuery.extend({<span style="white-space:pre"></span>foo: function() {<span style="white-space:pre"></span>alert('This is a test. This is only a test.');<span style="white-space:pre"></span>},<span style="white-space:pre"></span>bar: function(param) {<span style="white-space:pre"></span>alert('This function takes a parameter, which is "' + param +'".');<span style="white-space:pre"></span>}});

1.4  使用命名空間
雖然在jQuery命名空間中，我們禁止使用了大量的javaScript函數名和變數名。但是仍然不可避免某
些函數或變數名將於其他jQuery外掛程式衝突，因此我們習慣將一些方法封裝到另一個自訂的命名空間。

jQuery.myPlugin = {<span style="white-space:pre"></span>foo:function() {<span style="white-space:pre"></span>alert('This is a test. This is only a test.');<span style="white-space:pre"></span>},<span style="white-space:pre"></span>bar:function(param) {<span style="white-space:pre"></span>alert('This function takes a parameter, which is "' + param + '".');<span style="white-space:pre"></span>}};

採用命名空間的函數仍然是全域函數，調用時採用的方法：

$.myPlugin.foo();$.myPlugin.bar('baz');

通過這個技巧（使用獨立的外掛程式名），我們可以避免命名空間內函數的衝突。

2 、對象層級的外掛程式開發
對象層級的外掛程式開發需要如下的兩種形式：、
形式1：

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

形式2：

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

上面定義了一個jQuery函數,形參是$，函數定義完成之後,把jQuery這個實參傳遞進去.立即調用執行。
這樣的好處是,我們在寫jQuery外掛程式時,也可以使用$這個別名,而不會與prototype引起衝突.
2.1  在JQuery 名稱空間下申明一個名字
這是一個單一外掛程式的指令碼。 如果你的指令碼中包含多個外掛程式， 或者互逆的外掛程式 （例如： $.fn.doSomething()
和 $.fn.undoSomething()），那麼你需要聲明多個函數名字。但是，通常當我們編寫一個外掛程式時，力求僅
使用一個名字來包含它的所有內容。我們的樣本外掛程式命名為“highlight“

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

我們的外掛程式通過這樣被調用：

$('#myDiv').hilight();

但是如果我們需要分解我們的實現代碼為多個函數該怎麼辦？有很多原因：設計上的需要；這樣做更容易
或更易讀的實現；而且這樣更符合物件導向。 這真是一個麻煩事，把功能實現分解成多個函數而不增加多餘的
命名空間。出於認識到和利用函數是javascript中最基本的類對象，我們可以這樣做。就像其他對象一樣，
函數可以被指定為屬性。因此我們已經聲明“hilight”為jQuery的屬性對象，任何其他的屬性或者函數我們
需要暴露出來的，都可以在"hilight" 函數中被聲明屬性。稍後繼續。

2.2  接受options 參數以控制外掛程式的行為
讓我們為我們的外掛程式添加功能指定前景色彩和背景色的功能。我們也許會讓選項像一個options對象傳遞給
外掛程式函數。例如：

// 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  暴露外掛程式的預設設定
我們應該對上面代碼的一種改進是暴露外掛程式的預設設定。 這對於讓外掛程式的使用者更容易用較少的代碼覆蓋
和修改外掛程式。接下來我們開始利用函數對象。

// 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函數下面。

// plugin definition$.fn.hilight = function(options) {// iterate and reformat each matched elementreturn this.each(function() {var $this = $(this);// ...4var markup = $this.html();// call our format functionmarkup = $.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控制
台。為了建立一個閉包，我們將封裝整個外掛程式定義在一個函數中。

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

我們的“debug”方法不能從外部閉包進入,因此對於我們的實現是私人的。
2.6  支援Metadata 外掛程式
在你正在寫的外掛程式的基礎上，添加對Metadata外掛程式的支援能使他更強大。個人來說，我喜歡這個
Metadata外掛程式，因為它讓你使用不多的"markup”覆蓋外掛程式的選項（這非常有用當建立例子時）。而且支援它
非常簡單。更新：注釋中有一點最佳化建議。

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

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

<!-- markup --><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  整合
下面使我們的例子完成後的代碼：

// 建立一個閉包(function($) {// 外掛程式的定義$.fn.hilight = function(options) {debug(this);// build main options before element iterationvar opts = $.extend({}, $.fn.hilight.defaults, options);// iterate and reformat each matched elementreturn this.each(function() {$this = $(this);// build element specific optionsvar 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 functionmarkup = $.fn.hilight.format(markup);$this.html(markup);});};// 私人函數：debuggingfunction 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(); //頁面上為：<input id="input1" type="text"/>

$("#input1") 為一個jQuery執行個體，當它調用成員方法 alertWhileClick後，便實現了擴充，每次
被點擊時它會先彈出目前編輯裡的內容。
3.2 jQuery.extend(object);
為jQuery類添加添加類方法，可以理解為添加靜態方法。如：

$.extend({<span style="white-space:pre"></span>add:function(a,b){return a+b;}});

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

jQuery 外掛程式開發全解析