10个代码编写小习惯！提升可读性、可维护性、性能
前端历劫之路
共 2471字，需浏览 5分钟
·
2022-04-15 18:01
前言
大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心
代码习惯
好的代码习惯是很重要的，体现在三个方面：
可读性 可维护性 提升性能
接下来我就给大家讲一下，我在项目中觉得比较好的代码习惯吧~~~
1、合理使用 对象
多种条件(初始)
const a = 1
let res
switch (a) {
case 1:
res = 'one'
break
case 2:
res = 'two'
break
// 超级多...
}
console.log(res) // one
利用 对象(优化)
const a = 1
const map = {
'1': 'one',
'2': 'two',
// ...
}
let res = map[a]
2、合理使用 数组 + includes
多个或进行if判断(初始)
const a = 1
if (a === 1 || a === 2 || a === 3) {
// ...
}
利用 数组+includes(优化)
const a = 1
if ([1, 2, 3].includes(a)) {
// ...
}
3、ES6默认参数
默认参数(初始)
const fn = (name) => {
name = name || '林三心'
console.log(name)
}
ES6默认参数(优化)
const fn = (name = '林三心') => {
console.log(name)
}
4、嵌套解构赋值
链式取值(初始)
const obj = {
eat: {
breakfast: 'egg',
dinner: 'meal'
}
}
console.log(obj.eat.breakfast) // egg
console.log(obj.eat.dinner) // meal
嵌套解构(优化)
const {
eat: {
breakfast,
dinner
}
} = obj
console.log(breakfast) // egg
console.log(dinner) // meal
5、三元代替if
if赋值(初始)
let player
let no = 24
if (no === 24) {
player = 'kobe'
} else {
player = 'james'
}
三元代替(优化)
let no = 24
const name = no === 24 ? 'kobe' : 'james'
6、多if的return
else if(初始)
const a = 1
const fn = () => {
if (a === 1) {
return 1
} else if (a === 2) {
return 2
} else if (a === 3) {
return 3
}
}
if(优化)
const a = 1
const fn = () => {
if (a === 1) {
return 1
}
if (a === 2) {
return 2
}
if (a === 3) {
return 3
}
}
7、if判断假值
===判断(初始)
if (key === null) {
// 进行对应操作
}
自动转布尔值(优化)
if (key) {
// 进行对应操作
}
8、Vue不需响应式的数据
初始
如果selects是不需要响应式的，但是你放在这里，会进行响应式的处理，浪费性能
data() {
return {
selects: [
{label: '选项一', value: 1},
{label: '选项二', value: 2},
{label: '选项三', value: 3}
]
};
}
优化
放在外面，则不会进行响应式处理，节省性能
data() {
// 放在这
this.selects = [
{label: '选项一', value: 1},
{label: '选项二', value: 2},
{label: '选项三', value: 3}
]
return { };
}
9、定时器、绑定事件的清除
export default{
data(){
timer:null
},
mounted(){
this.timer = setInterval(()=>{
//具体执行内容
console.log('1');
},1000);
}
beforeDestory(){
clearInterval(this.timer);
this.timer = null;
}
}
10、小程序多次setData合并
小程序不像React，小程序的setData并没有做多次修改自动合并，所以需要我们手动合并
初始
this.setState({
name: '林三心'
})
if (confition1) {
this.setState({
age: 22
})
}
if (condition2) {
this.setState({
gender: '男'
})
}
优化
const model = {
name: '林三心'
}
if (confition1) {
model.age = 22
}
if (condition2) {
model.gender = '男'
}
// 合并更新
this.setData(model)
结语
点个【赞】和【在看】是对林三心最大的鼓励，林三心会非常开心的~~~
关注公众号【前端之神】，回复【加群】，即可获得加入【千人前端学习大群】的方式
评论