JavaScript Patterns

CHAPTER 2

Essentials

jason wang

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

全域變數問題 1. 你可以不用宣告直接使用變數 2. JavaScript 有隱含全域變數的觀

念

意思就是未宣告使用的變數都會自動成為全域變數 !!?

隱含的全域變數

function sum(x, y) {

result = x + y; // 隱含全域變數return result;

}

因此只要呼叫 sum 函數一次便會在全域命名空間中多一個變數 result

超方便的 ( 大誤

另一種隱含全域變數陷阱

function foo() {

var a = b = 0; // a 為區域變數 b 卻是全域變數…

}

因為由右至左的運算首先計算 b = 0 但 b 未宣告 , 運算式回傳 0

並指派新區域變數 var a

整段運算式如同 ： var a = (b = 0);

如何避免隱含全域變數陷阱

1. 永遠使用 var 宣告變數 2. 宣告中注意連鎖賦值問題

function foo() {

var a ,b;

a = b = 0;

}

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

function func() {

var a = 1,

b = 2,

sum = a + b,

myobject = {}

}

分散的 var 造成的問題myname = 'global';

function func() {

alert(myname); // 'undefined'

var myname = 'loacl';

alert(myname); // 'loacl'

}

很遺憾的 alert(myname); 會印出 undefined ( 淚目

因為 myname 在 func 中被視為區域變數雖然宣告後面才發生 ...( 變數由內往外搜尋 )

所以為避免混淆最好在開頭時就宣告要使用的變數

for 迴圈

減少對 HTMLCollection 重覆存取的動作例如 document.getElementsByName() document.getElementsByClassName() document.getElementsByTagName()

for 的優化1. 事先取得某物件的集合長度

var i,

max = wArray.length;

for (i = 0; i < max; i++) {

// code;

}

2. 將變數宣告放至 for 內

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

// code;

}

for 的極致變化 1. 少用一個變數 2. 遞減至 0 : 因為和 0 比較，會比和陣列

長度或任何東西比較更有效率

模式一

var i,

myarray = [];

for (i = myarray.length; i--;) {

// 操作 myarray[i];

}

模式二

var myarray = [],

i = myarray.length;

while (i--) {

// 操作 myarray[i];

}

避免隱含的型別轉換

1. JavaScript 在比較變數時會隱含的做型別轉換 列如 : false == 0 或 ''== 0 會回傳 true

2. 使用 === 和 !== 運算子做比較，可以同時比較運算結果的型別跟值

var zero = 0

if (zero === false) {

// 不會執行 因為 zero 是 0 不是 false

}

避免使用 eval()

1. 因為 eval 刮號內的字串需要被解析才能執行，嚴重拖慢效能

2. 使用 eval 有安全性問題，很容易被駭 3. 改善 setInterval() , setTimeout()

錯誤寫法

setTimeout('myFunc(1,2,3)', 1000);

修正後

setTimeout(function(){

myFunc(1,2,3);

}, 1000)

改用 new Function() 取代 eval()

console.log(typeof un); // undefinded

console.log(typeof deux); // undefinded

// eval() 與 new Function() 的 宣告方式

var jsstring = 'var un = 1; console.log(un);';

eval(jsstring); // log 1

jsstring = 'var deux = 2; console.log(deux);';

new Function(jsstring)(); // log 2

// 由下列 log 得知 eval() 會干擾到區域的變數

// 而 new Function() 則是內部封閉著變數

console.log(typeof un); // number

console.log(typeof deux); // undefinded