Все любят читаемый код, потому что читабельный код всегда сияет!
Это как сказать окружающим: смотри, учитель! Окружающие могут быть пренебрежительны: что такого в учителе? Но если вы скажете: смотрите, мистер Цан! Это может много людей будет привлечено вашими словами. Разница в одно слово, результат совершенно другой.
То же самое относится и к прелести читаемости кода: код с высокой читабельностью может быть легко понят другими, что может значительно сократить время обслуживания в более поздний период. Сегодня я суммирую 10 часто используемых небольших методов для улучшения читабельности кода, и я надеюсь, что вы можете дать мне несколько советов.
1. Семантическое наименование
При объявлении переменной старайтесь, чтобы ее имя имело четкую семантику, чтобы другие могли сразу увидеть значение переменной.В этом случае вы можете сократить использование комментариев.
Пример:
// bad 别人看到会疑惑：这个list是什么的集合？
const list = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']
// good 别人看到秒懂：原来是老师们的集合！
const teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']
2. Различные типы нейминга
Для значений переменных разных типов мы можем использовать определенный способ, чтобы другие могли с первого взгляда узнать их типы значений.
Вообще говоря, лучше всего различать значения типа boolean или типа Array. Например, значение типа boolean может называться isXXX, hasXXX, canXXX и т. д., значение типа Array может называться xxxList, xxxArray и т. д.
// bad
let belongToTeacher = true;
let teachers = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe'];
// good
let isTeacher = true;
let teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe'];
3. Объявить константу
Когда мы читаем код, если вы вдруг видите в коде строковую константу или числовую константу, вам может потребоваться некоторое время, чтобы понять ее значение. При использовании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');
}
4. Избегайте контекстных зависимостей
При обходе многие люди будут называть переменные, представляющие обход, по значению, элементу или даже v и т. д., но когда контекст слишком длинный, такое наименование становится плохо читаемым. Вместо того, чтобы заставлять читателя запоминать логический контекст, мы пытаемся сделать так, чтобы читатель быстро понял значение переменной, даже если он не знает всех тонкостей дела.
const teacherList = ['Teacher.Cang', 'Teacher.Bo', 'Teacher.XiaoZe']
// bad 别人看到循环的末尾处的item时需要在去上面看上下文理解item的含义
teacherList.forEach(item => {
// do something
// do something
// do …………
doSomethingWith(item);
})
// good 别人看到最后一眼就能明白变量的意思是老师
teacherList.forEach(teacher => {
// do something
// do something
// do …………
doSomethingWith(teacher);
})
5. Избегайте избыточных имен
В некоторых случаях при именовании переменных, например при именовании атрибута объекта, можно напрямую назвать значение атрибута, поскольку сам атрибут находится в объекте, и нет необходимости добавлять дополнительный префикс.
// bad
const teacher = {
teacherName: 'Teacher.Cang',
teacherAge: 37,
teacherSex: 'female',
};
console.log(person.personName)
// good
const teacher = {
name: 'Teacher.Cang',
age: 37,
sex: 'female',
};
console.log(teacher.name)
6. Используйте параметры по умолчанию
По сравнению с коротким замыканием использование значений параметров ES6 по умолчанию упрощает понимание значения параметров по умолчанию, когда никакие параметры не передаются.
// bad 需要多看一步才能理解是赋默认值
function getTeacherInfo(teacherName) {
teacherName = teacherName || 'Teacher.Cang';
// do...
}
// good 一看就能看出是赋默认值
function getTeacherInfo(teacherName = 'Teacher.Cang') {
// do...
}
7. Именование функции обратного вызова
Многие люди называют функции обратного вызова, особенно при настройке функций обратного вызова мониторинга событий для страниц или элементов DOM, они привыкли называть их условиями срабатывания события, что на самом деле менее читабельно.Это функция, но нужно время, чтобы понять, что эта функция делает.
Мы называем функцию обратного вызова, и она должна быть названа в соответствии с логикой, которую функция будет выполнять, чтобы другие могли четко понять логику, которую будет выполнять функция обратного вызова.
// bad 需要花时间去看代码理解这个回调函数是做什么的
<input type="button" value="提交" onClick="handleClick" />
function handleClick() {
// do...
}
// good 一眼就能理解这个回调函数是提交表单
<input type="button" value="提交" onClick="handleSubmitForm" />;
function handleSubmitForm() {
// do...
}
8. Уменьшить количество параметров функции
Если у функции слишком много параметров, трудно запомнить значение каждого параметра при ее использовании, а несколько параметров функции ограничены по порядку, нам нужно помнить значение параметров в каждом порядке при вызове. В нормальных условиях количество параметров функции предпочтительно равно 1-2 и старайтесь не превышать трех.
Когда в функции много параметров, мы можем объединить параметры одного класса с помощью объекта, а затем передать объединенный объект в качестве параметра, чтобы мы могли четко понимать значение каждого параметра при вызове функции.
// bad 调用时传的参数难以理解含义，需要记住顺序
function createTeacher(name, sex, age, height, weight) {
// do...
}
createTeacher('Teacher.Cang', 'female', 37, 155, 45);
// good 调用时虽然写法略复杂了点，但各个参数含义一目了然，无需刻意记住顺序
function createTeacher({name, sex, age, height, weight}) {
// do...
}
createTeacher({
name: 'Teacher.Cang',
sex: 'female',
age: 37,
height: 155,
weight: 45
})
9. Разделение функций
Если код функции слишком длинный, читабельность также относительно плохая.Мы должны попытаться сохранить функцию, имеющую дело только с одной функцией, и соответствующим образом разделить функцию, когда логика сложна.
// bad
function 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;
}
// good
function 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();
}
10. Сосредоточьтесь на написании заметок
Не писать комментарии должно быть дурной привычкой многих разработчиков, и смотреть чужой код без комментариев тоже самое раздражающее для многих разработчиков.
Итак, будь то для себя или кого-то еще, пожалуйста, обратите внимание на написание комментариев.
// bad 不写注释要花大量时间理解这个函数的作用
function formatNumber(num) {
if (num < 1000) {
return num;
} else {
return `${(num / 1000).toFixed(1)}k`
}
}
// good 有了注释函数的作用和用法一目了然
/**
* @param num
* @return num | x.xk
* @example formatNumber(1000);
* @description
* 小于1k不转换
* 大于1k转换为x.xk
*/
function formatNumber(num) {
if (num < 1000) {
return num;
} else {
return `${(num / 1000).toFixed(1)}k`
}
}
На самом деле существует множество стилей кода для улучшения читаемости кода.Вышеупомянутый автор суммирует 10 часто используемых методов для улучшения читаемости кода с трех аспектов: имена переменных, функции и комментарии.Я надеюсь, что это будет полезно для всех. Если есть дополнения, комментарии приветствуются.