2012年10月19日

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

A+
「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 相關筆記:

沒有留言:

↑TOP

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。