JavaScript Patterns 一書推薦

前一陣子同事推薦我看 JavaScript Patterns，翻一下目錄之後發現其中涵蓋了筆者之前曾經翻譯過的你其實並不懂 JavaScript 中所列的中階與進階等級所必須了解的知識，並且很有系統化的解釋以及提供對應的實作方式。這本書的書名叫 JavaScript Patterns，所以有列了很多經典的 JavaScript 寫法，有些 patterns 都是可以在一些有名的 JS library 中找到的。

但後面有一個章節是用 JavaScript 實作一些著名的 Design Patterns，這部份就不是很好，不僅沒有好好的解釋所要實作的 Design Pattern 的意義，實作的部分也是乏善可陳。但還好整本書就只有C H7 是這樣，其他的部分真的是很值得一讀，尤其是想要從有一點經驗的 JavaScript Programmer 進階到更高一級的話，這本書好好的讀懂應該是幫助不小（另外，如果要去應徵 Mozilla 的 Front-End Engineer 的話，大部分面試題目應該在這本書都有 XD)。

Antipatterns

書的一開始有提到書名中的 Patterns 在這邊有三種：Design Pattern / Code Pattern / Antipattern。我覺得 Antipattern 的部份都很有參考價值，應該要獨立寫出來而且應該可以稱為：JavaScript, the Bad Parts.

比如有一個很著名的 variable declaration hoisting problem：
通常自認會寫 JavaScript 的人很多都常常在這種 code 裡面跌跤，畢竟這跟一般的語言特性相差極大。必如 C++ 中一般會建議延後變數宣告，所以按照一般強型別語言的特性直覺就會覺得第一個 alert 的 variable resolving 會找到 global  的 myname （寫了一小段 C++ 來驗證一下，真開心我還記得 C++ 怎麼寫)。 但由於 JavaScript 的變數宣告俱有不管你宣告的前後，一律都提到該 context scope 下的最前面，所以這邊只能建議 C 語言風格的寫法將所有會用到的變數宣告在最前頭。

Code Patterns

在看書中介紹的 code patterns 有幾個令人印象深刻的，比如強迫讓人使用你的 class (JS 沒有 class，這邊只是為了方便暫稱) 時一定是使用 new 來呼叫 constructor 即使使用的語法是直接呼叫 constructor function？書中介紹了一個技巧，在 constructor 中透過 instanceof 檢查 this 是不是自身 class 的 instance ，不是的話就直接 new 一個 instance 然後 return。書中的例子如下：

很簡單的方法，但是在某些情況下可以避免許多誤用的狀況。

另一個很著名的是 Immediata function (或者叫做 self-invoke function)，主要的好處是透過 function scope 來限制住變數的 scope，可以達到很好的模組封裝效果，比如 jQuery 就是使用這 pattern 很經典的一例。寫法通常有這兩種：
但不知道有沒有人疑惑過為什麼不能樣寫？
上面這種寫法會直接是 syntax error。

Code patterns 中還有很詳盡的解釋 Curry function 並且深入淺出的解釋 prototype inheritance 以及各種 code reuse patterns，都是高手必備的 JS 知識。

結論

這邊筆者並不打算一一摘要所有書中的 patterns，單純推薦好書並且建議真的可以花一點時間研讀一下 JavaScript Patterns，除了探索未知外也可以讓自己回顧一下自己是不是有哪部分 JavaScript 觀念或寫法錯誤的。雖然已經是 2010 年的舊書但還是很有參考價值的。該書作者 Stoyan Stefanov 目前是 Facebook Engineer，並且還 maintain 著 JSPatterns.com，裡面有許多書中並未包含的 patterns。如果一看了之後對於 JavaScript Patterns 上癮了，還可以來看一下 Addy Osmani 2012 年寫的 Learning JavaScript Design Patterns。

Enjoy the pattern reading !

K

我是 K，以前幻想著可以做些偉大的事。但發現把一件簡單的事情做到很好就是一件很難又很厲害的事。所以現在正處於一個把簡單的事情做好的狀態。