博客

阿里 前端 规范_阿里前端开发规范

  • Post author:
  • Post category:其他



前端代码规范

Front Standard Guide


前端 JS 项目开发规范

规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的，大家在一起是快乐的。

引自《阿里规约》的开头片段：


—-现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。


一、编程规约


(一)命名规范


1.1.1 项目命名

全部采用小写方式， 以中划线分隔。

正例：

mall-management-system

反例：

mall_management-system / mallManagementSystem


1.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.1.3 JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小写方式， 以中划线分隔

正例：

render-dom.js / signup.css / index.html / company-logo.png

反例：

renderDom.js / UserManagement.html


1.1.4 命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。 说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用

正例：

henan / luoyang / rmb 等国际通用的名称，可视同英文。

反例：

DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3


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

反例：AbstractClass“缩写”命名成 AbsClass；condition“缩写”命名成 condi，此类随意缩写严重降低了代码的可阅读性。


(二)HTML 规范 （Vue Template 同样适用）


1.2.1 HTML 类型

推荐使用 HTML5 的文档类型申明： .

（建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限）。

  • 规定字符编码
  • IE 兼容模式
  • 规定字符编码
  • doctype 大写

正例： 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <meta charset="UTF-8" />
    <title>Page title</title>
  </head>
  <body>
    <img src="images/company-logo.png" alt="Company" />
  </body>
</html>


1.2.2 缩进

缩进使用 2 个空格（一个 tab）

嵌套的节点应该缩进。


1.2.3 分块注释

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

“`


1.2.4 语义化标签

HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签

正例 

<header></header>
<footer></footer>

反例 

<div>
  <p></p>
</div>


1.2.5 引号

使用双引号(” “) 而不是单引号(’ ‘) 。

正例： “

反例： “


(三) CSS 规范


1.3.1 命名

  • 类名使用小写字母，以中划线分隔
  • id 采用驼峰式命名
  • scss 中的变量、函数、混合、placeholder 采用驼峰式命名

ID 和 class 的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称

不推荐： 

.fw-800 {
  font-weight: 800;
}

.red {
  color: red;
}

推荐: 

.heavy {
  font-weight: 800;
}

.important {
  color: red;
}


1.3.2 选择器

1)css 选择器中避免使用标签名

从结构、表现、行为分离的原则来看，应该尽量避免 css 中出现 HTML 标签，并且在 css 选择器中出现标签名会存在潜在的问题。

2)很多前端开发人员写选择器链的时候不使用 直接子选择器（注：直接子选择器和后代选择器的区别）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到 DOM 末端的选择器， 你应该总是考虑直接子选择器。

不推荐: 

.content .title {
  font-size: 2rem;
}

推荐: 

.content > .title {
  font-size: 2rem;
}


1.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;


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

不推荐： 

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

推荐：