2015年10月25日 星期日

javascript 程式撰寫/編碼風格

良藥苦口 忠言逆耳 程式碼保持乾淨一致的風格很重要。 整齊好讀才容易除錯; 別人看得懂才有機會參與你的專案。 最近比較認真學 javascript, 對於 「變數不必宣告就能用」 感到很困擾 -- 這很容易出錯, 太不科學了啊! 還好有工具可以幫忙, 不必等 (最好不要等) 你憝悉 js, 從今天起就開始善用囉嗦龜毛的 jshint 與 jscs, 即使是像我這樣的新手也很容易被調教寫出 (至少形式上看起來) 漂亮整齊的程式碼。

假設你的程式叫做 main.js, 並且假設它用到 d3.js 。

首先用 root 的身份安裝 jshint: npm install -g jshint, 然後用 jshint main.js 就可做初步檢查。 又根據 JavaScript, the winning style 這一篇, 把它所建議的設定貼到你自己的 ~/.jshintrc 。 再次執行 jshint , 發現它變得很龜毛, 印出很多錯誤。

再來還是用 root 的身份安裝 jscsnpm install -g jscs。 它一定要有設定檔才能執行。 從 這裡 隨便挑一個 -- 我挑 google -- 把你挑的 json 檔貼到你自己的 ~/.jscsrc 。 一樣執行: jscs main.js 看到一堆多到爆錶的錯誤訊息了嗎? 恭喜你開始聽到逆耳忠言了!

常見的錯誤及修正方式如下:

  1. [jshint] 變數未宣告: 自己的變數當然就自己宣告; 但系統或函式庫所提供的全域變數該怎麼辦呢? 例如 console, window, d3 (d3.js 裡面定義的全域變數)? 根據 這個問答, 只要在程式碼最開頭加上這樣的註解, jshint 就不會再抱怨這幾個變數未定義: /* global window, console, d3 */ 雖然解答是來自 jslint 的文件, 但同樣適用於 jshint。
  2. [jscs] 縮排 (indentation) 空格數不正確: 可以用這個 線上工具 指定每一層縮排的格數。
  3. [jscs] 沒有採用 cammelCase 的方式為變數命名: 我自己原先習慣用底線方式命名 (some_useful_variable), 所以寫了 toCammel.perl 來把我原始碼當中的所有 (含底線的) 變數名稱換掉。 注意: 我的 perl 程式可能會毀掉你的 js 程式! 請務必幫原來的程式碼保留備份, 充份測試後才可取代!

vim 用戶可以這樣做:

mkdir -p ~/.vim/autoload ~/.vim/bundle
cd ~/.vim/autoload
wget https://tpo.pe/pathogen.vim
cd ~/.vim/bundle
git clone git://github.com/walm/jshint.vim

並且在 ~/.vimrc 裡面加上一句: execute pathogen#infect() 此後就可直接在 vim 裡面打 :js「tab鍵」 檢查語法, 不必跳進跳出。 (從 這裡 看來的。) Geany 用戶請見 既輕鬆上手又無限擴充的跨平臺文字編輯器 「執行外部命令」那一節。

我自己最關心的是變數未宣告的錯誤, 所以對我而言 jshint 很重要; jscs 只是順便而已。 遇到太龜毛的規定 (「一句 var 只能宣告一個變數」、 「一列不能超過 80 個字元」) 我就乾脆改設定檔放寬規定。 通常拿錯誤訊息當中的一個字到設定檔裡面去撈, 就可以猜出來該如何改。 如果遇到比較麻煩的狀況, 請留言。 有沒有覺得取悅 jshint 跟 jscs、 讓錯誤訊息逐漸減少到 0, 是一件很有成就感的事呢 :-)

沒有留言:

張貼留言