為什么80%的碼農都做不了架構師?>>> ??
1. 不使用script自閉合標簽
script中使用自閉合標簽,雖然他在XHTML中合法,但是不符合HTML規范,而且得不到某些瀏覽器的正確解析。我曾經就在引入EXT時使用此方式,導致無法正確執行腳本。
<script src="example.js"/> --> <script src="example.js"></script>
2. 將腳本放到</body>
前面
如果將腳本文件放到<head>中去,則在顯示頁面前先得下載執行腳本,增加了用戶等待的時間。樣式表放在<head>
中防止內容顯示不正常。一般方式如下:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><link rel="stylesheet" type="text/css" href="theme.css" />
</head>
<body><!-- html代碼 --><script src="example.js"/>
</body>
</html>
3. 在函數內使用嚴格模式
如果在函數外部使用嚴格模式,則有可能會使第三方類庫,和同事的代碼不能正常工作,在函數內部則只能影響自己的代碼,不至于影響到別人的代碼。
function myfunction(){"use strict";//函數代碼
}
4. 不要省略語句結尾的分號
代碼結尾處沒有分號容易引起壓縮錯誤,另外在某些情況下可以增進代碼的性能,應為解釋器不比在花時間推測在什么地方插入分號。還有一種更常見的問題就是,自動插入分號有時會出錯,所以并不建議省略分號。
5. 使用var
定義變量
定義變量時使用var關鍵字,并且全部提前至函數的最開始。
這樣做的好處就會避免無意識的創建出全局變量,而且讓你的代碼更容易理解。
function myfunction(){var result = 10 + value;var value = 10;return result;
}
這個函數語法上是沒有問題的,但是不是很直觀,不符合人的邏輯,修改如下會更好:
funciton myfunction(){var result;var value;result = 10 + value;value = 10;return result;}
給大家解釋一下,上面兩個代碼是等價的,result的值都是NAN.JavaScript會把函數內所有的變量聲明提升到函數的最開始,代碼一在代碼執行時會變成代碼二的樣子,當運行到result = 10 + value;
時,value的值為undefined,和10相加為NAN,然后value被賦值為10。
關于全局變量帶來的問題,大家想必也比較清楚,不然也不會出現命名空間的概念。
6. 函數先聲明再使用
和變量聲明一樣,函數聲明也會被JavaScript引擎提前,因此在代碼中,函數的調用可以出現在函數的聲明之前。 還有一點值得注意,函數聲明不應該出現在語句塊之內,比如:
if (condition) {function myfunction(){alert("true");}
}else{function myfunction(){alert("false");}
}
myfunction();
運行代碼我們發現會輸出會和瀏覽器有關,在Chrome 51和Firefox 46輸出true,IE 10下輸出false。所以盡量避免在語句塊中聲明函數。
7. 慎用typeof underfined null判斷
null是一個特殊值,我們經常和undefined混淆,下列場景應使用null:
- 用來初始化一個變量,這個變量可能賦值為一個對象。
- 用來和一個已經初始化的變量比較。
- 當函數的參數期望傳入對象時,用作參數傳入。
- 當函數的返回值期望是對象時,用作返回值傳出。
下面一些情況不應該使用null:
- 不要使用null來檢查是否傳入了某個參數。
- 不要用null來檢查一個變量是不是初始化。
理解null最好的方式是將他當做對象的占位符。我們經常將null和undefined搞混的原因是我們認為null和undefined都是變量未初始化,但是只有undefin代表一個變量還沒有被初始化,null代表初始化為對象。看如下代碼:
var person;
console.log(typeof person); //undefined
console.log(typeof foo); //undefined
var house = null;
console.log(typeof house); //object
所以盡量不要用typeof判斷變量是否初始化,你并不能確定是變量不存在還是變量未初始化,返回null是你也不能確定變量有沒有被正確的賦值,所以小心使用typeof。
8. 小心使用Number類型
想必大家也知道JavaScript整數支持十進制,八進制,和十六進制的字面值。八進制中如果字面值中的數值超過了范圍,那么前導零將會被忽略,后面的數值當做十進制解析。
console.log(012); //10
console.lgo(082); //82
如果將八進制和十六進制用于小數則會語法錯誤。還有一點,八進制字面量在嚴格模式下是無效的。 關于浮點數計算誤差的問題大家也都清楚,凡是基于IEEE754數值的浮點計算都是這樣,所以永遠不要測試某個特定的浮點數值。
在數值類型中有一個比較特殊的值,NaN(Not a Number),這個數值用于表示本來應該返回數值但是返回的不是數值類型。NaN和任何值都不相等,包括NaN本身。我們可以用isNaN()函數測試。
9. 使用邏輯運算動態賦值
大家比較喜歡的操作
var person={age:10
}
var condition;
var myVar = condition && person;
alert(myVar)
如果condition轉為boolean類型為false,則myVar = condition,若為true,則myVar = person。
var person={age:10}
var condition;
var myVar = condition || person;alert(myVar)
如果condition轉換為boolean為true,則myVar = condition,若為false,則myVar = person。
10. 不使用with語句
不使用with的一個重要原因是,在嚴格模式下語法本身就是禁用with語句的,這也表明ECMAScript委員會確信不應使用with。我們看如下例子:
var book = {title : "Maintainable JavaScript",author: "Nicholas C. Zakas"
};
var message = "The book is ";
with(book) {message += title;message += "by " + author;
}
上述代碼的問題在于我們很難分辨title和author出現的位置,也難分辨出message到地址一個局部變量還是book的一個屬性,而且JavaScript引擎和壓縮工具無法對這段代碼進行優化,應為它們無法猜出代碼的正確含義。