JS 编码实践 Airbnb - HTML

本文主要介绍 Airbnb 提供的 JavaScript 代码规范, 内容覆盖代码组织、变量、函数、字符串、数组、对象、类和模块等方面。

该规范的使用可以提高代码的可读性、可维护性和可扩展性。同时也便于团队的合作开发和代码的重构维护。

下面是 Airbnb JavaScript 代码规范的主要内容：

代码组织

• 一个文件中只包含一个类或一个功能模块的代码，文件名使用小写字母、中横线的方式。如: my-module.js, 不使用下划线、驼峰命名法等其他方式。
• 向外暴露的函数或方法使用驼峰命名法，除非你在与其他遵循不能使用驼峰命名法的框架交互。
• 文件导入和导出使用 ES6 的模块化机制，不使用 node.js 的 module.exports 和 require。

示例代码：

// my-module.js
export function myFunction() {
  // ...
}

变量

• 使用 let 或 const 声明变量。避免使用 var 声明变量。
• 变量名使用小写字母和下划线组成，不使用驼峰命名法。例如: my_var
• 使用 const 声明的变量，必须在声明的时候就赋值，并且不能被重新赋值。

示例代码：

let my_var = 'abc';
const my_const = 'abc';

函数

• 函数名使用驼峰命名法，函数名应该明确表达函数的目的。如: calculateArea
• 函数参数应该尽量少，并且遵循 DRY（Don't Repeat Yourself）原则。如果函数参数超过 3 个，应该考虑使用对象作为函数参数，使得调用更加友好。
• 使用默认参数而不是修改函数参数的默认值。
• 不能在函数内使用 arguments 作为参数名称，如果确实需要使用 arguments，应该使用剩余操作符。

示例代码：

function calculateArea(length, width) {
  return length * width;
}

function doSomethingWithData(data = []) {
  // ...
}

function doSomethingWithArgs({ arg1, arg2, arg3 }) {
  // ...
}

字符串

• 字符串使用单引号，避免使用双引号。
• 使用大括号和模板字符串的形式插入变量或表达式。不再使用黏合字符串的方式。

示例代码：

let my_str = `This is an example string with a ${variable}`;

数组

• 数组使用字面量的形式创建，使用迭代器遍历数组。
• 对于非扩展数组来说（即元素个数无限制的数组），使用剩余操作符或 Array.from() 方法将其转化为数组。

示例代码：

const my_array = [1, 2, 3, 4, 5];

my_array.forEach((item, index) => {
  // ...
});

const my_args = (...args) => {
  return Array.from(args);
};

对象

• 对象使用字面量的形式创建，声明属性的时候不加引号。
• 对象属性可以使用缩写形式和计算属性名。

示例代码：

const my_obj = {
  name: 'Bob',
  age: 30,
  ['my' + 'Property']: true,
  myMethod() {
    // ...
  }
};

类

• 使用 class 声明类，不再使用定义对象的函数。
• 类的方法使用箭头函数的形式，不再使用 function 声明。
• 类的方法命名使用驼峰命名法。
• 类的属性不用提前声明，可以在构造函数内声明。

示例代码：

class MyClass {
  constructor(name) {
    this.name = name;
  }

  myMethod = () => {
    // ...
  }
}

模块

• 使用 ES6 的模块机制导入和导出模块。
• 模块导入的名称应该是批量导入模块的默认命名，避免使用具体的模块名称。

示例代码：

import myModule from 'my-module';

export default myModule;

以上是 Airbnb JavaScript 代码规范的主要内容，希望能对每位程序员提供一些参考和帮助。