|
|
jQuery 的plugin開(kāi)發(fā)需要注意的事情,
1. 明確jQuery的命名空間只有一個(gè)。
2. 明白o(hù)ptions參數(shù)用來(lái)控制plugin的行為。
3. 為默認(rèn)的plugin設(shè)定提供公共的訪問(wèn)權(quán)限。
4. 為子函數(shù)提供公共的訪問(wèn)權(quán)限。
5. 私有的函數(shù)絕對(duì)是私有訪問(wèn)
6. 支持metadata plugin。
我將會(huì)在下面的例子中一個(gè)一個(gè)的說(shuō)明上面這幾個(gè)條件,做完這些事情后我們就會(huì)創(chuàng)建一個(gè)高亮顯示text的簡(jiǎn)單插件。
1. 明確jQuery的命名空間只有一個(gè)
在我們的例子里,我們將會(huì)命名這個(gè)插件名字為hilight,
也就是我們的plugin可以通過(guò)下面的方法來(lái)使用:
為什么jQuery的plugin只有一個(gè)命名空間?可能是設(shè)計(jì)的要求,或者是這樣的話(huà)可讀性更強(qiáng),亦或是為了面向?qū)ο蟮脑O(shè)計(jì)模式。
2.明白o(hù)ptions參數(shù)來(lái)控制plugin的行為。
讓我們先為我們的hilight插件明確一下foreground和background的顏色。我們應(yīng)該能夠允許這兩個(gè)option作為option對(duì)象傳遞給plugin的主函數(shù)。例如:
現(xiàn)在插件能夠設(shè)定如下的屬性:
3. 為默認(rèn)的plugin設(shè)定提供公共的訪問(wèn)權(quán)限。
我們這里可以改進(jìn)一下,就是讓上面的代碼能夠設(shè)置能夠擴(kuò)展。這樣當(dāng)使用這個(gè)插件的用戶(hù)能夠使用最少的代碼重載我們的option。這也就是我們開(kāi)始使用function對(duì)象的好處。
現(xiàn)在用戶(hù)可以在他們的script中使用一行代碼來(lái)設(shè)置foreground屬性:
有了上面的代碼我們就可以把某個(gè)DOM控件的foregrounf顏色設(shè)定為blue了。
4. 為子函數(shù)提供公共的訪問(wèn)權(quán)限
這個(gè)條款和上面的相仿,能很有趣的讓你的Plugin有擴(kuò)展功能。例如:在lilight的plugin中我們能夠定義一個(gè)function是format,可以定義hilight的text的形式。我們的plugin代碼將會(huì)顯示如下:
這里我們可以很容易支持另外的一個(gè)option對(duì)象來(lái)通過(guò)一個(gè)callback 函數(shù)來(lái)重載默認(rèn)的formatting。那將會(huì)是另外一個(gè)不錯(cuò)的支持自定義的方式。
5. 私有的函數(shù)絕對(duì)是私有訪問(wèn)
公開(kāi)plugin的一些Option能夠被自定義當(dāng)然是個(gè)非常強(qiáng)大的功能。但是你需要考慮哪部分應(yīng)該被公開(kāi),哪部分不應(yīng)該通過(guò)外部訪問(wèn),否則會(huì)破會(huì)你已經(jīng)封裝好的結(jié)果。
這里debug方法不能從外部訪問(wèn),因?yàn)樗趐lugin的展現(xiàn)中屬于私有的方法。
6.支持metadata plugin。
使用Metadata Plugin需要看你的plugin是什么類(lèi)型,可能它會(huì)使你的插件功能更加強(qiáng)大。個(gè)人來(lái)說(shuō),我比較喜歡metadata plugin是因?yàn)樗芘甲屛业膒lguin的option通過(guò)標(biāo)記重載。
如果metadata plugin能夠成功的封裝到我們的插件,那么可以通過(guò)下面的標(biāo)記來(lái)使用這個(gè)lilight插件。
最終代碼如下:
復(fù)制代碼 代碼如下:
//
// create closure
//
(function($) {
//
// plugin definition
//
$.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);
});
};
//
// private function for debugging
//
function debug($obj) {
if (window.console && window.console.log)
window.console.log('hilight selection count: ' + $obj.size());
};
//
// define and expose our format function
//
$.fn.hilight.format = function(txt) {
return '<strong>' + txt + '</strong>';
};
//
// plugin defaults
//
$.fn.hilight.defaults = {
foreground: 'red',
background: 'yellow'
};
//
// end of closure
//
})(jQuery);
JavaScript技術(shù)：一步一步教你寫(xiě)一個(gè)jQuery的插件教程(Plugin)，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
