1. console.log({name})取代console.log('name', name)
2.配置表取代硬编码
日常开发的类型判断是再常见不过的场景，比如我们有如下场景：
管理员的角色id为1,普通员工的角色id为2,超级管理员的角色id为3,每个角色对应显示页面上不同的按钮。普通员工只能查看列表，不能新增和编辑和删除，管理员和超级管理员都可以进行新增和编辑。只有超级管理员才能进行删除。于是我们有以下代码：
<template>
<div>
<el-button v-if="roleId !== 2" @click="handleClick">新增</el-button>
<el-button v-if="roleId !== 2" @click="handleClick">编辑</el-button>
<el-button v-if="roleId === 3" @click="handleClick">删除</el-button>
</div>
</template>
<script>
export default {
data() {
return {
roleId: null
}
},
created() {
this.roleId = localStorage.getItem('roleId')
if (this.roleId === 2) {
this.getNormalList()
}
if (this.roleId === 3) {
this.getSuperManageList()
}
if (this.roleId === 1) {
this.getManageList()
}
},
methods: {
handleClick() {
// 普通员工
if (this.roleId === 2) {
return
}
},
getManageList() {
},
getNormalList() {
},
getSuperManageList() {
}
}
}
</script>
可以看到，这一小部分示例代码里有很多写死的1、2、3。刚刚写好的时候不会有任何问题，但是随着我们页面越来越多，甚至项目中全局引入的时候，写死的数字满天飞。
终于有一天，事情发生了变化...
由于需求变更，后端角色字段需要调整。普通员工的字段要从2调整为4。心里暗暗的吐槽一番之后，我们傻眼了。
roleId满天飞，到处都是1、2、3。一处处找数字，一处处改。痛苦不易。
尤其是当满天飞的数字是离职跑路的人留下，而我们又刚接手的时候，这种痛苦只有自己知道...
其实这个就是我们常说的魔术字符串的的概念。魔术字符串就是指在代码之中多次出现、与代码形成强耦合的某一个具体的字符串或者数值。
优秀的代码应该及时发现并消除魔术字符串。我们看下如何优化：
<template>
<div>
<el-button v-if="roleId !== rolesConfig.normalRole" @click="handleClick">新增</el-button>
<el-button v-if="roleId !== rolesConfig.normalRole" @click="handleClick">编辑</el-button>
<el-button v-if="roleId === rolesConfig.superManagerRole" @click="handleClick">删除</el-button>
</div>
</template>
<script>
const rolesConfig = {
normalRole: 2,
managerRole: 1,
superManagerRole: 3
}
export default {
data() {
return {
roleId: null,
rolesConfig
}
},
created() {
this.roleId = localStorage.getItem('roleId')
if (this.roleId === rolesConfig.normalRole) {
this.getNormalList()
}
if (this.roleId === rolesConfig.superManagerRole) {
this.getSuperManageList()
}
if (this.roleId === rolesConfig.managerRole) {
this.getManageList()
}
},
methods: {
handleClick() {
// 普通员工
if (this.roleId === rolesConfig.normalRole) {
return
}
},
getManageList() {
},
getNormalList() {
},
getSuperManageList() {
}
}
}
</script>
你可能发现了，常用的消除魔术字符串的方法，其实就是把它写成一个变量。这样就可以消除耦合，以后我们只要维护一处代码配置就可以了。当然，你还可以通过import方式将config作为全局配置项供所有模块消费。
巧用JS隐式类型转换
JS是一门弱类型语言，不同type的变量可以相互转化。我们可以巧妙的利用这一特性，让我们的代码在做类型转换的时候，变得更简洁，更优雅。直接上代码：
- 快速转换Number类型：
// 字符串转数字代码对比
const price = parseInt('32'); //传统方式
const price = Number('32'); //传统方式
const price = +'32'; //新方式
// 日期转换为时间戳代码对比
const timeStamp = new Date().getTime(); //传统方式
const timeStamp = +new Date(); //新方式
//布尔转数字新方式
console.log(+true); // Return: 1
console.log(+false); // Return: 0
- 快速转换Boolean类型：
// 各种类型转布尔代码对比
const isTrue = Boolean('') //传统方式
const isTrue = !!'' //新方式
const isTrue = Boolean(0) //传统方式
const isTrue = !!0 //新方式
const isTrue = Boolean(null) //传统方式
const isTrue = !!null //新方式
const isTrue = Boolean(undefined) //传统方式
const isTrue = !!undefined //新方式
- 快速转换String类型：
// 数字转string代码对比
const num = 1;
const str = num.toString(); //传统方式
const str = num + ''; //新方式
总结
- 打印时使用console.log({name})
- 避免在代码中写入大量的数字
- 巧用隐式转换
-
字符串转数字
-
日期转换为时间戳
-
布尔转数字
-
xx转布尔
-
xx转string
作者：掘金干货君
链接：juejin.cn/post/711938…
