Maintainable Javascript:作者Nicholas Zakas演說重點節錄

Maintainable Javascript作者Nicholas Zakas在Fluent 2012有一場演說,以下是重點節錄:

為什麼要讓程式易維護? 因為大部份時間都是在針對既有的程式作修改加強,而非創造新的。而所謂的修改加強,就是維護的意思。由於90%的時間都是在做維護的動作,程式的可維護性自然是很重要的議題。好維護的程式一開始可能需要很多前置作業,但長期下來會減少許多不必要的時間浪費,進而加速開發的速度。

誰在意維護性?

  • 公司:公司僱用員工是請員工來創造有價值的產物,不可維護的程式碼在員工離開之後就會失去其價值。
  • 同事:如果程式超過一個人碰觸,那麼可維護性就很重要,要保證所有接觸到的人都能有一個共通的語言。
  • 你自己:自己也可能維護自己曾寫過的程式,不好維護的程式過了一陣子之後有很大可能連作者自己都忘了為什麼要這麼寫。

由於前端工程(or 網頁工程)是新興產業,所以規則還在慢慢的成行中,但在可維護性的議題之下,統一規則是最重要的,確保了所有人都能看懂同一個程式碼。

維護性

可維護的程式碼應該要能持續的運作五年而不需做任何重大的改變。(aka. 砍掉重練)

  • 直觀: 看了就能大致瞭解在幹嘛
  • 可理解: 無法一眼就知道在幹嘛的,提供方法來解釋(注解或文件)
  • 易修改: 修改某段程式碼不容易導致其他地方出錯
  • 可擴充: 能一直增加功能而不需修改架構
  • 易除錯: 能輕易找出問題點
  • 測試性: Unit Test, Functional Test能提升維護性

如何提升維護性:Code Conventions

Code Conventions可以說是程式的基本準則,一個project/組織裡面只能有一種code conventions否則會混亂,也就降低了維護性。

Code conventions分成兩種:

  • Code Style:程式碼的格式,該長得什麼樣子
  • Programming Practice:所謂的best practices,寫程式時的準則或基準模式,能提升維護性、減少bug的產生

Code Style

統一的code style讓你能用同一套方式去看所有的程式碼,不需額外花費不必要的力氣去理解。

一些比較常見的style guide:

(還有其他的,請見slide)

重點:style只能有一種,否則就沒有意義。

Identation

tabs或是空白都可以,但要統一,不要混用。使用空白也要確定每個identation都是固定寬度(ex: 2 or 4)。identation的用法參考coding style,目的是讓檔案好讀,同樣階層的程式碼擁有同樣的identation。

每行長度

每行長度不超過80字元。過長的程式碼造成閱讀上的困難之外(勢必要左右捲動),使用版本空管系統(git, svn)時也更容易發生merge conflict。

注解

注解就是要讓人瞭解這段程式碼在幹嘛。不要解釋很明顯的事項。每個函式的前面最好有注解解釋這個函式的用途,複雜的程式邏輯也需要注解來幫助人們理解。或是那些特異的程式寫法,看起來像是錯的寫法(但你知道是對的)也需要注解,避免後續修改時反而改"錯"了。

命名

  • 取名要貼切,能貼切的顯示變數/函數做什麼事情
  • 變數通常為一個物品,名詞
  • 函數通常是一個動作,故以動詞起始。布林值函數以is/has開頭 ex: isValid(), hasItem()
  • 避免無意義的名稱:temp, foo(loop裡的counter變數例外)

CamelCase

Javascript API本身就使用CamelCase,所以最好是沿用。縮寫?可以全部都大寫或是首字大寫,重點在於,統一規範!請勿混用,ex: XMLHttpRequest。

例外:常數全大寫,字與字間底線分隔 ex: MAX_LENGTH;Constructor首字大寫。

Programming Practices

There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies and the other way is to make it so complicated that there are no obvious deficiencies. C.A.R. Hoare, Quicksort發明者

保持js/html/css分離

js檔就該只有javascript程式,html裡面不該有css設定/js程式,css裡面不該有js的函式。

why?簡化除錯流程。

tip: 很多js 會需要render DOM,因此會使用到html字串,但我們可以利用handlebar http://handlebarsjs.com/, mustache https://github.com/janl/mustache.js/ 等lib把html template分離出來。重點就是屬於哪邊的東西就清楚的放在哪裡,混在一起就會增加複雜性,減低維護性。

Event Handler

Event handler能做的事情應該只有一件:處理event物件。與event無關的商業邏輯應該另外寫。每個函數都應該有自己明確的功能,而event handler就是處理event。

好處: 商業邏輯有可能不一定要被Event來觸發,分割邏輯之後能夠更有彈性的使用。(詳見slide)

別去修改不屬於你的物件

Javascript很自由,你可以隨意修改任何物件,即使那物件不是你寫的。但隨意修改他人物件所產生的問題跟改變統一規範一樣,降低系統維護性。當大家預期A物件的功能是B時,隨意修改會造成很大的問題。也別在不屬於你的物件新增功能,你不會知道這個物件未來會不會新增一個與擬新增的功能完全同名且用法不同的功能。

文章

避免全域變數/函數

如果大家都使用全域變數,將會很容易互相蓋台,也會很混亂,就像把家裡所有的物品都放在客廳桌上一樣。

Throwing Errors

對於預期可能會產生的失敗狀況,throw error。就可以簡單地知道錯誤出在哪裡。

避免 x != null

僅只判別x 不是null,但通常我們會希望變數有個形態,那麼不如用instanceof/typeof。

instanceof 用來檢測物件是否為某種object

typeof用來檢測是否為某種primitive type ( boolean/number/string/function/object)

使用上的時候要注意 typeof null == "object"

分離程式與設定

所有未來可能會被修改的數值,都最好與程式分離,才方便修改。以下是幾個應該分離出來的:

  • URLs
  • 顯示給使用者的字串
  • HTML(前面有說過可以用html templateing lib)
  • 設定數值:如一頁顯示幾筆資料等
  • 重複使用的特殊數值
  • 任何未來可能需要修改的數值

AUTOMATION

利用Build Tools達成自動化。Build Tools可以完成的功能主要有下列七大類:

  • 加入/移除debugging code
  • 產生說明文件
  • 檢測程式是否有問題
  • 縮小檔案大小
  • 合併檔案
  • 測試
  • 部署

Build tools

常用的工具:

加入/移除debugging code

產生說明文件

檢測程式是否有問題

縮小檔案大小

總結

  • 使用Code Style讓大家都說同一種語言
  • Loose coupling讓你修改&除錯更輕鬆
  • Programming practices讓你更容易除錯
  • 使用Automation tools加速開發

結語

Always code as if the guy who ends up maintaining your code to be a violent psycho who knows where you live.

演說影片檔及投影片

沒有留言:

張貼留言