1抵碟、使用更嚴謹?shù)呐袛嗾Z句
Before:
function getData(val) {
// val is 'A' or 'B'
if (val === 'A') {
// A code
} else {
// B code
}
}
After:
即使val只有兩種可能性，也使用精確的判斷語句坏匪，未來值擴展時能保證相應的方法不受影響拟逮，也有助于提高可讀性
function getData(val) {
// val is 'A' or 'B'
if (val === 'A') {
// A code
} else if (val === 'B') {
// B code
}
}
2、讓內容更易被追溯
Before:
check在命名時沒有精確指向具體內容适滓，編輯器檢索check變量時唱歧，將會返回check、checkName、checkAge的相關結果颅崩，追溯成本變高
const data = {
check: false,
checkName: false,
checkAge: false
}
After:
使用更精確的命名法則，提升代碼的可讀性與可追溯性
const data = {
checkType: false,
checkName: false,
checkAge: false
}
3蕊苗、直截了當?shù)胤祷亟Y果
示例1
Before:
function getData(val) {
if (val === 'A') {
return true
} else {
return false
}
// or
return val === 'A' ? true : false
}
After:
針對布爾值結果可直接返回運算式本身
function getData(val) {
return val === 'A'
}
示例2
Before:
function getData(val) {
if (val === 'A') {
return 'A'
} else if (val === 'B') {
return 'B'
} else if (val === 'C') {
return 'C'
}
}
After:
針對使用結果與判定依據(jù)都是變量自身時沿后，使用集合式判斷直接輸出自身
function getData(val) {
if (['A', 'B', 'C'].includes(val)) {
return val
}
}
4、用對象處理值的映射關系
示例1
Before:
function getDict(val) {
switch(val) {
case '0':
return '選項1'
break
case '1':
return '選項2'
break
case '2':
return '選項3'
break
default:
return '沒有值'
}
}
After:
從0開始的有序枚舉使用數(shù)組來定義朽砰，更簡潔明了的書寫方式尖滚，且無視val值是字符串或數(shù)字類型，適用于有序且少量枚舉時
function getDict(val) {
return ['選項1', '選項2', '選項3'][val] || '沒有值'
}
示例2
Before:
function getDict(val) {
switch(val) {
case 'A':
return '選項1'
break
case 'B':
return '選項2'
break
case 'C':
return '選項3'
break
default:
return '沒有值'
}
}
After:
非數(shù)值型或數(shù)值型的值都可以使用對象來定義瞧柔，數(shù)值型仍無視val值是字符串或數(shù)字類型
function getDict(val) {
return {
A: '選項1',
B: '選項2',
C: '選項3'
}[val] || '沒有值'
}
function getDict(val) {
return {
'-1': '選項1',
'2': '選項2',
'3': '選項3'
}[val] || '沒有值'
}
5漆弄、減少不必要的引用關系
示例1
Before:
const columns = [{
label: '姓名',
prop: 'name'
}, {
label: '年齡',
prop: 'age'
}]
const data = {
columns: columns
}
After:
const data = {
columns: [{
label: '姓名',
prop: 'name'
}, {
label: '年齡',
prop: 'age'
}]
}
6、用對象囊括相應的變量
Before:
const data = {
dialogTitle: '添加用戶',
dialogWidth: '50%',
dialogType: 'add',
dialogVisible: false,
dialogComponent: demoItem
}
After:
const data = {
dialog: {
title: '添加用戶',
width: '50%',
type: 'add',
visible: false,
component: demoItem
}
}
7造锅、用適合的方式匹配數(shù)組中的項
操作對象數(shù)組項時
單項操作
Before:
性能優(yōu)撼唾，但可讀性與可維護性差，數(shù)據(jù)源缺乏可追溯性哥蔚，不知道具體操作的是哪個項倒谷，后期對數(shù)組增刪數(shù)據(jù)時，相應的索引可能會產(chǎn)生變化
list[1].hidden = false
After:
性能良糙箍，可讀性與可維護性強渤愁，直觀看到操作的是哪個數(shù)據(jù)項，可以通過關鍵屬性快速檢索到相應代碼深夯，后期對數(shù)組增刪數(shù)據(jù)時該方法都不受影響
list.find(item => item.prop === 'name').hidden = false
多項操作
Before:
性能差（非絕對）抖格，多次書寫，多次遍歷
list.find(item => item.prop === 'name').hidden = false
list.find(item => item.prop === 'age').hidden = false
list.find(item => item.prop === 'sex').hidden = false
After:
性能良（非絕對）咕晋，僅遍歷一次雹拄，并且保持find方法的可讀性與可維護性
for (const item of list) {
if (['name', 'age', 'sex'].includes(item.prop)) {
item.hidden = false
}
}
注：如若list數(shù)組長度過大，且匹配的項都在數(shù)組末尾時捡需，After中的示例性能可能變得更差办桨，After中的示例適用于大部分場景，但并非絕對站辉，需依具體場景做決策
8呢撞、同類事務都交由單個方法處理
Before:
const inputEvent = {
change: val => {
if (val) {
setData(val)
} else {
data.content = ''
}
}
}
async function setData(val) {
const res = await $vue.api.getContent({ key: val })
data.content = res
}
After:
const inputEvent = {
change: setData
}
async function setData(val) {
if (val) {
const res = await $vue.api.getContent({ key: val })
data.content = res
} else {
data.content = ''
}
}
9、多個異步任務同時運行
Before:
逐個運行饰剥，假設接口A耗時2秒殊霞，接口B耗時3秒，該方法總計等待時長約5秒
async function getData(val) {
const params = { key: val }
const res1 = await $vue.api.getContent1(params)
const res2 = await $vue.api.getContent2(params)
if (res1 && res2) {
// code
}
}
After:
同時運行汰蓉，該方法只等待最長響應時長接口B的3秒
async function getData(val) {
const params = { key: val }
const [res1, res2] = await Promise.all([
$vue.api.getContent1(params),
$vue.api.getContent2(params)
])
if (res1 && res2) {
// code
}
}
10绷蹲、使用別名方式引入資源（Vue）
針對層級過多的路徑
<template>中的資源
Before:
<img src="../../../assets/images/empty.png">
After:
<img src="@/assets/images/empty.png">
<script>中的資源
Before:
import attachmentList from '../../../views/common/attachmentList'
After:
import attachmentList from '@/views/common/attachmentList'
<style>中的資源
Before:
.text-underline {
background-image: url('../../../assets/images/empty.png');
}
After:
.text-underline {
background-image: url('~@/assets/images/empty.png');
}
