制作高質(zhì)量的JQuery Plugin 插件的方法
2024-05-06 14:10:21
供稿：網(wǎng)友
JQuery Plugin插件，如果大家不明白什么是JQuery插件或都不清楚如何編寫可以查看其官方的網(wǎng)站：jQuery Authoring Guidelines
好了，下面有一些我覺得想做一個(gè)好的插件必須應(yīng)有的要求：
1、在JQuery命名空間下聲明只聲明一個(gè)單獨(dú)的名稱
2、接受options參數(shù)，以便控制插件的行為
3、暴露插件的默認(rèn)設(shè)置 ，以便外面可以訪問
4、適當(dāng)?shù)貙⒆雍瘮?shù)提供給外部訪問調(diào)用
5、保持私有函數(shù)
6、支持元數(shù)據(jù)插件
下面將逐條地過一遍：
只聲明一個(gè)單獨(dú)的名稱
這表明是一個(gè)單獨(dú)的插件腳本。如果你的腳本包含多個(gè)插件或者是互補(bǔ)的插件（像$.fn.doSomething()和$.undoSomething()），那么你可以根據(jù)要求聲明多個(gè)名稱。但一般情況下，力爭(zhēng)用單一的名稱來維持插件現(xiàn)實(shí)的所有細(xì)節(jié)。
在本例中，我們將聲明一個(gè)叫“hilight”的名稱
代碼如下:
// 插件的定義
$.fn.hilight = function( options ){
// 這里就是插件的實(shí)現(xiàn)代碼了...
};
然后我們可以像這樣調(diào)用它：
$("divTest").hilight();
接受一個(gè)options參數(shù)，以便控件插件的行為
代碼如下:
$.fn.hilight = function(options){
var defaults = {
foreground : 'red',
background : 'yellow'
};
//Extends out defaults options with those privided 擴(kuò)展我們默認(rèn)的設(shè)置
$.extend(defaults,options);
};
而我們可以這樣使用它：
代碼如下:
$('#myDiv').hilight({
foreground: 'blue'
});
暴露插件的默認(rèn)設(shè)置 ，以便外面可以訪問
作為插件的提升和優(yōu)化，我們應(yīng)該將上面的代碼暴露出來作為插件的默認(rèn)設(shè)置。
這非常重要，這樣做讓使用插件的用戶可以非常容易地用最少的代碼重寫或自定義該插件。然而這個(gè)我們可以借助JavaScript function對(duì)象的優(yōu)勢(shì)：
代碼如下:
$.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()第一個(gè)參數(shù)是一個(gè)空的對(duì)象，這樣可以讓我們重寫插件的默認(rèn)設(shè)置
用戶可以像這樣使用插件：
代碼如下:
// 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'
});
適當(dāng)?shù)貙⒆雍瘮?shù)提供給外部訪問調(diào)用
這個(gè)例子延續(xù)前面的例子，你會(huì)發(fā)現(xiàn)有一個(gè)有趣的方法可以擴(kuò)展你的插件（然后還可以讓其他人擴(kuò)展你的插件 :)）。例如，我們?cè)诓寮锫暶髁艘粋€(gè)函數(shù)叫“format”用來高這顯示文本，我們的插件實(shí)現(xiàn)代碼可能是這樣子的：
