前端代码常用规范

1.变量和方法命名见名知意，使用小驼峰命名，避免使用下划线

bad

js 复制代码

let a1 = 1;  // 坚决杜绝使用让人看了也不知道是啥的字母数字组合  
const user_last_login_time = {}; // 不要使用下划线命名变量  
list(){}; // 只写一个list

good

js 复制代码

const userLastLoginTime = {}; // 小驼峰可读性更高  
getUserList(){}; // 方法名最好使用动词+名词的组合

2. 方法名定义推荐加上动词前缀

加载数据使用 load 前缀，例如：loadUserData
获取数据或值使用 get 前缀，例如： getUserAvatar()

arduino 复制代码

>  load与get的关系是load前缀的方法可以包含多个get前缀的方法，get不可以包含load前缀的方法，可以理解为要加载的数据由一或多个get前缀的方法来获取

js 复制代码

loadUserData(){  
   this.getUserLocation();  
   this.getUserInfo();  
   ...  
 }

设置数据或值使用 set/update 前缀，例如： updateUserAvatar()
格式化数据使用 format 前缀，例如： formatUserList()
判断某种条件使用 judge 前缀，例如: `judgeCanShowModal(); judgeIsVipUser();judgeHasRecord();

有的同学直接使用isVipUser()这种命名方式，也可以，但是我更倾向于函数是一个动作，用 const isVipUser = true 可以表示一个值，表示一个判断动作的话还是加上前缀比较好。

监听事件或数据变化使用 on 前缀，例如 onFilterChanged(); onSubmitSuccess();
点击事件使用 click/tap 前缀，例如 clickUserAvatar();

移动端开发建议使用tap，PC端建议使用click

跳转新页面使用 navTo 前缀，例如 navToDetailPage();

3.常量使用全大写，使用下划线连接单词

js 复制代码

const PAGE_SIZE = 10;

4.命名风格全局要统一，有章可循，别这个文件这样，另一个文件又那样了

复制代码

不是非要一定按照上面的前缀来命名，只要你做到让人一眼看上去就知道这个方法是干嘛的，而且要有规律可循，你可以按自己的喜好来命名。  
举个例子：  
你知道你的某个同事喜欢用 judge 前缀来命名具有判断相关逻辑的方法，那你看他代码时一看到 judge 开头的，不用看内容只看名你就大概知道是干嘛的了，节省下来的时间干别的不香么。

5.严格控制文件行数，最好保持在500行以下

复制代码

该拆分的拆分，文件行数过多，可维护性和可读性都很差，别说什么业务本身就很复杂，拆不出来只能说你代码组织能力差。

拆分维度根据你的需求不同而不同，但是大体的思路可以是common通用方法、utils工具方法、gateway请求方法，presenter数据处理、models数据模型（TS）等，还可以根据你的业务逻辑来拆分，总之维度很多，重点是要拆的清晰，一定要避免拆的多而杂，那样还不如不拆。

6.严格控制代码重复率，不要图方便一味复制粘贴

复制代码

代码重复率是一个团队代码质量评测一个很重要的指标，显而易见重复代码会占用更多空间，并且会增加维护的困难度，修改你复用的重复代码时很容易漏掉，要耗费额外精力去验证，所以尽量拆出你的复用逻辑，别偷懒，别给自己留坑。

7.写注释，随手写注释，刻在骨子里，像条件反射一样！

复制代码

不多说，你自己去看看不爱写注释的那位同事的代码，感受一下，你就明白为啥注释这么重要了，或者简单点，你就看你自己没写注释的代码，一个月前两个月前的，你还能完全捋清楚当时的思路不？

方法最好都写注释，变量名等如果你觉得实习生都可以轻松看懂的部分可以不写。

8. 方法、类、组件遵循职责单一原则

ini 复制代码

内部所做的事情要与名字契合，不要额外写无关的逻辑

```
  // 判断是否新用户
  judgeIsNewUser(user) {
    const isNewUser = true;
    sendMessage(isNewUser); // 该方法的职责仅仅是判断是否新用户，这里调用了发送消息方法，做了额外的事，
    return isNewUser;
  }
```

缺点之一就是有别处想获取是否是新用户时调用该方法，也会调用sendMessage方法，那你说我可以传个参数加个判断，兄弟，咱别把代码写成x好么，你这一层套一层的何必呢，别人看你代码的时候顺着你给的线索捋？说好的只是判断新用户，咋又顺带干了别的活呢，那还能信任你的命名了么，再看你其他代码的时候是不是就心怀顾忌了。

同理，类和组件也是一样，说干啥就干啥，不要偷着做别的事。

9.使用ES6+语法，简化代码，提高效率

JavaScript语言本身也有一些令人不满意的地方，如变量提升，回调地狱等，ES6+主要是为了解决ES5的先天不足，每一次标准的诞生都意味着语言的完善，功能的加强，2015年就发布了ES6，如果你还在用老语法开发，那就真的脱节了。

10.列表渲染和条件渲染写在标签的第一个属性

js 复制代码

// Vue  
<div v-if="show" id="" class=""></div>  
<div v-else id="" class=""></div>  
// 小程序  
<view wx:if="{{show}}" id="" class=""></view>  
<view wx:else id="" class=""></view>  
<view wx:for="{{list}}" wx:key="index" id="" class="" data-index="{{index}}" bindtap="clickBtn" ></view>

这样写可以增加可读性，可以更快速直观地看出来元素之间的关系，以及是否渲染，如何渲染，这些信息比其他属性更主要。其他框架同理。

11.样式文件中根据dom结构分块且有序地编写样式

12.能使用CSS实现的尽量不要用JS

假设有个需求，只在列表中的第一项展示标签，你第一反应是不是就是在JS中或者在模板中if判断，试试用伪类:first-child，轻松搞定。 .list .item .label {

display: none;

}

.list .item:first-child .label {

display: block;

} 还有使用 flex 的 order 属性控制元素顺序，可以省去很多JS代码。

还有一些简单的图形如倒三角使用CSS写就行，没必要切图，图片多了也会影响整体性能。

总之思路就是，用CSS减少不必要的JS逻辑、图片、动图等。

13.使用eslint，stylelint检查代码

复制代码

换行啊，空格啊，语法啊等等规范繁多，你不需要一个个去记，写完了人工进行检查，那效率可太低了，使用插件帮你搞定。

eslint，stylelint在你的代码不符合规范时会提示错误或警告，提高你的代码质量，也能一定程度避免一些语法错误，推荐使用vscode配合以上插件可根据你的规则自动修复代码。

尤其新手，一定要用，别怕麻烦，从最初接触代码就主动培养良好习惯，比你后期进入规范严格的公司被强制要求的时候再花精力改进要好得多（现在大多数公司都有强制的规范，不符合规范你代码都提不上来）。

可以使用现成的规范包或其他大厂规范，大家自己搜就可以，大同小异，不用纠结到底用哪种，公司有统一规范，就以公司为准，公司没有规范就选被业界普遍应用的规范，慢慢再根据自己的习惯优化（正经的技术团队不会没有规范要求的🐶）。