影響jQuery使用的14個面向_jquery

　　幸運的是，人們通常具有各種不同的插件可供選擇。但是，即使你只用一個，也要弄清楚它是否值得使用的。永遠不要在你的程式碼庫中引入錯誤的程式碼。

　　你需要一個插件嗎？

　　首先是要弄清楚究竟你是否需要一個插件。如果不需要，既可以節省檔案大小，又可以節省自己的時間。

　　1.自己寫是不是比較好？

　　如果功能很簡單，就自己寫。 jQuery的插件經常會捆綁各種功能，這可能矯枉過正。在這種情況下，手寫任何簡單的功能往往更有意義。當然，要對所涉及的工作量有所衡量。

　　舉例來說，如果你需要更先進的功能，jQuery UI的手風琴是很好的選擇。但如果你只需要打開和關閉面板。如果你還沒有在你的網站上使用jQuery UI上，考慮jQuery的 slideToggle()或animate()。

　　2.是不是你已經在使用一個類似的插件？

　　在發現某個插件不能解決你需要的一切，尋找另一個插件來彌補，十分有誘惑。但在同一個應用程式包括兩個類似的插件，肯定是一個臃腫的 JavaScript。你能找到一個插件，包括你所有的需求麼？如果沒有，你能擴展其中一個插件達到你所需要涵蓋的一切嗎？同樣，在決定是否擴展一個插件，權衡的是好處和開發時間。

　　舉例來說，jQuery的燈箱是在畫廊裡顯示彈出的照片很好的方法， simpleModal是個很棒的方法向用戶顯示模式資訊。但是，為什麼這兩種方式你的網站都會使用？你可以輕鬆地擴展一個覆蓋這兩種需求。更好的是，找到一個插件，它涵蓋一切，諸如Colorbox。

　　3.需要JavaScript？

　　在某些情況下，JavaScript是沒有必要的。 CSS的偽選擇器，例如:hover和CSS3 transitios功能，可以涵蓋各種動態效果，速度遠遠超過了JavaScript的解決方案。此外，許多外掛程式只提供樣式;感覺用markup和CSS的可能會比較好。

　　如果你需要展示動態內容，要求有條件的提示，jQuery Tooltip是不可或缺的。但是，如果你需要提示的地方只有幾個，最好是用純CSS（見本例）。靜態提示訊息，你可以更進一步利用CSS3過渡進行動畫效果，但不要忘記在該動畫將只在某些瀏覽器有效。

　　當審查任何插件，一系列的警告標誌表明了這款插件的品質較差。在這裡，我們將看看插件的方方面面，從JavaScript到CSS到mark- up。我們甚至會考慮如何發布插件。插件中出現任何警告都會將你的插件排除在考慮之外。如果你很幸運，有多個插件供選擇，這些警告條例可以幫助你縮小選擇。但是，即使只有一個選擇，如果你看到太多的警示還是放棄的好。可以提前減少自己的頭痛。

　　4.奇怪的選項或參數語法

　　在使用jQuery的時候，開發工程師關心的是函數如何接受參數。如果一個外掛程式開發人員使用特殊的語法，有理由相信他們沒有太多的jQuery或JavaScript的程式設計經驗。

　　有些插件接受一個jQuery物件作為一個參數，但不允許鍊式使用該對象，例如，$.myPlugin( $('a') );，而不是$('a').myPlugin();這是一個很大的警告。

　　程式碼：

$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$('.my-selector').myPlugin({
opt1 : 75,
opt2 : 'asdf'
});
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));
 
$.myPlugin({
opt1 : 75,
opt2 : 'asdf'
}, $('.my-selector'));

　　5.很少或幾乎沒有文檔

　　沒有文檔，一個插件的使用就非常困難，因為這是尋找問題答案想到的第一個地方。文件有各種格式，適當的文件是最好的，但良好的程式碼註解可以一樣好。如果沒有文檔，或者只是在部落格發表的一個簡單例子，那麼你可能要考慮其他選擇。良好的文檔表明該插件的作者關心你這樣的用戶。它還表明，他們已經研究過其他插件，知道好文件的價值。

　　6.可憐的支持記錄

　　缺乏支持，表示發現問題時將難以得到幫助。更引人注目的是，它表明該插件有一段時間沒更新了。軟體開源的一個好處是它吸引很多眼球，幫助你調試和改進。如果作者沒有談到這些人，該插件將不會更新。

　　你考慮的插件最後一次更新是在什麼時候？最後一次回答留言是什麼時候？雖然不是所有的插件都需要像jQuery plug-ins 這個網站一樣有個強而有力的支援系統。警惕那些從來沒有更新的插件。

　　擁有歷史技術支援記錄，作者回應bug或將強需求，是一個綠色標誌。擁有一個支援論壇進一步表示這個插件有很好的支持，即使不是作者至少有論壇給你解決問題。

　　7.沒有壓縮版本

　　雖然事一個相當小的警示，如果插件的創建者並沒有根據原始碼提供一個壓縮版本，那麼他們可能不會太關注表現。當然，你可以自己去壓縮，但這個警示不是討論浪費時間的問題：這暗示了插件可能包含更嚴重的效能問題。

另一方面，提供壓縮，打包和gzipped版本下載是一個跡象。

　　8.需要奇怪的Mark-up

　　如果一個插件需要mark-up，那麼這個mark-up應是高品質的。它應符合語義semantic sense且足夠靈活。除了很爛的前端技術，奇怪的mark-up也會讓整合變得更加困難。一個好的插件插入幾乎任何涵蓋了任何你常用mark-up；使用一個壞插件還不如去跳火圈。

　　在某些情況下，嚴格的mark-up是必要的，所以應該允許在一定範圍內的使用。基本上，更具體的功能，更具體的mark-up需要。完全靈活的mark-up是從任何自然下降jQuery的選擇是最簡單的整合。

　　9.過度使用CSS

　　許多的jQuery插件包含了CSS，css的品質和JavaScript重要是一樣的。過多的CSS肯定是個壞標誌。但什麼是「過度」取決於插件的目的。注重顯示，如燈箱或UI插件，比簡單動畫驅動的插件要更多的CSS。良好的CSS樣式，讓程式更容易修改以適應你的主題風格。

　　10.沒有其他人使用它

　　jQuery的使用者數量龐大，最體面的插件將可能對某事有他們寫的，即使它是一個「50 jQuery [fill in the blank]」。例如你做了一個簡單的Google搜尋插件，你搜尋結果很少，你可能要考慮其他選擇，除非該插件是全新的，或者你會找個專業寫插件的工程師來修改它。

　　11.使用與觀察

　　測試插件最好的方式是簡單地在伺服器上運行，看看結果。首先，它是否破壞了一些規則？請務必看看JavaScript的程式碼片段。如果外掛程式包含一個樣式表，請看看每個網頁的版面和樣式上的錯誤。

　　此外，請問該插件的效果如何？如果它運行速度很慢或網頁載入相當滯後，還是考慮其他插件吧。

　　12.使用JSPerf進行績效評估

　　把你的插件展現效果提升到新的水平，使用JSPerf進行測試。 Benchmarking會執行的一組操作多次，然後傳回平均執行時間。 JSPerf提供了一個簡單的方法來測試一個插件運行的速度有多快。這是挑選兩個幾乎相同插件的重要的方式來。

　　13.跨瀏覽器測試

　　如果一個插件有很多CSS，一定要在所有你希望支援的瀏覽器測試樣式。記住CSS可以來自外部樣式表和內部JavaScript。

　　即使插件沒有任何CSS，無論如何要在所有瀏覽器上檢查JavaScript錯誤（至少在你支援的IE瀏覽器的最早版本）。 jQuery的核心已經處理了大多數跨瀏覽器問題，但插件往往使用一些數量的純JavaScript，這往往會打破舊瀏覽器的規則。

　　14.單元測試

　　最後，進一步考慮跨瀏覽器測試–單元測試。單元測試是測試元件插件的簡單方法，支援任何瀏覽器或平台。如果該外掛程式作者的下載包裡已經包含了單元測試，可以打賭，這款外掛程式能在所有跨瀏覽器和平台上運作。不幸的是，極少數外掛程式才包含單元測試數據，但這並不代表你不能使用QUnit plug-in執行自己的單元測試。

　　用最小的設置，測試是否該插件的方法返回了預期結果。只要有一個測試失敗，不要在這個插件上浪費你的時間。在大多數情況下，執行單元測試有點浪費時間，但QUnit可以幫助你確定插件的品質。

　　結論

　　當評估一個jQuery插件的質量，先評估程式碼品質。 JavaScript是否有優化、沒有錯誤？ CSS是否已經調整過並且有效？ mark-up的命名是否有語意，夠靈活？這些問題都歸結為最重要的問題：這個插件很容易使用？

　　jQuery的核心進行了最佳化和錯誤檢查，支援它的不僅有核心團隊成員，還有整個jQuery社群。雖然用同樣的標準衡量jQuery插件不公平，但至少應該有一些相同的審查標準。