基本介紹
- 中文名：js外掛程式
- 解析： jQuery外掛程式的開發
- 包含：類級別的外掛程式開發
- 包括：對象級別的外掛程式開發
js外掛程式兩種函式的開發做詳細的說明。
1.類級別的外掛程式開發
類級別的外掛程式開發最直接的理解就是給jQuery類添加類方法，可以理解為添加靜態方法。典型的例子就
是$.AJAX()這個函式，將函式定義於jQuery的命名空間中。關於類級別的外掛程式開發可以採用如下幾種形式進
行擴展：
1.1 添加一個新的全局函式
添加一個全局函式，我們只需如下定義：
jQuery.foo = function() { alert('This is a test. This is only a test.'); };
調用的時候可以這樣寫： jQuery.foo(); 或 $.foo();
1.2 增加多個全局函式 添加多個全局函式，可採用如下定義：
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)：
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 + '".');
}
});
jQuery.foo = function() {alert('This is a test. This is only a test.');};
調用的時候可以這樣寫： jQuery.foo(); 或 $.foo();
1.2 增加多個全局函式添加多個全局函式，可採用如下定義：
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);
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外掛程式衝突，因此我們習慣將一些方法封裝到另一個自定義的命名空間。
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：
(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外掛程式時,也可以使用$這個別名,而不會與prototype引起衝突.
2.1 在JQuery名稱空間下申明一個名字
和 $.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 element
return this.each(function () {
var $this = $(this);
// ... 4
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控制
台。為了創建一個閉包，我們將包裝整個外掛程式定義在一個函式中。
(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”覆蓋外掛程式的選項（這非常有用當創建例子時）。而且支持它
非常簡單。更新：注釋中有一點最佳化建議。
$.fn.hilight = function (options) {
// ... 5
// 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”：
<!-- 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 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); }); 6 };
// 私有函式：
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 ) {//.... //...... };
<!-- 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();
原來 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({ 7 add:function(a,b){return a+b;} }); 便為 jQuery 添加一個為 add 的 “靜態方法”，之後便可以在引入 jQuery 的地方，使用這個方 法了，$.add(3,4); //return 7
