Javascript 設計模式(筆記)__(1) 精要

「Javascript 設計模式」不是一本初學者的書，作者自言這是給 "專業程式開發者" 看的，而我這業餘愛好者並不屬於此領域。但這本書對於 Javascript 寫了一段時間的人還是有很大的幫助，可以讓程式「寫得更有效率、執行得更有效率、dubug 的時間縮短、日後維護更方便」，以上這幾點對我而言有深刻的體驗。

只是礙於實力不夠，書中大概有一半的章節看不懂，也可以說還沒寫到那麼複雜的程度，因此筆記只能節錄自己可理解、以及好歸納的部分，適合已經學習 Javascript 一段時間的讀者參考，而高手則建議請直接買書來看吧，因為這是一本高手推薦的參考書籍！

本系列內容摘要採用正常字體，而自己的筆記、註釋使用斜體。

第二章：精要

一、可維護的程式碼具備條件：

1. 可讀性
2. 一致性
3. 可預料性
4. 看起來像同一人寫的
5. 文件化


第 1 點指使用大量空格、縮排，雖然增加檔案大小，但讓程式碼清晰易讀，日後 debug 可節省時間； 第 2 點是指變數的命名、寫程式碼的規則與習慣等等必須統一； 第 5 點是指重要程式碼加上註釋。

程式寫多了以後就知道日後維護的時間不亞於撰寫的時間，因此以上 5 點非常重要。



二、減少全域變數：才能避免與第三方程式碼衝突。


舉個例子，「這個網頁」 → 「常見問答」的第一個問題，作者指出他的 "最新文章小工具" 的函數名稱與 "Abin最新文章小工具" 的函數名稱一樣，導致兩個小工具產生衝突。

因此讀完本書之後可以瞭解，一個程式最好只有一個全域變數，例如本站的「推文系統」(可參考原始js檔)就是詢此模式撰寫，全域變數只有 "WPS_main" 一個。


三、函式開頭使用單一個 var 敘述的優點

1. 找變數時只需要只一個地方
2. 避免邏輯錯誤
3. 減少全域變數的產生
4. 減少程式碼


以前寫程式較隨性，需要用變數時才臨時 var，程式一長就知道麻煩來了，所以現在知道要把變數集中在開頭宣告，且只需要一個 var 即可，例如：

var a = "hello",
    b = 3,
    c = [];

四、For 迴圈

1. 舊的寫法：

for (var i = 0; i < wArray.length; i++) {
  // code;
}
2. 比較好的寫法：

var i,
    max = wArray.length;

for (i = 0; i < max; i++) {
  // code;
}
3. 可以打包複製帶走的寫法：

for (var i = 0, max = wArray.length; i < max; i++) {
  // code;
}

用 max 取代 wArray.length 可增加系統效率，迴圈不必每次都重新計算 wArray 的長度。

第 2 點是遵從單一 var 的寫法，缺點是迴圈要複製到其他地方時比較麻煩；第 3 點是方便迴圈複製時的寫法，視情況採用哪一種即可。


五、避免使用 eval()

1. 因為 eval 刮號內的字串需要被解析才能執行，嚴重拖慢效能。同樣的例子還有 setTimeout("abc(1, 2, 3)", 2000)，雙引號內的字串需要被解析，建議改成以下：

setTimeout(function () {
  abc(1, 2, 3);
}, 2000);
2. 使用 eval 有安全性問題，很容易被駭。


談到 "將字串解析才能執行" 會降低系統效能，聯想到常常用的 <span onclick="//some code"> xxx </span>，這些在 HTML 標籤裡面的事件其實也都是需要將字串解析為 javascript 才能執行，以後除非不得已，也許最好改成這樣寫比較好：

<span id="abc"> xxx </span>
<script>
document.getElementById("abc").onclick = function () {
  // some code;
}
</script>

六、編碼規範

建立編碼規範可讓程式碼維持一致、可預測、容易閱讀及理解。

1. 沒有縮排的程式碼無法閱讀，大括號中的所有東西都該縮排。
2. 永遠都應加上大括號，就算在 if 或 for 之後只有單行敘述。
3. 左括號跟程式碼放在同一行(不要換行)。
4. 使用空格的好地方：

  A. for 迴圈的分號之後、變數之間、for 的後面，例如:

for (var i = 0, max = wArray; i < max; i++) {}
  B. 陣列物件的逗號後面、物件屬性間的逗號後面、物件屬性的值之前、函式參數的逗號後面
  C. 大括號的左括號之前、"function" 後面

以上兩點的例子：

var a = [1, 2, 3],
    b = {a: 1, b: 2},
    c = function (a, b, c) {};
  D. 運算元與運算子的前後，例如 + - * = < > == && || 等等。
  E. 大括號的右括號與 else、while 之間。

使用空格會增加檔案大小，但使用最小化工具即可解決這問題。


推薦一個我常用的壓縮 js 線上工具：「YUI Compressor Online JavaScript/CSS」


七、命名方式一致

1. 小駝峰式：例如 myAppFunc()
2. 大駝峰式：例如 MyAppFunc()
3. 全大寫：通常用於全域變數、或是值不會改變的變數(ex: var PI = 3.14;)。


八、撰寫註解

1. 寫完程式的當下都會認為對程式碼很瞭解，但一個禮拜後回來看，就會很難想起程式碼是如何運作的。

2. 不需註解每個變數或每行程式碼，但通常要為"函數的參數"、"回傳值"、"不尋常的演算法"寫註解。最好可以只讀註解和函式、屬性的名稱就瞭解程式在做什麼。


第 1 點我有很深的體認，因為過去完全沒有寫註解的習慣，當初寫十分複雜的「多層樹狀標籤」，主要也是為了節省程式碼行數而用了"不尋常的演算法"，現在要我去回想程式碼是如何運作的，可能得花上更多的時間才行...


寫完第一篇筆記後，開始覺得過去的程式都要重寫了...至少新版本的 hack 及工具都要按新觀念來撰寫才行。

Javascript 相關筆記：