你真的需要一個jQuery插件嗎
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'));</pre>
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]”。比如你做了一個簡單的谷歌搜索插件，你搜索結果很少，你可能要考慮其他選擇，除非該插件是全新的，或者你會找個專業寫插件的工程師來修改它。
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 插件不公平，但至少應該有一些相同的審查標準。
來自: www.lamppr.com
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！