编写可维护的JavaScript（一）--编程风格

一、背景

在一个多人协作的前端项目中，当我们各自保留个人编码风格时，我们很难去维护其他人开发的功能，只有指定一套团队公共的编码风格，团队里每个人都按照这套风格来编码，我们才可以很容易的去维护其他人开发的功能。

怎么指定团队编码风格，团队编码风格应该包含哪些，我们经常遇到以上类似的问题，这本【编写可维护的 JavaScript】告诉了我们答案。

我们需要在以下方面来规定代码风格：

• 基本的格式化
• 注释
• 语句和表达式
• 变量、函数和运算符

二、基本的格式化

1. 缩进层级

作者推荐四个空格为一个缩进层级。

2. 语句结尾

语句结尾不要省略分号。

3. 行的长度

行的长度最长不应当超过 80 个字符，

4. 换行

当一行超过 80 个字符时应该换行并添加缩进。

5. 空行

在以下场景中添加空行，提升代码可读性：

• 在方法之间；
• 在方法中的局部变量和第一条语句之间；
• 在多行或单行注释之前；
• 在方法内的逻辑片段之间插入空行。

6. 命名

命名长度要尽可能短，并抓住要点。

尽量在变量名中体现出值的数据类型。

使用有意义的命名。

6.1 不同类型的命名规定

• 变量：驼峰命名，名词；
• 函数：驼峰命名，动词；
• 常量：使用大写字符命名，并通过下划线分隔单词；
• 构造函数：大驼峰命名。

6.2 一些动词常见的约定

• can: 函数返回一个布尔值；
• has: 函数返回一个布尔值；
• is: 函数返回一个布尔值；
• get: 函数返回一个非布尔值；
• set: 函数用于保存一个值。

7. 直接量

• 字符串

字符串用双引号括起来。

• 数字

禁止使用八进制格式。

• null

理解 null 最好的方式是将它当做对象的占位符。

以下场景中应该使用 null：

- 用来初始化一个变量，这个变量可能赋值为一个对象
- 用来和一个已经初始化的变量比较
- 当函数的参数期望是对象时，用作参数传入
- 当函数的返回值期望是对象时，用作返回值传出

• undefined

禁止使用 undefined，可以有效的确保只在变量未被赋值的情况下 typeof 才会返回 undefined。

三、注释

1. 单行注释

单行注释以两个斜线开始，以行尾结束。

// **

2. 多行注释

多行注释可以包裹跨行文本，它以/*开始，以*/结束。

/*
 * xxx
 * xxx
 */

3. 使用注释

当代码不够清晰时，添加注释。

当代码很明了时，不添加注释。

3.1 难以理解的代码

难以理解的代码都应当添加注释。

3.2 可能被误认为错误的代码

当代码看上去有错误时，应该添加注释。

3.3 浏览器特性 hack

浏览器特性 hack 也属于难以理解的代码，应该添加注释。

4. 文档注释

有时我们可以通过工具将注释生成文档，这时我们应该添加注释。

四、语句和表达式

1. 花括号的对齐方式

推荐风格是将左花括号放置在块语句中第一句代码的末尾。

if (xx) {
  // xx
}

2. 块语句间隔

推荐风格是在左圆括号之前和右圆括号之后各添加一个空格。

if (xx) {
  // xx
}

3. switch 语句

3.1 缩进

推荐风格是 switch 和 case 之间需要缩进。

switch (a) {
  case "aa":
      // 代码
      break
}

3.2 case 语句的连续执行

推荐风格是 case 语句的连续执行是一种可接受的编程方法。

switch (a) {
  case "aa":
  case "bb":
      // 代码
      break
}

3.3 default

推荐风格是不应当省略 default。

switch (a) {
  case "aa":
  case "bb":
      // 代码
      break
  default:
      break
}

4. with 语句

推荐风格是避免使用 with 语句，因为严格模式中不支持 with 语句。

5. for 循环

for 循环是用于遍历数组成员。

有 4 种方法可以更改循环的执行过程，包含 return、throw、break、continue。

推荐风格是不使用 continue 来跳出循环，因为不容易理解。

6. for-in 循环

for-in 循环是用于遍历对象属性的。

为了避免遍历从原型继承来的属性，应该在 for-in 循环中加一层判断条件。

for (let key in obj) {
  if (xxx) {
    // 不是从原型继承来的属性
    // xx
  }
}

五、变量、函数和运算符

1. 变量声明

let 声明变量，const 声明常量，它们的作用域都是最近的大括号下。

2. 函数声明

函数声明会被 JS 引擎提前。

3. 函数调用间隔

推荐风格是函数名和左括号之间没有空格。

fn();

4. 立即调用的函数

立即调用的函数写法如下：

(function () {})();

5. 严格模式

推荐尽可能使用严格模式，减少常见错误。

6. 相等

用 === 代替 ==。

小结

后续还有编程实践、自动化章节，有时间的朋友们可以去刷下原书。

希望能对你有所帮助，感谢阅读～

别忘了点个赞鼓励一下我哦，笔芯 ❤️