阿里前端开发中的规范要求

在Web前端开发中，规范和标准从来不是为了扼杀代码的创造性与优雅性——恰恰相反，它们通过限制过度个性化，让团队用一种普遍认可的方式协作，从而提升效率、降低沟通成本。说到底，规范的最终目的，就是写出高质量的代码。

1. 命名规范

1.1 项目命名

全部采用小写字母，单词之间用中划线（-）分隔。

正例：mall-management-system

反例：mall_management-system、mallManagementSystem

1.2 目录命名

同样采用小写字母，中划线分隔。如果涉及复数结构，记得用复数形式，缩写则不用复数。

正例：scripts、styles、components、images、utils、layouts、demo-styles、demo-scripts、img、doc

反例：script、style、demo_scripts、demoStyles、imgs、docs

【特殊】Vue 项目中的 components 目录下的组件目录，使用 kebab-case 命名。

正例：head-search、page-loading、authorized、notice-icon

反例：HeadSearch、PageLoading

【特殊】Vue 项目中除 components 组件目录外的所有目录，同样使用 kebab-case 命名。

正例：page-one、shopping-car、user-management

反例：ShoppingCar、UserManagement

1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部小写，中划线分隔。

正例：render-dom.js、signup.css、index.html、company-logo.png

反例：renderDom.js、UserManagement.html

1.4 命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文。正确的英文拼写和语法让阅读者一目了然，避免歧义。注意，即使纯拼音命名也要避免。

正例：henan、luoyang、rmb 等国际通用名称，可视同英文。

反例：DaZhePromotion（打折）、getPingfenByName()（评分）、int 某变量 = 3

杜绝完全不规范的缩写，避免望文不知义：

反例：AbstractClass 缩写为 AbsClass；condition 缩写为 condi——这类随意缩写严重降低代码的可读性。

2. HTML 规范

2.1 HTML 类型

推荐使用 HTML5 的文档类型声明（建议使用 text/html 格式的 HTML，避免 XHTML。XHTML 及其属性如 application/xhtml+xml 在浏览器中的支持与优化空间都十分有限）。

2.2 缩进

缩进使用 2 个空格（一个 tab）；嵌套的节点应该缩进。

2.3 分块注释

在每个块状元素、列表元素和表格元素后，加上一对 HTML 注释。

2.4 语义化标签

HTML5 新增了很多语义化标签，优先使用它们，避免一个页面全是 div 或 p 标签。

正例：

反例：

2.5 引号

使用双引号（" "）而不是单引号（' '）。

3. CSS 规范

3.1 命名

类名使用小写字母，中划线分隔；id 采用驼峰式命名；scss 中的变量、函数、混合、placeholder 采用驼峰式命名。ID 和 class 的名称总是使用能反映元素目的和用途的名称，或者通用的名称，避免表象和晦涩难懂的名称。

3.2 选择器

1) CSS 选择器中避免使用标签名。从结构、表现、行为分离的原则来看，应尽量避免在 CSS 中间出现 HTML 标签，而且选择器中间出现标签名会带来潜在问题。

2) 使用直接子选择器。很多开发者写选择器链时不用直接子选择器，这可能导致设计问题且影响性能。如果不写很通用的、需要匹配到 DOM 末端的选择器，应该总是考虑直接子选择器。

3.3 尽量使用缩写属性

不推荐：

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐：

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

3.4 每个选择器及属性独占一行

不推荐：

button {width: 100px;height: 50px;color: #fff;background: #00a0e9;}

推荐：

button {
  width: 100px;
  height: 50px;
  color: #fff;
  background: #00a0e9;
}

3.5 省略 0 后面的单位

div {
  padding-bottom: 0;
  margin: 0;
}

3.6 避免使用 ID 选择器及全局标签选择器，防止污染全局样式

不推荐：

#header {
  padding-bottom: 0px;
  margin: 0em;
}

4. Ja vaScript 规范

4.1 命名

1) 采用小写驼峰命名（lowerCamelCase），代码中的命名均不能以下划线开头或结尾，也不能以下划线或美元符号结束。

反例：_name、name_、name$

2) 方法名、参数名、成员变量、局部变量统一使用 lowerCamelCase 风格，必须遵从驼峰形式。

正例：localValue、getHttpMessage()、inputUserId

其中方法命名必须是动词或动词+名词形式。

正例：sa veShopCarData、openShopCarInfoDialog

反例：sa ve、open、show、go

3) 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长。

正例：MAX_STOCK_COUNT

反例：MAX_COUNT

4.2 代码格式

1) 使用 2 个空格进行缩进。

2) 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来，以提升可读性。任何情形下，没有必要插入多个空行。

4.3 字符串

统一使用单引号（'），不使用双引号（"）。这在创建 HTML 字符串时非常有好处。

4.4 对象声明

1) 使用字面值创建对象。

正例：let user = {};

反例：let user = new Object();

2) 使用字面量来代替对象构造器。

正例：

var user = {
  age: 0,
  name: 1,
  city: 3
};

反例：

var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;

4.5 使用 ES6+

必须优先使用 ES6+ 中新增的语法糖和函数，比如箭头函数、await/async、解构、let、for...of 等。这将简化你的程序，让代码更灵活、更可复用。

4.6 括号

下列关键字后必须有大括号（即使代码块的内容只有一行）：if、else、for、while、do、switch、try、catch、finally、with。

正例：

if (condition) {
  doSomething();
}

反例：

if (condition) doSomething();

4.7 undefined 判断

永远不要直接使用 undefined 进行变量判断；使用 typeof 和字符串 'undefined' 对变量进行判断。

正例：

if (typeof person === 'undefined') {
  ...
}

反例：

if (person === undefined) {
  ...
}

4.8 条件判断和循环最多三层

条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但谨记不要写太长的三目运算符。如果超过 3 层，请抽成函数，并写清楚注释。

4.9 this 的转换命名

对上下文 this 的引用只能使用 self 来命名。

4.10 慎用 console.log

因为 console.log 大量使用会有性能问题，所以在非 webpack 项目中谨慎使用 log 功能。

结尾

规范的最终价值，是让代码在团队协作中保持可读、可维护、可扩展。以上这些约定并不复杂，但严格执行下来，能省去大量沟通和调试的成本。不妨从下一个项目开始，一件件落实。