jQuery開(kāi)發(fā)者：你真的需要一個(gè)插件嗎？
jQuery的插件提供了一個(gè)很好的方法，節(jié)省了時(shí)間和簡(jiǎn)化了開(kāi)發(fā)，避免程序員從頭開(kāi)始編寫(xiě)每個(gè)組件。但是，插件也將一個(gè)不穩(wěn)定因素引入代碼中。一個(gè)好的插件節(jié)省了無(wú)數(shù)的開(kāi)發(fā)時(shí)間，一個(gè)質(zhì)量不好的插件會(huì)導(dǎo)致修復(fù)錯(cuò)誤的時(shí)間比實(shí)際從頭 開(kāi)始編寫(xiě)組件的時(shí)間還長(zhǎng)。
關(guān)于jQuery，51CTO推薦專題：jQuery從入門(mén)到精通
幸運(yùn)的是，人們通常具有各種不同的插件可供選擇。但是，即使你只用一個(gè)，也要弄清楚它是否值得使用的。永遠(yuǎn)不要在你的代碼庫(kù)中引入錯(cuò)誤的代碼。
你需要一個(gè)插件嗎？
首先是要弄清楚究竟你是否需要一個(gè)插件。如果不需要，既可以節(jié)省文件大小，又可以節(jié)省自己的時(shí)間。
1.自己寫(xiě)是不是更好？
如果功能很簡(jiǎn)單，就自己寫(xiě)。jQuery的插件經(jīng)常會(huì)捆綁各種功能，這可能矯枉過(guò)正。在這種情況下，手寫(xiě)任何簡(jiǎn)單的功能往往更有意義。當(dāng)然，要對(duì)所涉及的工作量有所衡量。
舉例來(lái)說(shuō)，如果你需要更先進(jìn)的功能，jQuery UI的手風(fēng)琴是很好的選擇。但如果你只需要打開(kāi)和關(guān)閉面板。如果你還沒(méi)有在你的網(wǎng)站上使用jQuery UI上，考慮jQuery的 slideToggle()或animate()。
2.是不是你已經(jīng)在使用一個(gè)類似的插件？
在發(fā)現(xiàn)某個(gè)插件不能解決你需要的一切，尋找另一個(gè)插件來(lái)彌補(bǔ)，十分有誘惑。但在同一個(gè)應(yīng)用程式包括兩個(gè)類似的插件，肯定是一個(gè)臃腫的JavaScript。你能找到一個(gè)插件，包括你所有的需求么？如果沒(méi)有，你能擴(kuò)展其中一個(gè)插件達(dá)到你所需要涵蓋的一切嗎？同樣，在決定是否擴(kuò)展一個(gè)插件，權(quán)衡的是好處和開(kāi)發(fā)時(shí)間。
舉例來(lái)說(shuō)，jQuery的燈箱是在畫(huà)廊里顯示彈出的照片很好的方法， simpleModal是個(gè)很棒的方法向用戶顯示模式信息。但是，為什么這兩種方式你的網(wǎng)站都使用？你可以輕松地?cái)U(kuò)展一個(gè)覆蓋這兩種需求。更好的是，找到一個(gè)插件，它涵蓋一切，諸如Colorbox。
3.需要JavaScript？
在某些情況下，JavaScript是沒(méi)有必要的。CSS的偽選擇器，例如:hover和CSS3 transitios功能，可以涵蓋各種動(dòng)態(tài)效果，速度遠(yuǎn)遠(yuǎn)超過(guò)了JavaScript的解決方案。此外，許多插件只提供樣式;感覺(jué)用markup和CSS的可能更好些。
如果你需要展示動(dòng)態(tài)內(nèi)容，要求有條件的提示，jQuery Tooltip是必不可少的。但是，如果你需要提示的地方只有幾個(gè)，***是用純CSS（見(jiàn)本例）。靜態(tài)提示信息，你可以更進(jìn)一步利用CSS3過(guò)渡進(jìn)行動(dòng)畫(huà)效果，但不要忘記在該動(dòng)畫(huà)將只在某些瀏覽器有效。
當(dāng)審查任何插件，一系列的警告標(biāo)志表明了這款插件的質(zhì)量較差。在這里，我們將看看插件的方方面面，從JavaScript到CSS到mark-up。我們甚至?xí)紤]如何發(fā)布插件。插件中出現(xiàn)任何警告都會(huì)將你的插件排除在考慮之外。如果你很幸運(yùn)，有多個(gè)插件供選擇，這些警告條例可以幫助你縮小選擇。但是，即使只有一個(gè)選擇，如果你看到太多的警示還是放棄的好?？梢蕴崆皽p少自己的頭痛。
4.奇怪的選項(xiàng)或參數(shù)語(yǔ)法
在使用jQuery的時(shí)候，開(kāi)發(fā)工程師關(guān)心的是函數(shù)如何接受參數(shù)。如果一個(gè)插件開(kāi)發(fā)人員使用特殊的語(yǔ)法，有理由相信他們沒(méi)有太多的jQuery或JavaScript的編程經(jīng)驗(yàn)。
有些插件接受一個(gè)jQuery對(duì)象作為一個(gè)參數(shù)，但不允許鏈?zhǔn)绞褂迷搶?duì)象，例如，$.myPlugin( $('a') );，而不是$('a').myPlugin();這是一個(gè)很大的警告。
- jQuery代碼：
- $('.my-selector').myPlugin({
- opt1 : 75,
- opt2 : 'asdf'
- });
- $('.my-selector').myPlugin({
- opt1 : 75,
- opt2 : 'asdf'
- });
- jQuery代碼：
- $.myPlugin({
- opt1 : 75,
- opt2 : 'asdf'
- }, $('.my-selector'));
- $.myPlugin({
- opt1 : 75,
- opt2 : 'asdf'
- }, $('.my-selector'));
5.很少或幾乎沒(méi)有文檔
沒(méi)有文檔，一個(gè)插件的使用就非常困難，因?yàn)檫@是尋找問(wèn)題答案想到的***個(gè)地方。文件有各種格式，適當(dāng)?shù)奈募?**的，但良好的代碼注釋可以一樣好。如果沒(méi)有文檔，或者僅僅是在博客發(fā)表的一個(gè)簡(jiǎn)單例子，那么你可能要考慮其他選擇。良好的文檔表明該插件的作者關(guān)心你這樣的用戶。它還表明，他們已經(jīng)研究過(guò)其他插件，知道好文檔的價(jià)值。
6.可憐的支持記錄
缺乏支持，表示發(fā)現(xiàn)問(wèn)題時(shí)將難以得到幫助。更引人關(guān)注的是，它表明該插件有段時(shí)間沒(méi)更新了。軟件開(kāi)源的一個(gè)好處是它吸引很多眼球，幫助你調(diào)試和改進(jìn)。如果作者沒(méi)有談到這些人，該插件將不會(huì)更新。
你考慮的插件***一次更新是在什么時(shí)候？***一次回答留言是什么時(shí)候？雖然不是所有的插件都需要像jQuery plug-ins 這個(gè)網(wǎng)站一樣有個(gè)強(qiáng)有力的支持系統(tǒng)。警惕那些從來(lái)沒(méi)有更新的插件。
擁有歷史技術(shù)支持記錄，作者回應(yīng)bug或者將強(qiáng)需求，是一個(gè)綠色標(biāo)志。擁有一個(gè)支持論壇進(jìn)一步表示這個(gè)插件有很好的支持，即使不是作者至少有論壇給你解決問(wèn)題。
7.沒(méi)有壓縮版本
雖然事一個(gè)相當(dāng)小的警示，如果插件的創(chuàng)建者并沒(méi)有根據(jù)源代碼提供一個(gè)壓縮版本，那么他們可能不會(huì)太關(guān)注表現(xiàn)。當(dāng)然，你可以自己去壓縮，但這個(gè)警示不是討論浪費(fèi)時(shí)間的問(wèn)題：這暗示了插件可能包含更為嚴(yán)重的性能問(wèn)題。
另一方面，提供壓縮，打包和gzipped版本下載是一個(gè)跡象。
8.需要奇怪的Mark-up
如果一個(gè)插件需要mark-up，那么這個(gè)mark-up應(yīng)是高質(zhì)量的。它應(yīng)符合語(yǔ)義semantic sense而且足夠靈活。除了很爛的前端技術(shù)，奇怪的mark-up也會(huì)使集成變得更加困難。一個(gè)好的插件插入幾乎任何涵蓋了任何你常用mark-up；使用一個(gè)壞插件還不如去跳火圈。
在某些情況下，嚴(yán)格的mark-up是必要的，所以應(yīng)該允許在一定范圍內(nèi)的使用?；旧希唧w的功能，更具體的mark-up需要。完全靈活的mark-up是從任何自然下降jQuery的選擇是最簡(jiǎn)單的集成。
#p#
9.過(guò)度使用CSS
許多的jQuery插件包括了CSS，css的質(zhì)量和JavaScript重要是一樣的。過(guò)多的CSS肯定是一個(gè)壞標(biāo)志。但什么是“過(guò)度”取決于插件的目的。注重顯示，如燈箱或UI插件，比簡(jiǎn)單動(dòng)畫(huà)驅(qū)動(dòng)的插件要更多的CSS。良好的CSS樣式，讓程序更容易修改以適應(yīng)你的主題風(fēng)格。
10.沒(méi)有其他人使用它
jQuery的用戶數(shù)量龐大，最體面的插件將可能對(duì)某事有他們寫(xiě)的，即使它是一個(gè)“50 jQuery [fill in the blank]”。比如你做了一個(gè)簡(jiǎn)單的谷歌搜索插件，你搜索結(jié)果很少，你可能要考慮其他選擇，除非該插件是全新的，或者你會(huì)找個(gè)專業(yè)寫(xiě)插件的工程師來(lái)修改它。
11.使用和觀察
測(cè)試插件***的方式是簡(jiǎn)單地在服務(wù)器上運(yùn)行，看看結(jié)果。首先，它是否破壞了一些規(guī)則？請(qǐng)務(wù)必看看JavaScript的代碼段。如果插件包括一個(gè)樣式表，看看每個(gè)網(wǎng)頁(yè)的布局和樣式上的錯(cuò)誤。
此外，請(qǐng)問(wèn)該插件的效果如何？如果它運(yùn)行速度很慢或網(wǎng)頁(yè)載入相當(dāng)滯后，還是考慮其他插件吧。
12.使用JSPerf進(jìn)行績(jī)效考核
把你的插件展現(xiàn)效果提高到新的水平，使用JSPerf進(jìn)行測(cè)試。Benchmarking會(huì)運(yùn)行的一組操作多次，然后返回平均執(zhí)行時(shí)間。JSPerf提供了一個(gè)簡(jiǎn)單的方法來(lái)測(cè)試一個(gè)插件運(yùn)行的速度有多快。這是挑選兩個(gè)幾乎相同插件的重要的方式來(lái)。
13.跨瀏覽器測(cè)試
如果一個(gè)插件有很多CSS，一定要在所有你希望支持的瀏覽器測(cè)試樣式。記住CSS可以來(lái)自外部樣式表和內(nèi)部JavaScript。
即使插件沒(méi)有任何CSS，無(wú)論如何要在所有瀏覽器上檢查JavaScript錯(cuò)誤（至少在你支持的IE瀏覽器的最早版本）。jQuery的核心已經(jīng)處理了大多數(shù)跨瀏覽器問(wèn)題，但插件往往使用一些的數(shù)量純JavaScript，這往往會(huì)打破舊瀏覽器的規(guī)則。
運(yùn)行中的jsPerf
14.單元測(cè)試
***，進(jìn)一步考慮跨瀏覽器測(cè)試--單元測(cè)試。單元測(cè)試是測(cè)試組件插件的簡(jiǎn)單方法，支持任何瀏覽器或平臺(tái)。如果該插件作者的下載包里已經(jīng)包括了單元測(cè)試，可以打賭，這款插件能在所有跨瀏覽器和平臺(tái)上工作。不幸的是，極少數(shù)插件才包括單元測(cè)試數(shù)據(jù)，但這并不意味著你不能使用QUnit plug-in執(zhí)行自己的單元測(cè)試。
用最小的設(shè)置，測(cè)試是否該插件的方法返回了預(yù)期結(jié)果。只要有一個(gè)測(cè)試失敗，不要在這個(gè)插件上浪費(fèi)你的時(shí)間。在大多數(shù)情況下，執(zhí)行單元測(cè)試有點(diǎn)浪費(fèi)時(shí)間，但QUnit可以幫助你確定插件的質(zhì)量。
QUnit運(yùn)行單元測(cè)試的一個(gè)例子
結(jié)論
當(dāng)評(píng)估一個(gè)jQuery插件的質(zhì)量，先評(píng)估代碼質(zhì)量。JavaScript是否有優(yōu)化、沒(méi)有錯(cuò)誤？CSS是否已經(jīng)調(diào)整并有效？mark-up的命名是否有語(yǔ)義，足夠靈活？這些問(wèn)題都?xì)w結(jié)為最重要的問(wèn)題：這個(gè)插件很容易使用？
jQuery的核心進(jìn)行了優(yōu)化和錯(cuò)誤檢查，支持它的不僅有核心團(tuán)隊(duì)成員，還有整個(gè)jQuery社區(qū)。雖然用同樣的標(biāo)準(zhǔn)衡量jQuery插件不公平，但至少應(yīng)該有一些相同的審查標(biāo)準(zhǔn)。
原文作者：Jon Raasch
原文鏈接：http://www.smashingmagazine.com/2010/08/26/jquery-plugin-checklist-should-you-use-that-jquery-plug-in/
【編輯推薦】
