》 我更加喜欢Google的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 大写

正例：

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
  5.     <meta charset="UTF-8" />
  6.     <title>Page title</title>
  7.   </head>
  8.   <body>
  9.     <img src="images/company-logo.png" alt="Company" />
  10.   </body>
  11. </html>

1.2.2 缩进

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

嵌套的节点应该缩进。

1.2.3 分块注释

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

前端 JS 项目开发规范 - 图1 

  2. <a name="23506b29"></a>
  3. ### 1.2.4 语义化标签
  5. HTML5 中新增很多语义化标签，所以优先使用语义化标签，避免一个页面都是 div 或者 p 标签
  7. 正例
  9. ```html
  10. <header></header>
  11. <footer></footer>

反例

  1. <div>
  2.   <p></p>
  3. </div>

1.2.5 引号

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

正例： <div class="news-div"></div>

反例： <div class='news-div'></div>

(三) CSS 规范

1.3.1 命名

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

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

不推荐：

  1. .fw-800 {
  2.   font-weight: 800;
  3. }
  5. .red {
  6.   color: red;
  7. }

推荐:

  1. .heavy {
  2.   font-weight: 800;
  3. }
  5. .important {
  6.   color: red;
  7. }

1.3.2 选择器

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

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

不推荐:

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

推荐:

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

1.3.3 尽量使用缩写属性

不推荐：

  1. border-top-style: none;
  2. font-family: palatino, georgia, serif;
  3. font-size: 100%;
  4. line-height: 1.6;
  5. padding-bottom: 2em;
  6. padding-left: 1em;
  7. padding-right: 1em;
  8. padding-top: 0;

推荐：

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

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

不推荐：

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

推荐：

  1. button{
  2.   width:100px;
  3.   height:50px;
  4.   color:#fff;
  5.   background:#00a0e9;
  6. }

1.3.5 省略0后面的单位

不推荐：

  1. div{
  2.   padding-bottom: 0px;
  3.   margin: 0em;
  4. }

推荐：

  1. div{
  2.   padding-bottom: 0;
  3.   margin: 0;
  4. }

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

不推荐：

  1. #header{
  2.   padding-bottom: 0px;
  3.   margin: 0em;
  4. }

推荐：

  1. .header{
  2.   padding-bottom: 0px;
  3.   margin: 0em;
  4. }

(四) LESS 规范

1.4.1 代码组织

1)将公共less文件放置在style/less/common文件夹

例:// color.less,common.less

2)按以下顺序组织

1、@import;
2、变量声明;
3、样式声明;

  1. @import "mixins/size.less";
  3. @default-text-color: #333;
  5. .page {
  6.   width: 960px;
  7.   margin: 0 auto;
  8. }

1.4.2 避免嵌套层级过多

将嵌套深度限制在3级。对于超过4级的嵌套，给予重新评估。这可以避免出现过于详实的CSS选择器。
避免大量的嵌套规则。当可读性受到影响时，将之打断。推荐避免出现多于20行的嵌套规则出现

不推荐：

  1. .main{
  2.   .title{
  3.     .name{
  4.        color:#fff
  5.     }
  6.   }
  7. }

推荐：

  1. .main-title{
  2.    .name{
  3.       color:#fff
  4.    }
  5. }

(五) Javascript 规范

1.5.1 命名

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

反例： _name / name_ / name$

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

正例： localValue / getHttpMessage() / inputUserId

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

正例：saveShopCarData /openShopCarInfoDialog

反例：save / open / show / go

特此说明，增删查改，详情统一使用如下 5 个单词，不得使用其他（目的是为了统一各个端）

add / update / delete / detail / get

附： 函数方法常用的动词:

  1. get 获取/set 设置,
  2. add 增加/remove 删除
  3. create 创建/destory 移除
  4. start 启动/stop 停止
  5. open 打开/close 关闭,
  6. read 读取/write 写入
  7. load 载入/save 保存,
  8. create 创建/destroy 销毁
  9. begin 开始/end 结束,
  10. backup 备份/restore 恢复
  11. import 导入/export 导出,
  12. split 分割/merge 合并
  13. inject 注入/extract 提取,
  14. attach 附着/detach 脱离
  15. bind 绑定/separate 分离,
  16. view 查看/browse 浏览
  17. edit 编辑/modify 修改,
  18. select 选取/mark 标记
  19. copy 复制/paste 粘贴,
  20. undo 撤销/redo 重做
  21. insert 插入/delete 移除,
  22. add 加入/append 添加
  23. clean 清理/clear 清除,
  24. index 索引/sort 排序
  25. find 查找/search 搜索,
  26. increase 增加/decrease 减少
  27. play 播放/pause 暂停,
  28. launch 启动/run 运行
  29. compile 编译/execute 执行,
  30. debug 调试/trace 跟踪
  31. observe 观察/listen 监听,
  32. build 构建/publish 发布
  33. input 输入/output 输出,
  34. encode 编码/decode 解码
  35. encrypt 加密/decrypt 解密,
  36. compress 压缩/decompress 解压缩
  37. pack 打包/unpack 解包,
  38. parse 解析/emit 生成
  39. connect 连接/disconnect 断开,
  40. send 发送/receive 接收
  41. download 下载/upload 上传,
  42. refresh 刷新/synchronize 同步
  43. update 更新/revert 复原,
  44. lock 锁定/unlock 解锁
  45. check out 签出/check in 签入,
  46. submit 提交/commit 交付
  47. push 推/pull 拉,
  48. expand 展开/collapse 折叠
  49. begin 起始/end 结束,
  50. start 开始/finish 完成
  51. enter 进入/exit 退出,
  52. abort 放弃/quit 离开
  53. obsolete 废弃/depreciate 废旧,
  54. collect 收集/aggregate 聚集

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

正例： MAX_STOCK_COUNT

反例： MAX_COUNT

1.5.2 代码格式

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

正例：

  1. if (x < y) {
  2.   x += 10;
  3. } else {
  4.   x += 1;
  5. }

2) 不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。

说明：任何情形，没有必要插入多个空行进行隔开。

1.5.3 字符串

统一使用单引号(‘)，不使用双引号(“)。这在创建 HTML 字符串非常有好处：

正例:

  1. let str = 'foo';
  2. let testDiv = '<div id="test"></div>';

反例:

  1. let str = 'foo';
  2. let testDiv = "<div id='test'></div>";

1.5.4 对象声明

1)使用字面值创建对象

正例： let user = {};

反例： let user = new Object();

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

正例：

  1. var user = {
  2.   age: 0,
  3.   name: 1,
  4.   city: 3
  5. };

反例：

  1. var user = new Object();
  2. user.age = 0;
  3. user.name = 0;
  4. user.city = 0;

1.5.5 使用 ES6,7

必须优先使用 ES6,7 中新增的语法糖和函数。这将简化你的程序，并让你的代码更加灵活和可复用。

必须强制使用 ES6, ES7 的新语法，比如箭头函数、await/async ， 解构， let ， for…of 等等

1.5.6 括号

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

正例：

  1. if (condition) {
  2.   doSomething();
  3. }

反例：

  1. if (condition) doSomething();

1.5.7 undefined 判断

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

正例：

  1. if (typeof person === 'undefined') {
  2.     ...
  3. }

反例：

  1. if (person === undefined) {
  2.     ...
  3. }

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

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

1.5.9 this 的转换命名

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

1.5.10 慎用 console.log

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