JavaScript | 样式指南和编码约定

简介

JavaScript是一种强大的编程语言，但由于其灵活性和动态性，它也容易变得混乱和难以维护。编写清晰、一致和可维护的代码是一个重要部分。通过本指南，你将学习到有关如何编写优雅、高效和可维护的JavaScript代码的最佳实践。

核心原则

• 一致性： 遵循一致的编程范例，避免出现混乱和不一致的代码。
• 可读性： 代码应该是易于理解和阅读的，使用良好的变量名、注释和空格。
• 可维护性： 代码应该是易于维护和扩展的，避免出现错误、重复和不必要的复杂性。
• 性能： 代码应该尽可能地高效并具有优秀的性能。

编码约定

命名规范

变量和函数

变量和函数名称应该是有意义的，使用驼峰式命名法。

// 变量
const productName = 'iphone';

// 函数
function calculateArea(width, height) {
  return width * height;
}

常量

常量名称应该是全大写的，单词用下划线分隔。

const PRODUCT_COUNT = 10;

类

类名称应该使用大写字母开头的驼峰式命名法。

class Product {
  // ...
}

缩进和空格

使用两个空格进行缩进。

function calculateArea(width, height) {
  let area = 0;
  if (width > 0 && height > 0) {
    area = width * height;
  }
  return area;
}

在运算符前后添加空格，但是在函数参数列表和对象属性列表中不要添加。

// 变量赋值
let price = 10 + 5;

// 函数调用
calculateArea(width, height);

// 对象属性
const product = {
  name: 'iPhone',
  price: 999,
};

注释

函数和代码块应该添加注释以增强代码的可读性和可维护性。

函数应该具有JSDoc注释，描述函数的参数、返回值和用途。

/**
 * Calculate the area of a rectangle
 * @param {number} width - The width of the rectangle
 * @param {number} height - The height of the rectangle
 * @returns {number} The area of the rectangle
 */
function calculateArea(width, height) {
  return width * height;
}

代码块应该使用注释描述其用途。

// Check if the product is in stock
if (product.stock > 0) {
  // Add the product to the cart
  cart.add(product);
}

引号

使用单引号来表示字符串。

const product = 'iPhone';

括号

在括号内使用箭头函数，参数和箭头之间不要添加空格，箭头和函数体之间需要添加空格。

const areas = rectangles.map((rect) => {
  return rect.width * rect.height;
});

在函数调用和控制结构中，尽可能将括号放在自己的行上。

// 好的实现
calculateArea(
  10,
  20
);

// 不推荐的实现
calculateArea(10, 20);

换行

遵循以下换行规则：

• 在定义数组和对象时，在每个元素或属性之后添加逗号，每个元素或属性单独一行。
• 在函数参数列表中，在每个参数之后添加逗号，每个参数单独一行。
• 在函数调用链中，将每个方法调用放在自己的行上。
• 在条件语句和循环语句中，在每个段落之后添加一个换行符。

// 数组和对象
const product = {
  name: 'iPhone',
  price: 999,
  color: 'white',
};

const numbers = [
  1,
  2,
  3,
];

// 函数参数
function calculateArea(
  width,
  height,
) {
  return width * height;
}

// 函数调用链
const result = array
  .map((item) => item * 2)
  .filter((item) => item > 5);

// 条件语句/循环语句
if (condition) {

  // ...

}

while (condition) {

  // ...

}

函数

遵循以下准则来编写函数：

• 函数应该小而简单。
• 函数应该有一个清晰的用途。
• 函数应该只做一件事情。
• 函数应该具备清晰的输入和输出。

变量

遵循以下准则来编写函数：

• 变量应该在使用前声明。
• 变量应该尽可能地被描述。
• 使用let或const而不是var。
• 不要声明不必要的全局变量。

总结

遵循这些JavaScript样式指南和编码约定，可以实现代码的清晰度，可读性，可维护性和性能。当你遇到团队中的其他代码风格或约定时，相互之间尊重并跟随约定。