Рефакторинг важен для каждого разработчика, особенно для тех продвинутых программистов, которым нужно развиваться. Согласно теории двадцати восьми, 20% методов рефакторинга могут решить 80% проблемного кода. Недавно автор обратился к другим руководствам по кодированию js и перечитал две классические книги: «Путь к чистоте кода» и «Рефакторинг: улучшение дизайна существующего кода» (настоятельно рекомендуется читать ее время от времени, каждый раз). время есть новый опыт), разберите следующие пункты, чтобы помочь вам реорганизовать большую часть плохого кода с минимальным объемом памяти. Если вы хотите полностью понять метод реконструкции, вы можете увидеть авторскую отделкуРуководство по стилю AI Javascript
Плохая оценка кода
Плохой код имеет разные стандарты для всех и каждого проекта, но следующие моменты, скорее всего, являются плохим кодом и нуждаются в рефакторинге с использованием методов рефакторинга.
- повторяющийся код
- слишком долгая функция
- Негабаритные классы
- Чрезмерный список параметров
Метод рефакторинга
1. Хорошее нейминг
Правильное именование проходит через весь процесс кодирования программного обеспечения, включая разумное использование определений заглавных букв, отступов и т. д. В настоящее время интерфейсные проекты предоставляют множество инструментов для анализа или форматирования, которые могут легко помочь в обнаружении и автоматизации проекта.Студенты, которые не понимают, могут взглянуть на автора.Интерфейсный набор инструментов ИИ. Будь то имя переменной, имя функции или имя класса, хорошее нейминг ускорит эффективность вашей собственной разработки и эффективность чтения кода, ведь количество раз, когда программа будет прочитана, будет намного больше, чем сколько раз оно написано. Прочтите превосходный исходный код на github, чтобы узнать, иногда просто посмотрите на имя функции, чтобы узнать намерение автора.
// bad
var yyyymmdstr = moment().format('YYYY/MM/DD');
// good
var yearMonthDay = moment().format('YYYY/MM/DD');
// bad
function dateAdd(date, month) {
// ...
}
let date = new Date();
dateAdd(date, 1) // 很难理解dateAdd(date, 1)是什么意思。笔者注：这里单拎出来举例很简单易懂，但希望在做工程时也时刻谨记这条
// good
function dateAddMonth(date, month) {
// ...
}
let date = new Date();
dateAddMonth(date, 1);
2. Функция единоличной ответственности
Один из важнейших принципов разработки программного обеспечения. Этой проблеме подвержены только что выпустившиеся разработчики, которым кажется, что бизнес-логика очень сложная, и нет возможности разделить их на отдельные функции и написать длинные бизнес-функции. Однако, по опыту автора в сопровождении моих друзей, большинство из них связано со слишком большим количеством временных переменных, что не позволяет увидеть суть бизнес-логики, ведь в процессе реконструкции обязанности декомпозируются шаг за шагом. шаг, разбить на небольшие функции и назвать имена функций соответствующими именами, что может быть очень полезно.Быстро понять суть дела, и, возможно, вы сможете найти скрытые ошибки.
// bad
function handle(arr) {
//数组去重
let _arr=[],_arrIds=[];
for(let i=0;i<arr.length;i++){
if(_arrIds.indexOf(arr[i].id)===-1){
_arrIds.push(arr[i].id);
_arr.push(arr[i]);
}
}
//遍历替换
_arr.map(item=>{
for(let key in item){
if(item[key]===''){
item[key]='--';
}
}
});
return _arr;
}
// good
function handle(arr) {
let filterArr = filterRepeatById(arr)
return replaceEachItem(filterArr)
}
3. Сделайте выражение более понятным, введя объясняющие переменные или функции.
// bad
if (platform.toUpperCase().indexOf('MAC') > -1 && browser.toUpperCase().indexOf('IE') > -1 && wasInitialized() && resize > 0) {
// do something
}
// good
let isMacOs = platform.toUpperCase().indexOf('MAC') > -1
let isIEBrowser = browser.toUpperCase().indexOf('IE') > -1
let isResize = resize > 0
if (isMacOs && isIEBrowser && wasInitialized() && isResize) {
// do something
}
// bad
const cityStateRegex = /^(.+)[,\\s]+(.+?)\s*(\d{5})?$/;
saveCityState(ADDRESS.match(cityStateRegex)[1], ADDRESS.match(cityStateRegex)[2]);
// good
var cityStateRegex = /^(.+)[,\\s]+(.+?)\s*(\d{5})?$/;
var match = ADDRESS.match(cityStateRegex)
let [, city, state] = match
saveCityState(city, state);
// bad
if (date.before(SUMMER_START) || date.after(SUMMER_END)) {
charge = quantity * _winterRate + _winterServiceCharge
} else {
charge = quantity * _summerRate
}
// good
if (notSummer(date)) {
charge = winterCharge(quantity)
} else {
charge = summerCharge(quantity)
}
4. Меньше вложенности, возврат раньше
// bad
let getPayAmount = () => {
let result
if (_isDead) result = deadAmount()
else {
if (_isSeparated) result = separatedAmount()
else {
if (_isRetired) result = retiredAmount()
else result = normalPayAmount()
}
}
return result
}
// good
let payAmount = () => {
if (_isDead) return deadAmount()
if (_isSeparated) return separatedAmount()
if (_isRetired) return retiredAmount()
return normalPayAmount()
}
5. Замените условные выражения на HashMap
// bad
let getSpeed = type => {
switch (type) {
case SPEED_TYPE.AIR:
return getAirSpeed()
case SPEED_TYPE.WATER:
return getWaterSpeed()
...
}
}
// good
let speedMap = {
[SPEED_TYPE.AIR]: getAirSpeed,
[SPEED_TYPE.WATER]: getWaterSpeed
}
let getSpeed = type => speedMap[type] && speedMap[type]()
разное
Применение методов рефакторинга, перечисленных выше, позволит решить большую часть плохого кода в вашем проекте, но существует множество других методов рефакторинга, которые могут сделать ваш код чистым и легким для чтения.
- Четкая структура каталогов проекта
- синтаксический сахар ES6+
- arrow function
- rest
- параметры функции по умолчанию
- async/await
- let/const вместо var
- Array Methods
- Обычно все используют const, а все буквы в верхнем регистре.
- Используйте соответствующие имена функций или переменных вместо комментариев
- Уметь использовать && и || в js
- Избегайте суждений по «отрицательному делу»
- Старайтесь не писать глобальные функции и переменные
- Используя функциональное программирование, ES6 Array очень хорошо поддерживает
- удалить повторяющийся код
- Удалить закомментированный код