jQuery插件的開發包括兩種:
一種是類級別的插件開發,即給jQuery添加新的全局函數,相當於給jQuery類本身添加方法。jQuery的全局函數就是屬於jQuery命名空間的函數,另一種是對象級別的插件開發,即給jQuery對象添加方法。下面就兩種函數的開發做詳細的說明。
1、類級別的插件開發
類級別的插件開發最直接的理解就是給jQuery類添加類方法,可以理解爲添加靜態方法。典型的例子就是$.AJAX()這個函數,將函數定義於jQuery的命名空間中。關於類級別的插件開發可以採用如下幾種形式進行擴展:
1.1 添加一個新的全局函數
添加一個全局函數,我們只需如下定義:
1.2 增加多個全局函數
添加多個全局函數,可採用如下定義:
1.3 使用jQuery.extend(object);
1.4 使用命名空間
雖然在jQuery命名空間中,我們禁止使用了大量的javaScript函數名和變量名。但是仍然不可避免某些函數或變量名將於其他jQuery插件衝突,因此我們習慣將一些方法封裝到另一個自定義的命名空間。
通過這個技巧(使用獨立的插件名),我們可以避免命名空間內函數的衝突。
2、對象級別的插件開發
對象級別的插件開發需要如下的兩種形式:、
形式1:
形式2:
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函數下面。