JavaScript开发规范要求(图文并茂)

简介

JavaScript是一门非常灵活的语言，灵活性也为其带来了使用难度,所以为了保证代码的品质和可维护性，一些好的JavaScript开发规范是必不可少的。

为此，本文将详细介绍旨在提高JavaScript代码品质和可维护性的开发规范要求。

代码组织

引入顺序

首先，我们应该根据引入类型将脚本分成3个部分:

• 外部库依赖 - 从CDN或本地文件系统引入的第三方库。
• 内部依赖 - 当前项目中的依赖，包括自己的组件，公共服务等。

• 自身代码 - 单个文件的核心业务逻辑，并暴露的其他JavaScript模块使用的API（如果有的话）。
  在这些部分中，脚本引入的顺序应该是:

• 外部库依赖

• 内部依赖
• 自身代码
  每个部分包含不超过10个引入的脚本。在一个部分内，按照字母升序排列。

例如：

<!-- 加载外部库依赖 -->
<script src="http://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!-- 加载内部依赖 -->
<script src="/modules/common/services/user.js"></script>
<script src="/modules/common/services/order.js"></script>

<!-- 加载自身代码 -->
<script src="/modules/checkout/checkout.js"></script>
<script src="/modules/checkout/main.js"></script>

代码格式

代码应该始终使用4个空格的缩进，并使用单引号作为字符串字面值的首选，避免混淆。

变量规则:

• 变量名：用小驼峰式命名，且不能以下划线或美元符号开始或结束。
• 变量作用域：变量应该始终在最小范围内声明并尽可能被初始化。
• 常量：常量应该使用大写字母、下划线。

例如：

// good
var myName = 'John Doe';

// good
var myDog = {
  'name': 'Spot',
  'breed': 'Dalmatian'
};

// bad
var MyName = 'John Doe';

// bad
var my_dog = {
  name: 'Spot',
  breed: 'Dalmatian'
};

注释

相信很多开发者都知道注释在代码中其实非常有用。在JavaScript中，好的注释可以使代码更加紧凑、可读性更强、更易于维护。

1.注释格式
- 独立（块级）注释：在注释之前和之后都加空行。
- 行内注释：在代码的同一行注释，不能在语句之后注释，可以在语句前注释或在一行内跟随语句后注释

例如：

// 独立（块级）注释
function add(a, b) {

  // 行内注释
  return a + b;
}

2.注释内容
注释应该简明扼要，只需要解释那些需要更好的理解或那些可能引起歧义的代码。

错误处理

在JS开发中，如果没有足够的错误处理机制，可能会导致意外的问题。好的错误处理将使代码可维护性更高并保持正确性。

1.try-catch
使用try-catch结构来捕获运行时错误。尽可能具体并为每个错误指定适当的标题，以便在调试时更好地定位问题。

例如：

function divide(a, b) {
  try {
    if (b === 0) throw new Error('divide by zero');
    return a / b;
  } catch (err) {
    console.error(err); // 输出错误信息
  }
}

2.返回优雅的错误
提供有意义的错误消息对于确保代码质量非常重要。在返回值时，永远不要返回 null。而应该返回一个简明有意义的错误消息。

例如：

function my_function(value) {
  if (value < 1 || value > 10) {
    return 'Value out of range (1-10)';
  }

  // 其他代码
}

总结

通过这些规范，我们可以带着更好的习惯去开发我们的JS程序。在其中，还有更多需要吸收和掌握的知识和方法，希望本文能对广大开发者有所帮助。

参考链接:
阮一峰JavaScript教程