制作高質量的JQuery Plugin 插件的方法
2024-05-06 14:10:21
供稿：網友
JQuery Plugin插件，如果大家不明白什么是JQuery插件或都不清楚如何編寫可以查看其官方的網站：jQuery Authoring Guidelines
好了，下面有一些我覺得想做一個好的插件必須應有的要求：
1、在JQuery命名空間下聲明只聲明一個單獨的名稱
2、接受options參數，以便控制插件的行為
3、暴露插件的默認設置 ，以便外面可以訪問
4、適當地將子函數提供給外部訪問調用
5、保持私有函數
6、支持元數據插件
下面將逐條地過一遍：
只聲明一個單獨的名稱
這表明是一個單獨的插件腳本。如果你的腳本包含多個插件或者是互補的插件（像$.fn.doSomething()和$.undoSomething()），那么你可以根據要求聲明多個名稱。但一般情況下，力爭用單一的名稱來維持插件現實的所有細節。
在本例中，我們將聲明一個叫“hilight”的名稱
代碼如下:
// 插件的定義
$.fn.hilight = function( options ){
// 這里就是插件的實現代碼了...
};
然后我們可以像這樣調用它：
$("divTest").hilight();
接受一個options參數，以便控件插件的行為
代碼如下:
$.fn.hilight = function(options){
var defaults = {
foreground : 'red',
background : 'yellow'
};
//Extends out defaults options with those privided 擴展我們默認的設置
$.extend(defaults,options);
};
而我們可以這樣使用它：
代碼如下:
$('#myDiv').hilight({
foreground: 'blue'
});
暴露插件的默認設置 ，以便外面可以訪問
作為插件的提升和優化，我們應該將上面的代碼暴露出來作為插件的默認設置。
這非常重要，這樣做讓使用插件的用戶可以非常容易地用最少的代碼重寫或自定義該插件。然而這個我們可以借助JavaScript function對象的優勢：
代碼如下:
$.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);
}
$.fn.hilight.defaults = {
foreground : 'red',
background : 'yellow'
};
這里值得注意的是$.extend()第一個參數是一個空的對象，這樣可以讓我們重寫插件的默認設置
用戶可以像這樣使用插件：
代碼如下:
// override plugin default foreground color
$.fn.hilight.defaults.foreground = 'blue';
// ...
// invoke plugin using new defaults
$('.hilightDiv').hilight();
// ...
// override default by passing options to plugin method
$('#green').hilight({
foreground: 'green'
});
適當地將子函數提供給外部訪問調用
這個例子延續前面的例子，你會發現有一個有趣的方法可以擴展你的插件（然后還可以讓其他人擴展你的插件 :)）。例如，我們在插件里聲明了一個函數叫“format”用來高這顯示文本，我們的插件實現代碼可能是這樣子的：
