超全面的JavaScript开发规范（推荐）

2023年5月17日下午11:52 • JavaScript

超全面的JavaScript开发规范

JavaScript规范是多数开发者应遵守的一些指导原则，可以提高代码的可读性、可维护性和可扩展性。在本文中，将介绍一个超全面的JavaScript开发规范，以及如何使用它来提高你的代码质量。

1. 命名规范

1.1 变量命名规范

变量名应该具有描述性，能够清楚地反映变量所代表的内容。变量名应采取小写字母，单词之间使用下划线进行连接。

// good
let user_name = 'john_doe';
let date_of_birth = '1990-01-01';

// bad
let UserName = 'john_doe';
let dob = '1990-01-01';

1.2 函数命名规范

函数名应该采用驼峰命名法，第一个单词小写，后面每个单词首字母大写。

// good
function getUserProfile() {
  // ...
}

// bad
function getuserprofile() {
  // ...
}

2. 代码结构

2.1 缩进

缩进应该使用空格而不是制表符。建议使用两个空格作为缩进的标准。

// good
if (true) {
  let x = 1;
  let y = 2;
  let z = x + y;
}

// bad
if (true) {
    let x = 1;
    let y = 2;
    let z = x + y;
}

2.2 空格

在函数参数、变量声明、逗号、操作符的左右两边、块的左花括号和右花括号前面应该有一个空格，不在之内的地方不需要。

// good
function getUserProfile(user_id, organization_id) {
  let user_name = 'john_doe';
  let date_of_birth = '1990-01-01';
  let age = calculateAge(date_of_birth);

  if (user_id === 1) {
    // ...
  }
}

// bad
function getUserProfile(user_id,organization_id) {
    let user_name='john_doe';
    let date_of_birth='1990-01-01';
    let age = calculateAge(date_of_birth);

    if(user_id===1) {
    // ...
    }
}

3. 注释

3.1 单行注释

单行注释应该在注释内容前至少有两个空格。注释应该简洁明了，不需要解释明显的事情。

// good
let user_id = 1;  // user id

// bad
let user_name = 'john'; // here we assign user name

3.2 多行注释

多行注释应该使用/ 和 /来包含。多行注释应该以*号开始，每一行都应该有一个。注释的要点应该使用Markdown标记。

4. 变量

4.1 变量声明

在声明变量时，应尽可能使用const关键字。只有当需要重新分配值时，才使用let。

// good
const PI = 3.14;
let radius = 5;

// bad
var PI = 3.14;
var radius = 5;

示例1：

function calculateCircleArea(radius) {
  const PI = 3.14;
  let area = PI * radius * radius;

  return area;
}

4.2 变量赋值

一次只分配一个变量的值，以增加代码的可读性。

// good
let first_name = 'john';
let last_name = 'doe';

// bad
let [first_name, last_name] = ['john', 'doe'];

示例2：

function getFullName(user) {
  let first_name = user.first_name;
  let last_name = user.last_name;

  return last_name + ', ' + first_name;
}

5. 函数

5.1 函数长度

函数长度应该控制在20行左右。如果函数过长，就应该拆分为多个函数。

5.2 函数参数

一个函数应该要尽可能少的参数，不要超过3个。如果需要更多的参数，应该把它们放在一个对象或数组中，然后把对象或数组作为参数。

// good
function getUserProfile(user_id, options) {
  let user_name = 'john_doe';
  let date_of_birth = '1990-01-01';

  if (options.include_address) {
    let address = getAddress(user_id);
  }
}

// bad
function getUserProfile(user_id, include_address, include_phone_number) {
  // ...
}

示例3：

function getFullName(user) {
  let first_name = user.first_name;
  let last_name = user.last_name;

  if (user.middle_name) {
    return first_name + ' ' + user.middle_name + ' ' + last_name;
  } else {
    return first_name + ' ' + last_name;
  }
}

6. 错误处理

6.1 抛出错误

当一个函数遇到错误的情况，应该抛出一个错误对象，以便于调用者可以捕获错误。

// good
function divide(numerator, denominator) {
  if (denominator === 0) {
    throw new Error('Cannot divide by zero');
  }

  return numerator / denominator;
}

// bad
function divide(numerator, denominator) {
  if (denominator === 0) {
    return null;
  }

  return numerator / denominator;
}

6.2 捕获错误

当调用一个可能抛出错误的函数时，应该使用try-catch语句捕获错误。

// good
try {
  let result = divide(numerator, denominator);
} catch (error) {
  console.log(error.message);
}

// bad
let result = divide(numerator, denominator);
if (result === null) {
  console.log('Cannot divide by zero');
}

示例4：

function getUserProfile(user_id) {
  let user = getUser(user_id);

  if (!user) {
    throw new Error('User not found');
  }

  let profile = getUserProfileFromAPI(user);
  return profile;
}