如何編寫高質量的Javascript代碼（譯）

優秀的Stoyan Stefanov在他的新書中（《Javascript Patterns》）介紹了很多編寫高質量代碼的技巧，比如避免使用全局變量，使用單一的var關鍵字，循環式預存長度等等。

這篇文章不僅僅從代碼本身來考慮如何優化編碼，也從代碼的設計階段來考慮，包括書寫API文檔，同事的review，使用JSLint。這些習慣都能幫助你編寫更加高質量的、更易于理解的、可維護的代碼（讓你的代碼在多年之后仍使你引以為傲）。

編寫可維護的代碼

軟件的BUG修復需要花費大量的精力。尤其當代碼已經發布之后，隨著時間的增長，維護的成本愈發的高。當你一發現BUG的時候，就立即去修復，這時候你的代碼還是熱乎的，你也不需要回憶，因為就是剛剛寫好的。但是當你做了其他任務，幾乎完全忘記了這份代碼，這時候就需要：

• 重新學習和理解問題
• 理解代碼是如何解決問題的

另外一個問題是，在大項目或者大公司里面，經常是解決BUG的人不是產生BUG的人，而且也不是發現BUG的人。所以減少理解代碼的時間就是最重要的問題，無論這個代碼是你自己以前寫的還是團隊中的其他成員寫的，因為我們都想去搞搞新的有意思的東西，而不是去維護那些個陳舊的代碼。

還有一個開發中的普遍問題就是，往往讀代碼的時間比寫代碼的時間還要多。有時候你鉆研一個問題，可以花整整一個下午的時間來考慮代碼的編寫。這個代碼當時是可以工作的，但是隨著開發的進行，其他東西發生了很大的變化，這時候也就需要你自己來重新審查修改編寫代碼。比如：

• 還有BUG沒有解決
• 添加了新的功能
• 程序需要在新的環境中運行（比如一個新上市的瀏覽器）
• 代碼有問題
• 代碼需要重寫因為修改了架構甚至要使用另一個語言

因為這些原因，也許你當時一個下午寫好的代碼，后面需要花費幾周的時間來閱讀。所以編寫可維護的代碼對于軟件的成功至關重要。

可維護的代碼包括：

• 可讀性
• 連續性
• 預見性
• 看起來是一個人寫的
• 有文檔

最少化全局變量

Javascript使用函數來約定作用域。一個在函數內部聲明的變量在外部是不可見的。所以，全局變量也就是聲明在任何函數之外的或者沒有被聲明的變量。

Javascript中，在任何函數之外有個可訪問的全局對象，每一個你創建的全局變量都是這個對象的一個屬性。在瀏覽器中，為了方便，通常用window來指代這個全局變量。下面的代碼就是說明如何創建一個全局變量：

myglobal = "hello"; // antipatternconsole.log(myglobal); // "hello"console.log(window.myglobal); // "hello"console.log(window["myglobal"]); // "hello"console.log(this.myglobal); // "hello

全局變量的問題

全局變量的問題在于，他在你的所有代碼或者一個頁面中都共享。他們在同一個命名空間下面，這通常會造成變量名沖突–兩個同名的變量，但是確實不同的用處。

通常在一些頁面中需要引入一些其他人的代碼，比如：

• 第三方的JS庫
• 廣告伙伴的腳本
• 第三方的用戶行為分析或者統計腳本
• 不同的組件、按鈕等等

加入其中一個第三方組件定義了一個全局變量：result。然后在你的程序中，也定義了一個全局變量result。最后的這個result會覆蓋點之前的result，這樣第三方的腳本就會停止工作。

所以，為了對其他的腳本友好，在一個頁面中使用越少的全局變量越好。在后面會有一些方法來告訴你如何減少全局變量，比如使用命名空間，或者自執行的匿名函數，但是最好的避免全局變量的方法就是使用var關鍵字來聲明變量。

因為javascript的兩個特性，創建一個全局變量非常的簡單。第一，你可以使用一個甚至沒有聲明的變量，第二，在javascript中，所有未聲明的變量都會成為全局對象的一個屬性（就像一個聲明了的全局變量一樣）。看看這個例子：

function sum(x,y){     result = x + y;     return result;}

在這個代碼中，result在沒有被聲明的情況下就被使用了，這個代碼也能很好的工作，但是在調用了這個函數之后，就會多一個名為result的全局變量，這是所有問題的根源了。

解決這個問題的辦法就是使用var：

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈