跳到主要內容
黯羽輕揚每天積累一點點

JS 自動化

免費2015-05-16#JS#前端工程化#前端可维护性#前端自动化工具

JS 自動化不就是前端工程化的縮影嗎，使用自動化工具也能提高可維護性，畢竟人比機器更容易犯錯

###寫在前面

記得當時刷筆試題的時候有了解過「前端工程化」，無非就是用自動化工具幫助開發人員完成一些小細節，提高工作效率之類的，不過當時可沒想到可維護性這麼遠

構建專案 -> 模組化開發 -> 複用 -> 測試 -> 除錯 -> 驗證 -> 釋出 -> 版本控制，這整個流程的很多環節都可以用自動化工具解放人力，提高專案的可維護性

##一。自動化的優缺點

js 開發中使用自動構建系統的優缺點如下：

###1. 優點

  • 自動原��碼控制能夠區分清楚用於除錯的程式碼和將來釋出的程式碼，開發階段不必估計影響線上產品

  • 靜態程式碼分析能自動完成（JSLint、JSHint）

  • 釋出前可以進行多種方式的加工（合併檔案、壓縮程式碼）

  • 自動化測試，能很快發現錯誤

  • 很容易重做一次重複性的工作（比如再次合併檔案、壓縮程式碼）

###2. 缺點

  • 有些開發人員用不習慣，因為改動程式碼之後要重新構建一次，而不是傳統的儲存檔案，重新整理頁面

  • 部署到線上的產品程式碼與開發階段的程式碼不同，難以追蹤 bug

  • 經驗不足的開發人員可能不會用這種自動構建系統

##二。檔案目錄結構

一般不同的專案需要不同的目錄結構，但下面給出的幾條原則是廣泛適用的：

  1. 一個物件對應一個檔案

避免多名開發人員修改衝突，檔案越少，衝突的概率越大，一個物件對應一個檔案能最小化這種風險

  1. 把相關檔案用資料夾分組

這樣管理程式碼更容易根據功能定位對應程式碼

  1. 分離第三方程式碼

最好用 CDN 引入第三方庫，這樣就不用對第三方程式碼進行多餘的原始碼控制了

  1. 分離構建產物

應該把構建的產物放在另一個資料夾裡，不要進行原始碼控制，避免無意中反覆構建帶來的時耗

  1. 把測試程式碼放近點

要把測試程式碼放在很容易找到的地方，比如和原始碼放在一起，或者 test/ 目錄下與原始碼路徑相似的位置

##三。自動化的步驟

###1. 使用自動構建工具

  • Ant：基於 Java 的

  • Buildy：基於 NodeJS 的

  • Gmake：UNIX 粉喜歡的

  • Jammit：基於 Ruby 的

  • Jasy：基於 Pathon 的

  • Rake：基於 Ruby 的

  • Sprockets：基於 Rack 的

###2. 使用自動程式碼檢查工具

  • JSLint：道格拉斯做的好工具

  • JSHint：和上面的差不多，但配置選項更多

###3. 使用自動合併/加工檔案的工具

合併檔案，插入版本號什麼的，用第一步用的自動構建工具就能搞定

###4. 使用程式碼瘦身/壓縮工具

瘦身和壓縮的區別是瘦身是針對程式碼語法的優化，讓原始碼更短；而壓縮就是把純文字的原始碼檔案變成別的更小的檔案，壓縮後不能再編輯，除非先解壓

瘦身工具比較多，作者推薦了幾個：

  • YUI Compressor：Yahoo! 的，基於 Java，能縮短變數名、去掉空白字元、去掉註釋，還能給 CSS 瘦身

  • Closure Complier：Google 的，基於 Java，能進行深層次優化（去掉不用的方法，把只用一次的方法扔進閉包），比 YUI 的瘦身效果更好

  • UglifyJS：基於 NodeJS，還能合併 var 語句

###5. 使用文件自動生成工具

  • JSDoc：基於 java 的

  • YUI Doc：用 js 寫的

  • 其它：Docco、Dojo Documentation Tools、JoDoc、Natural Docs、NDoc、PDoc

###6. 使用自動測試工具

  • YUI Test Selenium Driver：（作者總是喜歡把 Yahoo! 的東西排前面，好員工哇）YUI 的單元測試框架

  • Yeti：利用各個瀏覽器進行 js 測試

  • PhantomJS：提供 WebKit 瀏覽器環境，可以配合 QUnit 和 Jasmine

  • JsTestDriver：Google 的單元測試框架，支援自動瀏覽器測試

  • Jasmine：行為驅動的 js 測試框架

  • QUnit：JQuery 的單元測試框架

  • Selenium：功能測試框架，支援瀏覽器測試

###7. 把所有自動化工具整合起來

應該至少構建 3 個版本：

  • 開發版

要求是儘量快，否則影響開發人員火力全開

具體任務是：清理檔案 -> 初始化構建環境 -> 檢查程式碼 -> 合併檔案

注意：不要把自動測試環節放進來，因為費時間，開發版構建要求儘量快

  • 整合版

用來排查錯誤，應該每隔一段時間執行一次檢查並報告錯誤

具體任務是：程式碼瘦身 -> 測試 -> 文件生成

注意：文件生成環節是可選的，因為加進來可能會影響錯誤檢查（錯誤可能來自文件生成環節）

  • 釋出版

要保證 0 錯誤，穩定可靠的產品

具體任務是：加工檔案（添上版本、版權資訊等等）

注意：可以考慮把部署等釋出任務加進來，也可以選擇把整合結果直接加工後部署，但要保證整合結果沒問題

###8. 使用 CI 系統

CI（Continuous Integration）系統是用來增強對整合版的錯誤排查的，持續整合可以每隔一段時間自動執行並檢查程式碼報告錯誤，甚至聯絡錯誤相關的具體開發人員

###參考資料

  • 《Maintainable JavaScript》

###後話

到這裡整本書就結束了，這本書是淘寶 UED 部落格推薦的，還算不錯，也沒有特別晦澀難懂的英文句子。

200 頁的書斷斷續續看了近 3 個星期，不算太慢，當然，在這期間還看完了《JavaScript 語言精粹》、《The Book of CSS3》，學了 SASS 入門，寫了 10 篇博文

評論

暫無評論，快來發表你的看法吧

提交評論