JavaScript Standard Style 代码规范详解

JavaScript Standard Style 代码规范详解

standard 🌟 JavaScript Style Guide, with linter & automatic code fixer 项目地址: https://gitcode.com/gh_mirrors/st/standard

JavaScript Standard Style 是一个广受欢迎的 JavaScript 代码风格规范，它提供了一套开箱即用的规则，帮助开发者保持代码的一致性和可读性。本文将深入解析这套规范的核心规则，帮助开发者更好地理解和应用。

基础格式规范

缩进与空格

• 缩进：使用 2 个空格，而不是制表符
• 关键字后空格：if、for、while 等关键字后需要空格
• 函数声明括号前空格：函数名与括号之间需要空格

// 正确示例
function example (arg) {
  if (condition) {
    // ...
  }
}

引号使用

• 字符串：优先使用单引号，除非需要转义
• 模板字符串：仅在需要插值时使用

const name = 'World'        // ✓ 正确
const greeting = `Hello ${name}`  // ✓ 正确（需要插值）

变量与类型

变量声明

• 未使用变量：禁止声明未使用的变量
• 声明方式：每个 var 声明单独一行
• 命名规范：使用驼峰式命名

// 错误示例
var a = 1, b = 2  // ✗ 避免

// 正确示例
var a = 1
var b = 2
const myVariable = 'value'

类型比较

• 严格相等：总是使用 === 和 !==
• 例外情况：obj == null 可用于检查 null 或 undefined

if (value === 'test') {}  // ✓ 正确
if (value == 'test') {}   // ✗ 避免

函数规范

函数设计

• 错误处理：回调函数中的 err 参数必须处理
• 构造函数：类名首字母大写，无参构造函数也需要括号

// 回调错误处理
fs.readFile('file.txt', function (err, data) {
  if (err) throw err  // ✓ 必须处理错误
  // ...
})

// 构造函数
function Animal() {}   // ✓ 正确
const dog = new Animal()

箭头函数

• 简洁性：当函数体简单时，使用简洁写法

const squares = numbers.map(x => x * x)  // ✓ 推荐

对象与数组

对象字面量

• 简写属性：当属性名与变量名相同时使用简写
• 方法简写：使用方法简写语法

const name = 'John'
// ✓ 正确
const user = {
  name,  // 属性简写
  greet() {  // 方法简写
    return `Hello ${this.name}`
  }
}

数组创建

• 字面量优先：使用数组字面量而非 Array 构造函数

const items = new Array(1, 2, 3)  // ✗ 避免
const items = [1, 2, 3]           // ✓ 正确

控制结构

条件语句

• 花括号：多行条件语句必须使用花括号
• 位置：else 与闭合花括号同行

// ✓ 正确
if (condition) {
  // ...
} else {
  // ...
}

循环语句

• 避免标签：不使用标签语句
• 避免无限循环：明确的循环条件

while (true) {  // ✓ 允许但需谨慎
  if (condition) break
}

最佳实践

避免使用

• eval：绝对禁止使用 eval()
• with：禁止使用 with 语句
• arguments.callee：禁止使用

eval('var result = user.' + prop)  // ✗ 绝对禁止

现代语法

• 类语法：使用现代类语法而非原型
• 模块导入：每个模块一个导入语句

// ✓ 正确
import { func1, func2 } from 'module'

特殊注意事项

正则表达式

• 明确性：避免空字符类和控制字符
• 构造函数：确保正则表达式有效

const regex = /^abc[]/      // ✗ 避免（空字符类）
const regex = /^abc[a-z]/   // ✓ 正确

全局对象

• 浏览器全局：明确声明使用的浏览器全局变量
• 不扩展原生对象：禁止修改原生对象的原型

/* global alert, prompt */
alert('Hi')  // ✓ 正确声明后使用

Array.prototype.empty = function() {}  // ✗ 禁止

总结

JavaScript Standard Style 通过一系列明确的规则，帮助开发者写出更一致、更可维护的代码。这些规则涵盖了从基础格式到高级特性的各个方面，既保证了代码的可读性，又避免了常见的陷阱。

采用这套规范可以：

1. 减少团队内的风格争论
2. 提高代码审查效率
3. 降低维护成本
4. 避免常见错误

建议开发者在项目中逐步采用这些规则，可以使用配套的工具来自动检查和修复代码风格问题，从而更专注于业务逻辑的实现。

standard 🌟 JavaScript Style Guide, with linter & automatic code fixer 项目地址: https://gitcode.com/gh_mirrors/st/standard