JavaScript命名规范

发表于 | 分类于 |

在过去的 6 个月里我没有写任何一篇博客，一个是因为确实很忙（996 搞互联网医院，项目砍掉了后又 996 做高速公路管理系统），另一个确实很懒，仅有的一点空闲时间都去玩游戏了。

实际上我并不是第一次阅读别人的代码，但给人的感觉就是有的代码没有多少注释却阅读起来浅显易懂，有的代码即时写了很多注释也很难搞懂在实现什么需求。由于每到一个新的公司都要制定相关的开发规范（确实换工作频率有点高），也在此记录一下变量命名规范供以后有需要时使用。

命名规则

经典的命名规则有：驼峰命名法、匈牙利命名法、下划线命名法、帕斯卡命名法，前端变量一般是使用的驼峰命名法，但组件通常使用帕斯卡命名法。

变量命名规则有：

变量名首字母必须为字母(a-z A-Z)，下划线(_)，或者美元符号($)开始

变量名只能是字母(a-z A-Z)，数字(0-9)，下划线(_)的组合，并且之间不能包含空格，数字不能放在变量名首位。

变量名不能使用编程语言的保留字。比如在JavaScript中不能使用true, false, while, case, break保留字等等。

命名风格

  1. JavaScript 中应使用驼峰命名法命名变量，不推荐使用下划线或美元符号作为开始和结束

    如果是函数内的私有变量可以以下划线开始

    如果是全局对象上的方法可以以美元符号开始

  2. 代码中严禁使用拼音与中英文混合的命名方式

  3. 可以使用单词简写，但仅限常用词汇，注意不同词汇但简写可能有冲突,如：

    1
    2
    vehicleDesc [desc -> description]
    vehicleDesc [desc -> descending]

  4. 复数化变量名称，而不是命名中包含集合类型名称。

    1
    2
    3
    4
    // good
    users;
    // bad
    userList;

  5. 常量应全部大写，单词间使用下划线分隔，力求表达式完整清除，不要在意长短

  6. 类名使用帕斯卡命名法，TypeScript 中枚举值也应该使用帕斯卡命名法

  7. 方法名应该准确表达方法的行为，在多数情况下应以动词开头

  8. TypeScript 中抽象类使用 Abstract 或者 Base 开头，异常类使用 Exception 结尾

    1
    abstract class AbstractUser {}

  9. 在 TypeScript 中类型使用 Type 结尾，接口使用 I 开头

  10. 在服务名上使用 Service 作为后缀

  11. vue 和 react 组件文件名使用帕斯卡命名法，Angular 则使用点和横线分隔文件名且符号名后追加约定但类型后缀。

  12. 在 vue 和 Angular 中，模板语法中所有组件名使用中线命名法，在 react 中使用大写驼峰命名法来表示。（统一就好）

  13. 所有 dom 引用使用 ref 作为后缀

  14. 样式命名使用中线连接，由于大量使用 scss、less 等 css 预编译工具，在嵌套的时候不建议超过 3 层，建议一层即可

  15. 使用驼峰或者中划线命名目录

[越努力，越幸运！]