12條寫出高品質JS程式碼的方法（教你寫出高品質程式碼）

這篇文章告訴大家如何遵循12條方法來寫出高品質的JS程式碼的經驗，有這方面需要的朋友參考下吧。

書寫高品質的JS程式碼不僅讓程式設計師看著舒服，更能提高程式的運行速度，以下就是腳本之家的小編整理方法：

#一、如何書寫可維護性的程式碼

當出現bug的時候如果你能立刻修復它是最好的，此時解決問題的四路在你腦中還是很清晰的。否則，你轉移到其他任務或bug是經過一定的時間才出現的，你忘了那個特定的程式碼，一段時間後再去查看這些程式碼就需要：

1.花時間學習和理解這個問題2.化時間是了解應該解決的問題代碼

還有個問題，特別對於大的專案或是公司，修復bug的這位夥計不是寫代碼的那個人（並且發現bug和修復bug的不是同一個人）。因此，必須降低理解代 碼花費的時間，無論是一段時間前你自己寫的代碼還是團隊中的其他成員寫的代碼。這關係到底線（營業收入）和開發人員的幸福，因為我們更應該去開發新的令人興奮 人心的事物而不是花幾小時幾天的時間去維護遺留程式碼。所以建立可維護性程式碼是至關重要的，一般可維護性的程式碼有以下幾個原則：

可讀性

##一致性

可預測性

看起來就像同一個人寫的

#已記錄

二、全域變量的問題

全域變數的問題在於，你的JavaScript應用程式和web頁面上的所有程式碼都共享了這些全域變量，他們住在同一個全域命名空間，所以當程式的兩個不同部分定義同名但不同作用的全域變數的時候，命名衝突在所難免。 web頁麵包含不是該頁面開發者所寫的程式碼也是比較常見的，例如：

第三方的JavaScript庫

廣告方的腳本程式碼

第三方使用者追蹤和分析腳本程式碼

不同類型的小元件，標誌和按鈕

例如說，該第三方腳本定義了一個全域變量，叫做A；接著，在你的函數中也定義一個名為A的全域變數。結果就是後面的變數覆蓋前面的，第三方腳本就一下子失效啦！而且很難debug出來。

因此：盡可能少的使用全域變數是很重要的，例如命名空間模式或是函數立即自動執行，但是要想讓全域變數少最重要的還是始終使用var來宣告變數。

三、忘記var作用的副作用

隱含全域變數和明確定義的全域變數間有些小的差異，就是透過delete操作符讓變數未定義的能力。具體如下：

透過var建立的全域變數（任何函數以外的程式中建立）是不能被刪除的。

沒有透過var建立的隱式全域變數（無視是否在函數中建立）是能被刪除的。

所以隱式全域變數並不是真正的全域變量，但它們是全域物件的屬性。屬性是可以透過delete操作符刪除的，而變數是不能的，具體程式碼我就不寫了。

四、存取全域物件

在瀏覽器中，全域物件可以透過window屬性在程式碼的任何位置存取（除非你做了些比較出格的事情，像是宣告了一個名為window的局部變數）。但是在其他環境下，這個方便的屬性可能被叫做其他什麼東西（甚至在程式中不可用）。如果你需要在沒有硬編碼的window標識符下存取全域對象，你可以在任何層級的函數作用域中做如下操作：

var global = (function () { return this; }());

五、for迴圈

在for迴圈中，你可以迴圈取得陣列或是陣列類似物件的值，譬如arguments和HTMLCollection物件。通常的循環形式如下：

// 次佳的循環for (var i = 0; i 這種形式的循環的不足在於每次循環的時候數組的長度都要去獲取下。這回降低你的程式碼，尤其當myarray不是數組，而是一個HTMLCollection物件的時候。

六、不擴充內建原型

扩增构造函数的prototype属性是个很强大的增加功能的方法，但有时候它太强大了。增加内置的构造函数原型（如Object(), Array(), 或Function()）挺诱人的，但是这严重降低了可维护性，因为它让你的代码变得难以预测。使用你代码的其他开发人员很可能更期望使用内置的 JavaScript方法来持续不断地工作，而不是你另加的方法。另外，属性添加到原型中，可能会导致不使用hasOwnProperty属性时在循环中显示出来，这会造成混乱。

七、避免隐式类型转换

JavaScript的变量在比较的时候会隐式类型转换。这就是为什么一些诸如：false == 0 或 “” == 0 返回的结果是true。为避免引起混乱的隐含类型转换，在你比较值和表达式类型的时候始终使用===和!==操作符。

var zero = 0; if (zero === false) { // 不执行，因为zero为0, 而不是false } // 反面示例 if (zero == false) { // 执行了... }

八、避免eval()

如果你现在的代码中使用了eval()，记住该咒语“eval()是魔鬼”。此方法接受任意的字符串，并当作JavaScript代码来处理。当有 问题的代码是事先知道的（不是运行时确定的），没有理由使用eval()。如果代码是在运行时动态生成，有一个更好的方式不使用eval而达到同样的目 标。例如，用方括号表示法来访问动态属性会更好更简单：

// 反面示例 var property = "name"; alert(eval("obj." + property)); // 更好的 var property = "name"; alert(obj[property]);

使用eval()也带来了安全隐患，因为被执行的代码（例如从网络来）可能已被篡改。这是个很常见的反面教材，当处理Ajax请求得到的JSON 相应的时候。在这些情况下，最好使用JavaScript内置方法来解析JSON相应，以确保安全和有效。若浏览器不支持JSON.parse()，你可 以使用来自JSON.org的库。

同样重要的是要记住，给setInterval(), setTimeout()和Function()构造函数传递字符串，大部分情况下，与使用eval()是类似的，因此要避免。在幕后，JavaScript仍需要评估和执行你给程序传递的字符串：

// 反面示例 setTimeout("myFunc()", 1000); setTimeout("myFunc(1, 2, 3)", 1000); // 更好的 setTimeout(myFunc, 1000); setTimeout(function () { myFunc(1, 2, 3); }, 1000);

使用新的Function()构造就类似于eval()，应小心接近。这可能是一个强大的构造，但往往被误用。如果你绝对必须使用eval()，你 可以考虑使用new Function()代替。有一个小的潜在好处，因为在新Function()中作代码评估是在局部函数作用域中运行，所以代码中任何被评估的通过var 定义的变量都不会自动变成全局变量。另一种方法来阻止自动全局变量是封装eval()调用到一个即时函数中。

考虑下面这个例子，这里仅un作为全局变量污染了命名空间。

console.log(typeof un); // "undefined" console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined" var jsstring = "var un = 1; console.log(un);"; eval(jsstring); // logs "1" jsstring = "var deux = 2; console.log(deux);"; new Function(jsstring)(); // logs "2" jsstring = "var trois = 3; console.log(trois);"; (function () { eval(jsstring); }()); // logs "3" console.log(typeof un); // number console.log(typeof deux); // "undefined" console.log(typeof trois); // "undefined"

另一间eval()和Function构造不同的是eval()可以干扰作用域链，而Function()更安分守己些。不管你在哪里执行 Function()，它只看到全局作用域。所以其能很好的避免本地变量污染。在下面这个例子中，eval()可以访问和修改它外部作用域中的变量，这是 Function做不来的（注意到使用Function和new Function是相同的）。

(function () { var local = 1; eval("local = 3; console.log(local)"); // logs "3" console.log(local); // logs "3" }()); (function () { var local = 1; Function("console.log(typeof local);")(); // logs undefined

九、编码规范

建立和遵循编码规范是很重要的，这让你的代码保持一致性，可预测，更易于阅读和理解。一个新的开发者加入这个团队可以通读规范，理解其它团队成员书写的代码，更快上手干活。

十、缩进

代码没有缩进基本上就不能读了。唯一糟糕的事情就是不一致的缩进，因为它看上去像是遵循了规范，但是可能一路上伴随着混乱和惊奇。重要的是规范地使用缩进。

十一、注释

你必须注释你的代码，即使不会有其他人向你一样接触它。通常，当你深入研究一个问题，你会很清楚的知道这个代码是干嘛用的，但是，当你一周之后再回来看的时候，想必也要耗掉不少脑细胞去搞明白到底怎么工作的。

很顯然，註解不能走極端：每個單獨變數或是單獨一行。但是，你通常應該記錄所有的函數，它們的參數和返回值，或任何不尋常的技術和方法。要想到註 釋可以給你代碼未來的閱讀者以諸多提示；閱讀者需要的是（不要讀太多的東西）僅註釋和函數屬性名來理解你的代碼。例如，當你有五六行程式執行特定的任務， 如果你提供了一行程式碼目的以及為什麼在這裡的描述的話，閱讀者就可以直接跳過這段細節。沒有硬性規定註解程式碼比，程式碼的某些部分（如正規表示式）可能註解 要比程式碼多。

十二、花括號{}

花括號（也稱為大括號，下同）應總被使用，即使在它們為可選的時候。技術上將，在in或是for中如果語句僅一條，花括號是不需要的，但是你還是應該總是使用它們，這會讓程式碼更有持續性和易於更新。

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

js三種呼叫方式優缺點總結

##JS內加載jquery.js方法詳解

JS產生指定範圍隨機數和隨機序列方法詳解

以上是12條寫出高品質JS程式碼的方法（教你寫出高品質程式碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！