10个代码编写小习惯！提升可读性、可维护性、性能

前言

大家好，我是林三心，用最通俗易懂的话讲最难的知识点是我的座右铭，基础是进阶的前提是我的初心

代码习惯

好的代码习惯是很重要的，体现在三个方面：

• 可读性
• 可维护性
• 提升性能

接下来我就给大家讲一下，我在项目中觉得比较好的代码习惯吧~~~

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)

结语

点个【赞】和【在看】是对林三心最大的鼓励，林三心会非常开心的~~~

关注公众号【前端之神】，回复【加群】，即可获得加入【千人前端学习大群】的方式