10個代碼編寫小習慣！提升可讀性、可維護性、性能

前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心

代碼習慣

好的代碼習慣是很重要的，體現(xiàn)在三個方面：

• 可讀性
• 可維護性
• 提升性能

接下來我就給大家講一下，我在項目中覺得比較好的代碼習慣吧~~~

1、合理使用 對象

多種條件(初始)

const?a?=?1
let?res
switch?(a)?{
??case?1:
????res?=?'one'
????break
??case?2:
????res?=?'two'
????break
??//?超級多...
}
console.log(res)?//?one

利用 對象(優(yōu)化)

const?a?=?1
const?map?=?{
??'1':?'one',
??'2':?'two',
??//?...
}
let?res?=?map[a]

2、合理使用 數(shù)組 + includes

多個或進行if判斷(初始)

const?a?=?1

if?(a?===?1?||?a?===?2?||?a?===?3)?{
??//?...
}

利用 數(shù)組+includes(優(yōu)化)

const?a?=?1

if?([1,?2,?3].includes(a))?{
??//?...
}

3、ES6默認參數(shù)

默認參數(shù)(初始)

const?fn?=?(name)?=>?{
??name?=?name?||?'林三心'
??console.log(name)
}

ES6默認參數(shù)(優(yōu)化)

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

嵌套解構(優(yōu)化)

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'
}

三元代替(優(yōu)化)

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(優(yōu)化)

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)?{
??//?進行對應操作
}

自動轉布爾值(優(yōu)化)

if?(key)?{
??//?進行對應操作
}

8、Vue不需響應式的數(shù)據(jù)

初始

如果selects是不需要響應式的，但是你放在這里，會進行響應式的處理，浪費性能

??data()?{
????return?{?
??????selects:?[
????????{label:?'選項一',?value:?1},
????????{label:?'選項二',?value:?2},
????????{label:?'選項三',?value:?3}
????]
????};
??}

優(yōu)化

放在外面，則不會進行響應式處理，節(jié)省性能

??data()?{
????//?放在這
????this.selects?=?[
??????{label:?'選項一',?value:?1},
??????{label:?'選項二',?value:?2},
??????{label:?'選項三',?value:?3}
????]
????return?{?};
??}

9、定時器、綁定事件的清除

export?default{
??data(){
????timer:null??
??},
??mounted(){
??????this.timer?=?setInterval(()=>{
??????//具體執(zhí)行內容
??????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:?'男'
??})
}

優(yōu)化

const?model?=?{
??name:?'林三心'
}
if?(confition1)?{
??model.age?=?22
}
if?(condition2)?{
??model.gender?=?'男'
}
//?合并更新
this.setData(model)

結語

點個【贊】和【在看】是對林三心最大的鼓勵，林三心會非常開心的~~~

關注公眾號【前端之神】，回復【加群】，即可獲得加入【千人前端學習大群】的方式