【前端代码规范】（一）命名规范

前端代码规范

说明： 规范的目的是为了编写高质量的代码，让你的团队成员每天得心情都是愉悦的。

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

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

一、编程规约

（一）命名规范

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 //*此类随意缩写严重降低了代码的可阅读性。*