15个JS编码规范：让代码更整洁易维护

JavaScript编码规范概述

作者：Daniel Anderson 本文源自Medium，经原作者授权翻译分享。

制定编码规范有助于实现以下目标：

保持代码风格一致
提升代码的可读性与理解效率
降低后期维护成本

以下是作者认为对上述目标有具体帮助的一些编码建议。

变量声明与比较规范

1. 比较操作优先使用 === 而非 ==

这一点至关重要，因为JavaScript是动态类型语言，使用 == 进行相等性判断时允许隐式类型转换，可能导致非预期的结果。错误示例：


if (val == 2)

正确示例：


if (val === 2)

2. 避免使用 var，改用 let

使用 let 声明变量可以有效避免 JavaScript 中 var 带来的作用域污染问题。错误示例：


var myVar = 10;

正确示例：


let myVar = 10;

3. 优先使用 const 代替 let

这能防止开发者意外修改不应被更改的变量，同时有助于提升代码的可读性。错误示例：


let VAT_PERCENT = 20;

正确示例：


const VAT_PERCENT = 20;

代码格式与命名约定

4. 始终使用分号（;）

虽然在 JavaScript 中分号不是强制要求的语句终止符，但显式使用分号有助于保持代码风格的一致性。

错误示例：


const VAT_PERCENT = 20;
let amount = 10
return addVat(amount, vatPercent)

正确示例：


const vatPercent = 20;
let amount = 10;
return addVat(amount, vatPercent);

5. JavaScript 命名规范

let 变量应采用驼峰命名法（camelCase）。
const 若在文件顶部定义，建议使用大写的蛇形命名法（SCREAMING_SNAKE_CASE）；若在文件内部使用，则采用驼峰命名法。
class 类名应使用帕斯卡命名法（PascalCase），例如：MyClass。
函数名应使用驼峰命名法，例如：myFunction。

现代JavaScript特性应用

6. 字符串拼接使用模板字符串

模板字符串支持嵌入表达式，使代码更简洁。错误示例：


let fullName = firstName + " " + lastName;

正确示例：


let fullName = `${firstName} ${lastName}`;

7. 尽可能使用 ES6 箭头函数

箭头函数提供了更简洁的函数表达式语法。错误示例：


var multiply = function(a, b) {
 return a* b;
};

正确示例：


const multiply = (a, b) => { return a * b};

控制结构与逻辑优化

8. 控制结构必须使用大括号

所有控制结构（如 if、else、for、do、while 等）都必须使用花括号包裹，以避免后期维护时出现逻辑错误。错误示例：


if (valid)
  doSomething();
if (amount > 100) 
  doSomething();
else if(amount > 200)
  doSomethingElse();

正确示例：


if (valid) {
  doSomething();
}
if (amount > 100) {
  doSomething();
} 
else if(amount > 200) {
  doSomethingElse();
}

9. 大括号应与关键字同行，且中间留有空格

错误示例：


if (myNumber === 0)
{
  doSomething();
}

正确示例：


if (myNumber === 0) {
  doSomething();
}

10. 尽量减少代码嵌套层级

多层 if 嵌套会导致代码混乱且难以阅读。虽然有时无法完全避免，但应仔细审视代码结构，寻找优化空间。错误示例：


if (myNumber > 0) {
  if (myNumber > 100) {
       if (!hasDiscountAlready) {
           return addDiscountPercent(0);
       } else {
           return addDiscountPercent(10);
       }
  } else if (myNumber > 50) {
    if (hasDiscountAlready) {
       return addDiscountPercent(5);
    }
  } else {
    if (!hasDiscountAlready) {
      return addDiscountPercent(0);
    } else {
      return addDiscountPercent(1);
    }
  }
} else {
     error();
}

正确示例：


if (myNumber <= 0) {
   return error;
}
if (!hasDiscountAlready) {
    return addDiscountPercent(0);
}
if (myNumber > 100) { 
    return addDiscountPercent(10);
}
if (myNumber > 50) { 
    return addDiscountPercent(5);
}
return addDiscountPercent(1);

通过上述示例可见，减少嵌套层级后，代码的可读性显著提升。

函数与模块最佳实践

11. 尽可能使用默认参数

在 JavaScript 中，若调用函数时未传递参数，其值默认为 undefined。错误示例：


myFunction(a, b) {
 return a + b;
}

正确示例：


myFunction(a = 0, b = 0) { 
 return a + b;
}

12. Switch 语句应包含 break 和 default

虽然通常建议尽量避免使用 switch 语句，但如果必须使用，请确保每个 case 都包含 break，并编写 default 分支。

错误示例：


switch (myNumber)
{
 case 10: 
 addDiscountPercent(0);
 case 20: 
 addDiscountPercent(2);
 case 30:
 addDiscountPercent(3);
}

正确示例：


switch (myNumber)
{
  case 10: 
    addDiscountPercent(0);
    break;
  case 20: 
    addDiscountPercent(2);
    break;
  case 30:
    addDiscountPercent(3);
    break;
  default: 
    addDiscountPercent(0);
    break;
}

13. 避免使用通配符导入

错误示例：


import * as Foo from './Foo';

正确示例：


import Foo from './Foo';

14. 使用布尔值的简写方式


if (isValid === true)
if (isValid === false)

错误示例：


if (isValid)
if (!isValid)

正确示例：

15. 避免不必要的三元运算符


const boo = a ? a : b;

错误示例：


const boo = a || b;

总结与团队实施建议

正确示例：

总结

任何编程语言的编码规范都能显著提升应用程序的可读性和可维护性。如果在团队中工作，强制执行编码标准可能颇具挑战。以下是一些建议：
进行代码审查，逐行检查代码。
整理或使用代码分析工具。

原文链接: https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0

原文链接：https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0 到此这篇关于15个简单的JS编码标准让你的代码更整洁(小结)的文章就介绍到这了,更多相关JS编码标准内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！

15个JavaScript编码规范提升代码整洁度

JavaScript编码规范概述

变量声明与比较规范

代码格式与命名约定

现代JavaScript特性应用

控制结构与逻辑优化

函数与模块最佳实践

总结与团队实施建议

实用工具推荐