Anti-chaos

JavaScript 风格指南

命名

根据不同场景，会用到小驼峰式（lowerCamelCase）、大驼峰式（UpperCamelCase）和大蛇式（UPPER_SNAKE_CASE）。

在使用流式接口进行 API 设计时，可以不受方法命名规则限制。

细则

1、变量名/属性名、函数名/方法名、参数名使用小驼峰式。

2、构造函数名、类名使用大驼峰式。

3、常量名使用大蛇式。

4、使用英文单词命名，不可使用拼音、汉字等，不可使用「简写」。

5、即使是全大写的专有名词，也要严格遵从驼峰式命名规则。

6、用词需要简洁、达意。

7、非全局、通用场景时需要加上准确描述业务场景的词汇。

8、布尔型变量使用形容词、动词的现在分词和过去分词。

9、返回值是布尔型的函数/方法，使用「is-」或「has-」开头，后面可接名词、形容词及动词的现在分词和过去分词。表达「是/否」时前面用「is-」，表达「有/无」时前面用「has-」。

10、返回值是视图结构的函数/方法，使用「render-」开头的动宾结构。

11、返回值是其他类型的函数/方法，使用「get-」、「find-」等具有「获取/获得」语义的单词开头的动宾结构。

如果函数/方法内部的逻辑很简单，推荐使用「get-」，否则最好使用「find-」。

12、对事件进行处理的函数/方法，使用「handle-」或「on-」开头。

13、其他无返回值的函数/非生命周期方法，使用具有相关功能语义的动宾结构或动补结构。

14、生命周期方法使用动词的原型或过去分词。

范式

不限制使用一种编程范式，可以同时使用面向对象、函数式、响应式等，但要遵守相应编程范式的一些原则。

面向对象

1、在使用面向对象编程时，必须要基于类，不可直接基于原型。

函数式

1、参数不可变，不允许直接修改入参。

不允许对入参重新赋值。如果入参是个对象，同时不允许对其属性进行重新赋值。

2、返回值必须为一个新值。

响应式

格式

TBD

注释

TBD

其他

类型

开发时使用 TypeScript，因此要重视类型及类成员的访问控制。

1、变量/属性定义、函数/方法定义、函数/方法参数、函数/方法返回值都需要标明类型。

2、禁止使用 any。

3、有 return 关键字的函数/方法被视为有返回值，如果直接 return;，则返回值类型是 undefined。

4、无返回值的函数/方法，即没有 return 关键字的，返回值类型为 void。

5、异步函数/方法的返回值为 Promise<T>。

6、类成员必须标明访问控制符。

7、可被外部访问的类成员使用 public 访问控制符。

8、可被派生类访问的类成员使用 protected 访问控制符。

9、仅能被实例访问的类成员使用 private 访问控制符。

10、标为 readonly 的类属性只能被赋值一次，即初始化。

组件

1、与最终显示无直接关系的变量或常量，不作为组件的状态存在。

无构建

有的场景不能使用构建工具，例如：在后台管理系统的页面主要是由后端工程师开发的情况，使用前端构建工具会增加他们的开发成本，大多数情况是选择 jQuery 作为基础库，所以不能用 ES6+ 语法。

每个 JS 文件的代码应该这样组织：

// 所有代码都包裹在一个立即执行函数里面
// 目的是避免环境污染
(function () {
  // 开启严格模式
  // 为了规范代码使用
  'use strict';

  // 页面内函数间共用的变量提前定义
  var foo = '';
  var bar = 0;

  function initForm() {}

  function initList() {}

  $(document).ready(function () {
    // `$(document).ready()` 里面只执行定义好的初始化类的函数
    initForm();
    initList();
  });
})();

目录