前端规范 - js开发规范

因为会牵扯到业务逻辑，在实际开发场景中，js开发会占绝大部分，相应的规范细节也比较多
限于篇幅原因，加上有eslint的这个利器，本文只讲一些最最常用的规范

[强制] 开启eslint

开启了eslint的项目，可以保证一个项目的底线；没有开启eslint的项目，时间长了大概率惨不忍睹

• 保证了运算符之间、函数名称、注释之间最起码的空格
• 保证最起码的统一缩进方式
• json对象键值重复等相关提示

我们做的是引用eslint的standard模式，然后在开发中调整成适合自己团队的规则
比如 no-console no-debugger可以关闭

[强制] 两格缩进

两格缩进，html js css三者统一为两格缩进
为什么不使用四格缩进

• 两格缩进可以在电脑窄屏与宽屏模式下，展示都比较友好
• 单行长度有限制的条件下（一般是120个字符），两格缩进可以写更多代码

[强制] 行内空格

• 单行、多行注释，注释语句与注释符号上面
• ±*/=等算符前后

// 获取xxlist
getXX () {
  ...
  const b = a + c
},

保持空行

[强制] 文件末尾空行

[推荐] 不同模块之间空行

[强制] 空行不超过1个

[强制] 引号使用单引号

html使用双引号，js使用单引号

[强制] 语句结尾不使用分号

语句不加分号，在特点条件下会有问题，比如下一段代码

...
// 不加分号回报错；开了eslint的话，会提示该写法有误
const data = res.data
(data.list || []).forEach(item => {
    console.log(item)
})

[强制] 使用let、const替代var

由于变量提升、无块级作用域等原因，var基本上已经退出了历史的舞台

[推荐] 匿名函数使用箭头函数

比如setTimeout setInterval 的回调函数可以利用箭头函数this的指向特性，获取当前上下文的this对象

// bad
const _this = this
setTimeout(function() {
  _this.xxx()
}, 10)

// good
setTimeout(() => {
  this.xxx()
}, 10)

[推荐] 避免回调地狱

• 方法返回Promise，方便可以通过 .then 的方式进行链式调用
• 获取异步的数据，按具体情况使用 async/await 操作

[推荐] 慎用setTimeout

禁止通过 setTimeout 来获取异步接口的数据
能通过 this.$nextTick实现的，不用 setTimeout

[强制] import 放置在模块最上面

• npm里面的包
• 项目公用的包
• 业务模块的包

import axios from 'axios'

import utils from '@/utils'

import xx from './xx.js'

[推荐] 三元运算符不嵌套

三元运算符只用作单行操作，如果嵌套过深的话，会增加阅读难度

[推荐] 使用includes来做数据包含判断

// bad
if (type === 1 || type === 2 || type === 3) {
	...
}
// good
if ([1, 2, 3].includes(type)) {
	...
}

[推荐] 使用map、object替代if、switch case条件取值

// bad
let statusName = ''
if (type === 1) {
    statusName = '草稿'
} else if (type === 2) {
    statusName = '已发布'
} else if (type === 3) {
    statusName = '已删除'
}
// good
let statusName = {
    1: '草稿',
    2: '已发布',
    3: '已删除'
}[type] || ''

[不强制] 使用三等

由于目前项目需要对接中台各个系统，以及上下游数据，数据来源的不同，保证了数据格式不能保证
如果强制使用三等的话，反而无法对数据进行容错
也不建议 Number(type) === 1 来做盘点

欢迎查阅本专栏其余前端相关规范

• html css js 三驾马车 3篇
  前端规范 - html规范
  前端规范 - css规范
  前端规范 - js开发规范

• 开发框架类 1篇
  前端规范 - vue开发规范

• 开发实践类 5篇
  前端规范 - git使用规范
  前端规范 - 前端注释规范
  前端规范 - 前端广义安全规范
  前端规范 - 前后端接口规范
  前端规范 - 前端项目开发规范