jQuery 的plugin開發(fā)需要注意的事情,
1.       明確jQuery的命名空間只有一個(gè)。
2.       明白o(hù)ptions參數(shù)用來控制plugin的行為。
3.       為默認(rèn)的plugin設(shè)定提供公共的訪問權(quán)限。
4.       為子函數(shù)提供公共的訪問權(quán)限。
5.       私有的函數(shù)絕對是私有訪問
6.       支持metadata plugin。
我將會在下面的例子中一個(gè)一個(gè)的說明上面這幾個(gè)條件,做完這些事情后我們就會創(chuàng)建一個(gè)高亮顯示text的簡單插件。

1. 明確jQuery的命名空間只有一個(gè)

在我們的例子里,我們將會命名這個(gè)插件名字為hilight,

也就是我們的plugin可以通過下面的方法來使用:

為什么jQuery的plugin只有一個(gè)命名空間?可能是設(shè)計(jì)的要求,或者是這樣的話可讀性更強(qiáng),亦或是為了面向?qū)ο蟮脑O(shè)計(jì)模式。

2.明白o(hù)ptions參數(shù)來控制plugin的行為。

  讓我們先為我們的hilight插件明確一下foreground和background的顏色。我們應(yīng)該能夠允許這兩個(gè)option作為option對象傳遞給plugin的主函數(shù)。例如:

現(xiàn)在插件能夠設(shè)定如下的屬性:

3. 為默認(rèn)的plugin設(shè)定提供公共的訪問權(quán)限。

   我們這里可以改進(jìn)一下,就是讓上面的代碼能夠設(shè)置能夠擴(kuò)展。這樣當(dāng)使用這個(gè)插件的用戶能夠使用最少的代碼重載我們的option。這也就是我們開始使用function對象的好處。

現(xiàn)在用戶可以在他們的script中使用一行代碼來設(shè)置foreground屬性:

有了上面的代碼我們就可以把某個(gè)DOM控件的foregrounf顏色設(shè)定為blue了。

4. 為子函數(shù)提供公共的訪問權(quán)限

   這個(gè)條款和上面的相仿,能很有趣的讓你的Plugin有擴(kuò)展功能。例如:在lilight的plugin中我們能夠定義一個(gè)function是format,可以定義hilight的text的形式。我們的plugin代碼將會顯示如下:

這里我們可以很容易支持另外的一個(gè)option對象來通過一個(gè)callback 函數(shù)來重載默認(rèn)的formatting。那將會是另外一個(gè)不錯(cuò)的支持自定義的方式。

5. 私有的函數(shù)絕對是私有訪問

   公開plugin的一些Option能夠被自定義當(dāng)然是個(gè)非常強(qiáng)大的功能。但是你需要考慮哪部分應(yīng)該被公開,哪部分不應(yīng)該通過外部訪問,否則會破會你已經(jīng)封裝好的結(jié)果。

  這里debug方法不能從外部訪問,因?yàn)樗趐lugin的展現(xiàn)中屬于私有的方法。

6.支持metadata plugin。

  使用Metadata Plugin需要看你的plugin是什么類型,可能它會使你的插件功能更加強(qiáng)大。個(gè)人來說,我比較喜歡metadata plugin是因?yàn)樗芘甲屛业膒lguin的option通過標(biāo)記重載。

  如果metadata plugin能夠成功的封裝到我們的插件,那么可以通過下面的標(biāo)記來使用這個(gè)lilight插件。

 最終代碼如下:

最新評論