JavaScript 最佳实践：10条核心编码规范与避坑指南

脚本加载与基础规范

1. 避免使用script自闭合标签

在script标签中使用自闭合写法（如<.../>），虽然在XHTML标准中是合法的，但并不符合HTML规范，且会导致部分浏览器无法正确解析脚本内容。例如，在引入EXT库时采用这种写法，曾导致脚本无法正确执行。

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

2. 将脚本放置在</body>标签之前

若将脚本文件置于<head>标签内，浏览器需在渲染页面之前下载并执行脚本，这会显著增加用户的等待时间。相比之下，样式表放在<head>中可防止内容显示异常。推荐的标准结构如下：

<!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. 在函数内部启用严格模式

若在函数外部全局启用严格模式，可能会导致第三方类库或同事编写的代码运行异常。而在函数内部使用严格模式，其影响范围仅限于当前函数，从而避免干扰其他代码的正常执行。

function myfunction(){
 "use strict";
 //函数代码
}

代码风格与变量管理

4. 不要省略语句末尾的分号

代码末尾省略分号容易引发压缩工具报错，且在特定场景下可能提升代码性能，因为解释器无需额外耗费时间推测分号插入位置。此外，JavaScript的自动插入分号（ASI）机制有时会产生错误，因此不建议省略分号。

5. 使用var关键字定义变量

定义变量时应始终使用var关键字，并将其声明提升至函数作用域的顶部。这样做可以防止意外创建全局变量，并使代码逻辑更加清晰易懂。

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

上述函数在语法上虽然正确，但逻辑不够直观，不符合常规阅读习惯。优化后的写法如下：

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

这里解释一下，上述两段代码执行结果是等价的，result的值均为NaN。JavaScript引擎会将函数内的所有变量声明提升到函数最顶部，因此代码一在执行时实际表现为代码二的结构。当执行到result = 10 + value;时，value尚未赋值，其值为undefined，与10相加结果为NaN，随后value才被赋值为10。

关于全局变量引发的潜在问题，想必大家已有所耳闻，这也是命名空间概念诞生的原因之一。

6. 函数应先声明后使用

与变量声明类似，函数声明也会被JavaScript引擎提前。因此，在代码中，函数的调用可以出现在其声明之前。但需注意，函数声明不应出现在语句块（如if-else）内部，例如：

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

运行上述代码，输出结果与浏览器相关：在Chrome 51和Firefox 46中输出true，而在IE 10中输出false。因此，应尽量避免在语句块中声明函数。

类型判断与数值处理

7. 谨慎使用typeof判断undefined和null

null是一个特殊值，常与undefined混淆。以下场景建议使用null：

1. 用于初始化一个可能后续赋值为对象的变量。
2. 用于与已初始化的变量进行比较。
3. 当函数参数期望接收对象时，作为参数传入。
4. 当函数返回值期望为对象时，作为返回值传出。

以下场景不应使用null：

1. 不要使用null来检查是否传入了某个参数。
2. 不要用null来检查变量是否已初始化。

理解null的最佳方式是将其视为对象的占位符。我们常混淆null和undefined，是因为误以为两者都代表变量未初始化，但实际上只有undefined代表变量未被初始化，而null代表变量已被初始化为对象。参考以下代码：

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

因此，尽量避免使用typeof判断变量是否已初始化，因为你无法确定是变量不存在还是未初始化。返回null也无法确认变量是否被正确赋值，故需小心使用typeof。

8. 谨慎处理Number类型

想必大家已了解，JavaScript整数支持十进制、八进制和十六进制字面量。在八进制中，若字面值超出范围，前导零将被忽略，后续数值按十进制解析。

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


若将八进制或十六进制用于小数，将导致语法错误。此外，八进制字面量在严格模式下是无效的。关于浮点数计算误差的问题，基于IEEE754标准的浮点计算均存在此现象，因此永远不要测试特定的浮点数值。在数值类型中，有一个特殊值NaN（Not a Number），用于表示本应返回数值却返回非数值类型的情况。NaN与任何值都不相等，包括其自身，可通过isNaN()函数进行测试。

高级特性与避坑指南

9. 利用逻辑运算进行动态赋值

这是开发者常用的操作方式：

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

若condition转换为布尔值为false，则myVar = condition；若为true，则myVar = person。

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

若condition转换为布尔值为true，则myVar = condition；若为false，则myVar = person。

10. 避免使用with语句

不使用with的一个重要原因是，在严格模式下语法本身已禁用with语句，这表明ECMAScript委员会认为不应使用with。参考以下示例：

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

上述代码的问题在于，难以分辨title和author的具体位置，也难以判断message是局部变量还是book的属性。此外，JavaScript引擎和压缩工具无法对这段代码进行优化，因为它们无法推断代码的正确含义。

以上就是十条经验，我们下一个十条再见。