1.語義化命名
在聲明變量時，盡量讓自己的變量名稱具有清晰的語義化，使他人一眼便能夠看出這個變量的含義，在這種情況下，可以減少注釋的使用。
示例：
// bad 別人看到會疑惑：這個list是什么的集合？const list = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe'] // good 別人看到秒懂：原來是老師們的集合！const teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']復(fù)制代碼
2.各種類型命名
對于不同類型的變量值，我們可以通過一定的方式，讓別人一看看上去就知道他的值類型。
一般來說，對于boolean類型或者Array類型的值，是最好區(qū)分的。例如：boolean類型的值可以用isXXX、hasXXX、canXXX等命名；Array類型的值可以用xxxList、xxxArray等方式命名。
// badlet belongToTeacher = true;let teachers = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe'];// goodlet isTeacher = true;let teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe'];復(fù)制代碼
3.為常量聲明
我們在閱讀代碼時，如果你突然在代碼中看到一個字符串常量或者數(shù)字常量，你可能要花一定的時間去理解它的含義。如果使用const或者enum等聲明一下這些常量，可讀性將會有效得到提升。
示例：
// bad 別人看到會很疑惑：這個36D的含義是什么if (size === '36D') { console.log('It is my favorite');
}// good 別人看到秒懂：36D是最喜歡的大小const FAVORITE_SIZE = '36D';if (size === FAVORITE_SIZE) { console.log('It is my favorite');
}復(fù)制代碼
4.避免上下文依賴
在遍歷時，很多人會通過value、item甚至v等命名代表遍歷的變量，但是當(dāng)上下文過長時，這樣的命名可讀性就會變得很差。我們要盡量做到使讀者即使不了解事情的來龍去脈的情況下，也能迅速理解這個變量代表的含義，而不是迫使讀者去記住邏輯的上下文。
const teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']// bad 別人看到循環(huán)的末尾處的item時需要在去上面看上下文理解item的含義teacherList.forEach(item => { // do something
// do something
// do …………
doSomethingWith(item);
})// good 別人看到最后一眼就能明白變量的意思是老師teacherList.forEach(teacher => { // do something
// do something
// do …………
doSomethingWith(teacher);
})復(fù)制代碼
5.避免冗余命名
某些情況的變量命名，例如給對象的屬性命名，直接命名該屬性的含義即可，因為本身這個屬性在對象中，無需再添加多余的前綴。
// badconst teacher = { teacherName: 'Teacher.Cang', teacherAge: 37, teacherSex: 'female',
};console.log(person.personName)// goodconst teacher = { name: 'Teacher.Cang', age: 37, sex: 'female',
};console.log(teacher.name)復(fù)制代碼
6.使用參數(shù)默認(rèn)值
相比短路，使用ES6的參數(shù)默認(rèn)值能讓人更輕易地理解未傳參數(shù)時參數(shù)的賦默認(rèn)值。
// bad 需要多看一步才能理解是賦默認(rèn)值function getTeacherInfo(teacherName) {
teacherName = teacherName || 'Teacher.Cang'; // do...}// good 一看就能看出是賦默認(rèn)值function getTeacherInfo(teacherName = 'Teacher.Cang') { // do...}復(fù)制代碼
7.回調(diào)函數(shù)命名
很多人命名回調(diào)函數(shù)，尤其是為頁面或者DOM元素等設(shè)置事件監(jiān)聽的回調(diào)函數(shù)時，習(xí)慣用事件的觸發(fā)條件進行命名，這樣做其實可讀性是比較差的，別人看到只知道你出發(fā)了這個函數(shù)，但卻需要花時間去理解這個函數(shù)做了什么。
我們在命名回調(diào)函數(shù)式，應(yīng)當(dāng)以函數(shù)所要執(zhí)行的邏輯命名，讓別人清晰地理解這個回調(diào)函數(shù)所要執(zhí)行的邏輯。
// bad 需要花時間去看代碼理解這個回調(diào)函數(shù)是做什么的<input type="button" value="提交" onClick="handleClick" />function handleClick() { // do...}// good 一眼就能理解這個回調(diào)函數(shù)是提交表單<input type="button" value="提交" onClick="handleSubmitForm" />;function handleSubmitForm() { // do...}復(fù)制代碼
8.減少函數(shù)的參數(shù)個數(shù)
一個函數(shù)如果參數(shù)的數(shù)量太多，使用的時候就難以記住每個參數(shù)的含義了，并且函數(shù)多個參數(shù)有順序限制，我們在調(diào)用時需要去記住每個次序的參數(shù)的含義。通常情況下我們一個函數(shù)的參數(shù)個數(shù)在1-2個為佳，盡量不要超過三個。
當(dāng)函數(shù)的參數(shù)比較多時，我們可以將同一類的參數(shù)使用對象進行合并，然后將合并后的對象作為參數(shù)傳入，這樣在調(diào)用該函數(shù)時能夠很清楚地理解每個參數(shù)的含義。
// bad 調(diào)用時傳的參數(shù)難以理解含義，需要記住順序function createTeacher(name, sex, age, height, weight) { // do...}
createTeacher('Teacher.Cang', 'female', 37, 155, 45);// good 調(diào)用時雖然寫法略復(fù)雜了點，但各個參數(shù)含義一目了然，無需刻意記住順序function createTeacher({name, sex, age, height, weight}) { // do...}
createTeacher({ name: 'Teacher.Cang', sex: 'female', age: 37, height: 155, weight: 45})復(fù)制代碼
9.函數(shù)拆分
一個函數(shù)如果代碼太長，那么可讀性也是比較差的，我們應(yīng)該盡量保持一個函數(shù)只處理一個功能，當(dāng)邏輯復(fù)雜時將函數(shù)適當(dāng)拆分。
// badfunction initData() { let resTeacherList = axios.get('/teacher/list');
teacherList = resTeacherList.data; const params = { pageSize: 20, pageNum: 1,
}; let resMovieList = axios.get('/movie/list', params);
movieList = resMovieList.data;
}// goodfunction getTeacherList() { let resTeacherList = axios.get('/teacher/list');
teacherList = resTeacherList.data;
}function getMovieList() { const params = { pageSize: 20, pageNum: 1,
}; let resMovieList = axios.get('/movie/list', params);
movieList = resMovieList.data;
}function initData() {
getTeacherList();
getMovieList();
}復(fù)制代碼
10.注重寫注釋
不寫注釋應(yīng)該是很多開發(fā)者的一個惡習(xí)，看別人不寫注釋的代碼也是很多開發(fā)者最討厭的事情。
所以，無論是為了自己還是別人，都請注重編寫注釋。
// bad 不寫注釋要花大量時間理解這個函數(shù)的作用function formatNumber(num) { if (num < 1000) { return num;
} else { return `${(num / 1000).toFixed(1)}k`
}
}// good 有了注釋函數(shù)的作用和用法一目了然/**
* @param num
* @return num | x.xk
* @example formatNumber(1000);
* @description
* 小于1k不轉(zhuǎn)換
* 大于1k轉(zhuǎn)換為x.xk
*/function formatNumber(num) { if (num < 1000) { return num;
} else { return `${(num / 1000).toFixed(1)}k`
}
}復(fù)制代碼
提高代碼可讀性的代碼風(fēng)格其實還有很多，以上筆者主要從變量命名、函數(shù)和注釋三個方面，總結(jié)了10條比較常用的提高代碼可讀性的方法，希望對大家有所幫助。如有補充，歡迎評論。
相關(guān)免費學(xué)習(xí)推薦：JavaScript（視頻）
更多關(guān)于云服務(wù)器，域名注冊，虛擬主機的問題，請訪問西部數(shù)碼官網(wǎng)：m.ps-sw.cn
