與任何其他編程語言一樣，JavaScript也有自己的最佳實(shí)踐列表，使程序更易于閱讀和維護(hù)。

由于JavaScript有很多小陷阱，因此要注意避開?？梢酝ㄟ^輕松地遵循一些最佳實(shí)踐使JavaScript代碼易于閱讀。

本文會(huì)介紹需要避開的誤區(qū)，例如聲明全局變量、向setInterval和setTimeout傳遞字符串、使用with語句等。

[[320193]]

避免聲明全局變量

無論出于何種原因，都應(yīng)該盡量避免使用全局變量。

其一是它們很容易在不同的地方被覆蓋，因?yàn)槿肿兞吭谌魏蔚胤蕉际强捎玫?。此外，全局變量是window對(duì)象的屬性，還可以覆蓋window對(duì)象中的內(nèi)容。

這兩個(gè)問題會(huì)使代碼難以執(zhí)行。因此應(yīng)該盡可能多地定義局部變量。

可以使用var、let或const關(guān)鍵字來定義局部變量。

用var定義的變量在定義之前，在被定義的層次及以下是可用的。例如以下代碼：

const log = () => { 
console.log(x); 
} 
log(); 
var x = 1; 
log(); 

代碼中，第一個(gè)console.log中的x是未定義的，第二個(gè)log中x則為1.

以下為同效代碼：

var x; 
constlog= () => { 
  console.log(x); 
} 
log(); 
x =1; 
log(); 

用let聲明的變量只有在定義之后才可用，所以如果給出以下代碼：

const log = () => { 
console.log(x); 
} 
log(); 
let x = 1; 
log(); 

會(huì)出現(xiàn)以下錯(cuò)誤信息：

Uncaught ReferenceError: Cannotaccess ‘x’ before initialization 

使用const關(guān)鍵字可定義只能分配一次且不能再分配的常量。與var不同，這種常量只有在聲明之后才可用。

例如以下代碼：

{console.log(x);}const x = 1;log(); 

在const x = 1之前調(diào)用log也會(huì)出現(xiàn)以下錯(cuò)誤信息：

Uncaught ReferenceError: Cannotaccess ‘x’ before initialization 

如果想要在程序的不同部分中使用變量，應(yīng)使用JavaScript模塊，然后在發(fā)布代碼時(shí)將這些模塊構(gòu)建到一個(gè)或多個(gè)大型文件中。這一方法自ES6后可行。

可以導(dǎo)出變量并將其引入至其他模塊。還可以使用“導(dǎo)出默認(rèn)”導(dǎo)出整個(gè)模塊。通過這種方式只能導(dǎo)出應(yīng)該在模塊外部可用的部分，其他都為不可見的。

此外還可以使用閉包將變量保存在函數(shù)中，這樣可避免外部調(diào)用。以下為簡單的閉包使用：

= () => {const x = 3; 
return () => x * 2;} 

將x保留在divide函數(shù)中可避免外部調(diào)用，并可返回一個(gè)處理x的函數(shù)。

然后編寫以下代碼調(diào)用：

console.log(divide()()); 

不要向setInterval或setTimeout傳遞字符串

不應(yīng)將字符串傳遞給setInterval或setTimeout函數(shù)的第一個(gè)參數(shù)，而應(yīng)傳遞回調(diào)函數(shù)。

如果傳遞的是一個(gè)字符串而不是一個(gè)回調(diào)函數(shù)，瀏覽器將使用eval來運(yùn)行字符串中的代碼，速度很慢，并易受到代碼注入攻擊。

因此，沒有理由進(jìn)行以上操作，除非我們真的需要運(yùn)行動(dòng)態(tài)生成的代碼，但這應(yīng)該是非常非常罕見的情況。

不應(yīng)該寫以下代碼：

setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}， 1000); 

應(yīng)該寫以下代碼：

setTimeout(() => {document.getElementById('foo')。textContent = 'foo';}， 1000); 

不要使用“with”語句

從表面上看，with語句似乎是訪問對(duì)象深度嵌套屬性的一個(gè)良好捷徑。例如可以這樣寫：

let obj = { 
  foo: { 
    bar: { 
      baz: 1 
    } 
  } 
} 
obj.foo.bar.baz=2; 

而不是：

let obj = { 
  foo: { 
    bar: { 
      baz: 1 
    } 
  } 
} 
with(obj.foo.bar) { 
  var baz =2; 
} 

但即使這樣仍會(huì)干擾全局對(duì)象，并使baz是否可以在with語句之外訪問變得模糊不定。因?yàn)檫€可以在with語句中聲明新的變量：

let obj = { 
  foo: { 
    bar: { 
      baz: 1 
    } 
  } 
} 
with(obj.foo.bar) { 
  var baz =2; 
} 

這里baz變量是在with語句內(nèi)部聲明，但外部無法調(diào)用。

幸運(yùn)的是，在JavaScript嚴(yán)格模式下不允許使用with語句，所以現(xiàn)在也不必?fù)?dān)心。

var關(guān)鍵字

在ES6中，可分別使用塊作用域的let和const關(guān)鍵字來聲明變量和常量。之所以可以用來聲明變量，是因?yàn)樗鼈冇忻鞔_的作用域。

用var聲明的變量使用范圍較為模糊。如果是在如if塊或循環(huán)這樣的程序塊中聲明，聲明的變量在塊外部可用。

例如：

for (let i = 0; i < 10; i++){ 
  var j = i; 
} 
console.log(j); 

這種情況下使用var是可行的，但如果用let替代var聲明變量就會(huì)報(bào)錯(cuò)。

由于作用域是混淆模糊的，我們應(yīng)該停止使用var來聲明變量。

[[320194]]

使用JavaScript編程時(shí)，我們希望避免使用存在于早期JavaScript版本中的許多老舊結(jié)構(gòu)。使用這些結(jié)構(gòu)讓代碼難以閱讀，并很容易產(chǎn)生bug。

首先要避免全局變量聲明，以防止在全局范圍內(nèi)意外引用和聲明內(nèi)容。這樣還可降低意外修改全局變量值的可能。

其次應(yīng)該停止在字符串中傳遞代碼，而是將回調(diào)函數(shù)傳遞給setTimeout和setInterval函數(shù)的第一個(gè)參數(shù)。因?yàn)閑val將用于運(yùn)行存儲(chǔ)在字符串中的代碼，這會(huì)讓程序面臨代碼注入攻擊，而且速度也很慢。

另外應(yīng)該避免使用with語句，因?yàn)樗鼤?huì)在全局對(duì)象內(nèi)創(chuàng)建變量。

同樣，由于var關(guān)鍵字聲明的變量的作用域比較模糊，因此應(yīng)避免使用var關(guān)鍵字聲明變量。