第 1 卷
前端 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 等国际通用的名称，可视同英文。
反例：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 标签
反例：
<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;
}