JavaScript Standard Style 代码规范详解-CSDN博客

JavaScript Standard Style 代码规范详解

standard 项目地址: https://gitcode.com/gh_mirrors/sta/standard

什么是 JavaScript Standard Style

JavaScript Standard Style 是一套开箱即用的 JavaScript 代码风格规范，它提供了一套严格的规则来统一代码风格，让开发者可以专注于编写业务逻辑而不必纠结于代码格式问题。

核心规则解析

基础格式规范

缩进规则

使用 2 个空格作为缩进

示例：

function hello(name) {
  console.log('hi', name)
}

字符串引号
- 优先使用单引号
- 只有在需要避免转义字符时才使用双引号
- 示例：
```
console.log('hello there')
$("<div class='box'>")
```

变量与函数

变量声明

每个变量声明独占一行
使用驼峰式命名

示例：

// 正确
var silent = true
var verbose = true

// 错误
var silent = true, verbose = true

函数声明

函数名与参数括号间要有空格

示例：

// 正确
function name(arg) { ... }

// 错误
function name (arg) { ... }

运算符与比较

等值比较
- 统一使用 === 和 !==
- 唯一例外是检查 null || undefined 时可用 ==
- 示例：
```
// 正确
if (name === 'John') 

// 错误
if (name == 'John')
```

运算符间距

中缀运算符前后必须加空格

示例：

// 正确
var x = 2
var message = 'hello, ' + name + '!'

// 错误
var x=2
var message = 'hello, '+name+'!'

控制结构

条件语句
- 多行条件语句必须使用大括号
- else 语句应与前一个花括号同行
- 示例：
```
// 正确
if (condition) {
  // ...
} else {
  // ...
}

// 错误
if (condition)
  // ...
```

switch 语句

每个 case 必须包含 break 或明确注释 fallthrough

示例：

switch (filter) {
  case 1:
    doSomething()
    break
  case 2:
    doSomethingElse()
}

错误处理

回调错误处理

必须处理回调函数的 err 参数

示例：

// 正确
run(function (err) {
  if (err) throw err
  window.alert('done')
})

// 错误
run(function (err) {
  window.alert('done')
})

高级规范建议

面向对象编程

类命名

构造函数名称首字母大写

示例：

// 正确
function Animal() {}
var dog = new Animal()

// 错误
function animal() {}
var dog = new animal()

继承

继承时必须调用 super()
非继承时不能调用 super()

示例：

class Dog extends Mammal {
  constructor() {
    super()  // 必须调用
  }
}

现代 JavaScript 特性

常量声明
- 不能修改 const 声明的变量
- 示例：
```
const score = 100
score = 125  // 错误
```

模块导入

每个模块只使用一行导入

示例：

// 正确
import { myFunc1, myFunc2 } from 'module'

// 错误
import { myFunc1 } from 'module'
import { myFunc2 } from 'module'

常见反模式

避免使用 eval

// 错误
eval("var result = user." + propName)

// 正确
var result = user[propName]

不要扩展原生对象
```
// 错误
Object.prototype.age = 21
```

避免不必要的函数绑定

// 错误
const name = function() {
  getName()
}.bind(user)

为什么选择 Standard Style

一致性：团队所有成员使用同一套规范
自动化：大部分规则可以通过工具自动修复
专注业务：减少代码风格讨论时间
最佳实践：规范集成了 JavaScript 社区的最佳实践

结语

JavaScript Standard Style 提供了一套全面的代码规范，从基础格式到高级特性都有明确指导。采用这套规范可以显著提高代码可读性和维护性，特别适合团队协作开发。建议开发者安装相关工具来自动检查和修复代码风格问题，将更多精力投入到业务逻辑实现上。

standard 项目地址: https://gitcode.com/gh_mirrors/sta/standard

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考