12条写出高质量JS代码的方法

撰写高质量的JS代码十二大法则

想要书写出让人赞叹的JS代码吗？狼蚁SEO的长沙网络推广为您整理了以下十二条经验，助您一臂之力！

一、打造可维护性的代码

当面对bug时，如果能立刻解决当然最好。但有时候，随着时间的推移，代码的细节可能会变得模糊。特别是大型项目或团队中，修复bug的人可能并不是写代码的人。我们需要降低理解代码的时间成本，无论是自己写的还是团队其他成员写的。可维护性的代码至关重要，它包括以下要素：可读性、一致性、可预测性，看起来就像是同一个人写的并且有详细的记录。

二、避免全局变量的问题

全局变量在JavaScript应用程序和web页面的所有代码享。当程序的不同部分定义同名但作用不同的全局变量时，命名冲突就在所难免。第三方脚本、广告方的代码、用户跟踪和分析脚本等都可能定义全局变量。尽可能少地使用全局变量是关键。使用命名空间模式或函数立即执行来避免混乱，始终使用var来声明变量。

三、理解隐式全局变量的副作用

隐式全局变量和明确定义的全局变量之间有一个小差异：通过delete操作符，隐式全局变量可以被删除，而明确定义的全局变量则不行。隐式全局变量并不是真正的全局变量，而是全局对象的属性。这需要我们特别注意，以避免不必要的错误和困扰。

四、访问全局对象

在浏览器中，全局对象可以通过window属性在任何位置访问。在其他环境下，这个方便的属性可能有不同的名称或者不可用。若要访问全局对象而不使用硬编码的window标识符，可以在任何层级的函数作用域中使用以下代码：var global = (function () { return this; }());

五、优化for循环

在for循环中，可以循环取得数组或类似数组的对象，如arguments和HTMLCollection对象。通常的循环形式为：for (var i = 0; i < myarray.length; i++) { // 使用myarray[i]做点什么 }。但这种方式每次循环都要获取数组长度，效率较低。当处理HTMLCollection对象时尤其如此。需要寻找更高效的方式来处理循环。

六、不扩展内置原型

一、深入理解原型属性

在JavaScript的世界中，当我们向对象中添加属性时，如果不小心触及了原型链，可能会引发意想不到的混乱。想象一下，当你向原型中添加属性时，它们可能会在你不使用hasOwnProperty属性检查的情况下悄悄出现，造成意想不到的副作用。深入理解和掌握原型属性至关重要。

二、警惕隐式类型转换

在JavaScript中，变量的类型会在比较时发生隐式转换。这种类型转换有时可能导致意料之外的结果，比如`false == 0`或`"" == 0`会返回true。为了避免这种混淆和潜在的错误，我们在比较值和表达式类型时应该始终使用===和!==操作符。这样可以确保我们比较的是值的实际内容和类型，而不是某种可能的转换结果。

三、远离eval()的魔法世界

如果你在你的代码里看到了eval()，记住这句咒语：“eval()是恶魔的化身”。这个函数接受任何字符串并将其当作JavaScript代码执行。当你要执行的代码是预先确定的（而不是在运行时生成的），那么没有理由使用eval()。如果代码是动态生成的，有很多其他方法可以达到同样的效果，而不必依赖eval()。比如，使用方括号表示法来访问动态属性既简单又高效。

使用eval()还带来了安全隐患，因为执行的代码（例如来自网络的代码）可能被篡改。在处理Ajax返回的JSON响应时，这是一个常见的陷阱。在这种情况下，最好使用JavaScript内置的JSON方法来处理响应，以确保安全性和效率。如果浏览器不支持JSON.parse()，你可以使用第三方库来提供这个功能。

同样重要的是要注意，给setInterval(), setTimeout()和Function()构造函数传递字符串与使用eval()类似，也应该避免。JavaScript在背后还是需要和执行你传递的字符串。封装你的代码到一个即时函数中是一个好主意，这样可以避免全局变量污染和潜在的安全风险。比如狼蚁网站的SEO优化案例就是一个很好的例子，通过封装代码避免了全局变量污染的问题。同时也要注意new Function()构造与eval()类似，使用时也要谨慎对待。它可以避免全局变量污染的一个优势在于其会在局部函数作用域内运行评估的代码。

在狼蚁网站的SEO优化案例中，eval()函数拥有独特的优势：它能够访问并修改外部作用域中的变量，这是常规Function无法实现的（使用Function和new Function方式都是相同的）。让我们通过两个简单的例子来深入理解这一特性。

看下面的代码段：

```javascript

(function () {

var local = 1;

eval("local = 3; console.log(local)"); // 输出 "3"

console.log(local); // 再次输出 "3"

}());

```

在这个匿名函数中，我们定义了一个局部变量`local`并赋值为1。然后，我们使用eval()函数来修改这个变量的值，并打印出来。可以看到，eval()函数能够成功地访问并修改外部的局部变量。

如果我们尝试使用Function构造函数来达到同样的效果，结果将会不同：

```javascript

(function () {

var local = 1;

Function("console.log(typeof local);")(); // 输出 "undefined"

}());

```

在这个例子中，Function构造函数尝试访问局部变量`local`，但无法做到，因为它无法访问到当前作用域的变量。它输出的是`undefined`。

接下来让我们谈谈编码规范的重要性。遵循规范的编码实践可以让你的代码保持一致性、可预测性，并且更易于阅读和理解。当新的开发者加入团队时，他们可以通过阅读规范来快速理解其他团队成员的代码，从而提高工作效率。

在编码规范中，缩进、注释和花括号的使用都是非常重要的。没有缩进的代码基本上是不可读的。不一致的缩进会导致混乱和意外的结果。规范地使用缩进是非常重要的。注释也是代码中不可或缺的一部分。即使你的代码不需要其他人来理解，也应该对其进行适当的注释。一周后再回来查看代码时，注释可以帮助你快速回忆起当初的思考过程和代码逻辑。注释不应该过于冗长或过于简短，应该提供关于函数目的、参数和返回值的简要说明。对于执行特定任务的五六行代码，如果提供了一行代码的目的和为什么在这里执行的描述，那么阅读者可以直接跳过这些细节。在某些情况下，如使用正则表达式时，注释可能比代码本身更重要。花括号总是应该被使用，即使它们在某些情况下是可选的。使用花括号可以让代码更具持续性和易于更新。遵循这些规范，你的代码将更具可读性和可维护性。