快捷導(dǎo)航

每日十條JavaScript經(jīng)驗(yàn)技巧(一)

更新時(shí)間：2016年06月23日 08:55:49 作者：我是偶哦

本文是每日十條JavaScript經(jīng)驗(yàn)技巧系列文章的第一篇，給大家匯總介紹一些在JavaScript使用過(guò)程中的注意事項(xiàng)，非常的簡(jiǎn)單，都是個(gè)人在平時(shí)項(xiàng)目中的一點(diǎn)小小的總結(jié)，希望對(duì)大家能夠有所幫助

1. 不使用script自閉合標(biāo)簽

script中使用自閉合標(biāo)簽，雖然他在XHTML中合法，但是不符合HTML規(guī)范，而且得不到某些瀏覽器的正確解析。我曾經(jīng)就在引入EXT時(shí)使用此方式，導(dǎo)致無(wú)法正確執(zhí)行腳本。

<script src="example.js"/> --> <script src="example.js"></script>

2. 將腳本放到</body>前面

如果將腳本文件放到<head>中去，則在顯示頁(yè)面前先得下載執(zhí)行腳本，增加了用戶等待的時(shí)間。樣式表放在<head>中防止內(nèi)容顯示不正常。一般方式如下：

<!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. 在函數(shù)內(nèi)使用嚴(yán)格模式

如果在函數(shù)外部使用嚴(yán)格模式，則有可能會(huì)使第三方類庫(kù)，和同事的代碼不能正常工作，在函數(shù)內(nèi)部則只能影響自己的代碼，不至于影響到別人的代碼。

function myfunction(){
 "use strict";
 //函數(shù)代碼
}

4. 不要省略語(yǔ)句結(jié)尾的分號(hào)

代碼結(jié)尾處沒(méi)有分號(hào)容易引起壓縮錯(cuò)誤，另外在某些情況下可以增進(jìn)代碼的性能，應(yīng)為解釋器不比在花時(shí)間推測(cè)在什么地方插入分號(hào)。還有一種更常見(jiàn)的問(wèn)題就是，自動(dòng)插入分號(hào)有時(shí)會(huì)出錯(cuò)，所以并不建議省略分號(hào)。

5. 使用var定義變量

定義變量時(shí)使用var關(guān)鍵字，并且全部提前至函數(shù)的最開(kāi)始。
這樣做的好處就會(huì)避免無(wú)意識(shí)的創(chuàng)建出全局變量，而且讓你的代碼更容易理解。

function myfunction(){
 var result = 10 + value;
 var value = 10;
 return result;
}

這個(gè)函數(shù)語(yǔ)法上是沒(méi)有問(wèn)題的，但是不是很直觀，不符合人的邏輯，修改如下會(huì)更好：

 funciton myfunction(){
  var result;
  var value;
  result = 10 + value;
  value = 10;
  return result;
 }

給大家解釋一下，上面兩個(gè)代碼是等價(jià)的，result的值都是NAN.JavaScript會(huì)把函數(shù)內(nèi)所有的變量聲明提升到函數(shù)的最開(kāi)始，代碼一在代碼執(zhí)行時(shí)會(huì)變成代碼二的樣子，當(dāng)運(yùn)行到result = 10 + value;時(shí),value的值為undefined，和10相加為NAN，然后value被賦值為10。

關(guān)于全局變量帶來(lái)的問(wèn)題，大家想必也比較清楚，不然也不會(huì)出現(xiàn)命名空間的概念。

6. 函數(shù)先聲明再使用

和變量聲明一樣，函數(shù)聲明也會(huì)被JavaScript引擎提前，因此在代碼中，函數(shù)的調(diào)用可以出現(xiàn)在函數(shù)的聲明之前。還有一點(diǎn)值得注意，函數(shù)聲明不應(yīng)該出現(xiàn)在語(yǔ)句塊之內(nèi)，比如：

if (condition) {
 function myfunction(){
  alert("true");
 }
}else{
 function myfunction(){
  alert("false");
 }
}
myfunction();

運(yùn)行代碼我們發(fā)現(xiàn)會(huì)輸出會(huì)和瀏覽器有關(guān)，在Chrome 51和Firefox 46輸出true，IE 10下輸出false。所以盡量避免在語(yǔ)句塊中聲明函數(shù)。

7. 慎用typeof underfined null判斷

null是一個(gè)特殊值，我們經(jīng)常和undefined混淆，下列場(chǎng)景應(yīng)使用null:

用來(lái)初始化一個(gè)變量，這個(gè)變量可能賦值為一個(gè)對(duì)象。
用來(lái)和一個(gè)已經(jīng)初始化的變量比較。
當(dāng)函數(shù)的參數(shù)期望傳入對(duì)象時(shí)，用作參數(shù)傳入。
當(dāng)函數(shù)的返回值期望是對(duì)象時(shí)，用作返回值傳出。

下面一些情況不應(yīng)該使用null:

不要使用null來(lái)檢查是否傳入了某個(gè)參數(shù)。
不要用null來(lái)檢查一個(gè)變量是不是初始化。

理解null最好的方式是將他當(dāng)做對(duì)象的占位符。我們經(jīng)常將null和undefined搞混的原因是我們認(rèn)為null和undefined都是變量未初始化，但是只有undefin代表一個(gè)變量還沒(méi)有被初始化，null代表初始化為對(duì)象?？慈缦麓a：

var person;
console.log(typeof person);  //undefined
console.log(typeof foo);   //undefined
var house = null;
console.log(typeof house);  //object

所以盡量不要用typeof判斷變量是否初始化，你并不能確定是變量不存在還是變量未初始化，返回null是你也不能確定變量有沒(méi)有被正確的賦值，所以小心使用typeof。

8. 小心使用Number類型

想必大家也知道JavaScript整數(shù)支持十進(jìn)制，八進(jìn)制，和十六進(jìn)制的字面值。八進(jìn)制中如果字面值中的數(shù)值超過(guò)了范圍，那么前導(dǎo)零將會(huì)被忽略，后面的數(shù)值當(dāng)做十進(jìn)制解析。

console.log(012); //10 console.lgo(082); //82

如果將八進(jìn)制和十六進(jìn)制用于小數(shù)則會(huì)語(yǔ)法錯(cuò)誤。還有一點(diǎn)，八進(jìn)制字面量在嚴(yán)格模式下是無(wú)效的。關(guān)于浮點(diǎn)數(shù)計(jì)算誤差的問(wèn)題大家也都清楚，凡是基于IEEE754數(shù)值的浮點(diǎn)計(jì)算都是這樣，所以永遠(yuǎn)不要測(cè)試某個(gè)特定的浮點(diǎn)數(shù)值。
在數(shù)值類型中有一個(gè)比較特殊的值，NaN（Not a Number),這個(gè)數(shù)值用于表示本來(lái)應(yīng)該返回?cái)?shù)值但是返回的不是數(shù)值類型。NaN和任何值都不相等，包括NaN本身。我們可以用isNaN()函數(shù)測(cè)試。

9. 使用邏輯運(yùn)算動(dòng)態(tài)賦值

大家比較喜歡的操作

var person={
  age:10
}
var condition;
var myVar = condition && person;
alert(myVar)

如果condition轉(zhuǎn)為boolean類型為false，則myVar = condition,若為true，則myVar = person。

var person={
    age:10
  }
var condition;
var myVar = condition || person;
  alert(myVar)

如果condition轉(zhuǎn)換為boolean為true，則myVar = condition,若為false，則myVar = person。

10. 不使用with語(yǔ)句

不使用with的一個(gè)重要原因是，在嚴(yán)格模式下語(yǔ)法本身就是禁用with語(yǔ)句的，這也表明ECMAScript委員會(huì)確信不應(yīng)使用with。我們看如下例子：

var book = {
 title : "Maintainable JavaScript",
 author: "Nicholas C. Zakas"
};
var message = "The book is ";
with(book) {
 message += title;
 message += "by " + author;
}

上述代碼的問(wèn)題在于我們很難分辨title和author出現(xiàn)的位置，也難分辨出message到地址一個(gè)局部變量還是book的一個(gè)屬性，而且JavaScript引擎和壓縮工具無(wú)法對(duì)這段代碼進(jìn)行優(yōu)化，應(yīng)為它們無(wú)法猜出代碼的正確含義。

好了，已經(jīng)十條了，我們下一個(gè)十條再見(jiàn)。

您可能感興趣的文章: