编写可维护的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":// 代码breakdefault: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. 相等

用 === 代替 ==。

最后

整理了75个JS高频面试题并给出了答案和解析基本上可以保证你能应付面试官关于JS的提问。

有需要的小伙伴可以点击下方卡片领取无偿分享