50 lines
3.8 KiB
Markdown
50 lines
3.8 KiB
Markdown
#рефакторинг #методы_рефакторинга
|
||
|
||
![[Pasted image 20250131085454.png]]
|
||
|
||
### **Проблема**
|
||
Один и тот же код выполняется каждый раз, когда вы вызываете определенную функцию
|
||
```javascript
|
||
result.push(`<p>title: ${person.photo.title}</p>`);
|
||
result.concat(photoData(person.photo));
|
||
|
||
function photoData(aPhoto) {
|
||
return [
|
||
`<p>location: ${aPhoto.location}</p>`,
|
||
`<p>date: ${aPhoto.date.toDateString()}</p>`,
|
||
];
|
||
}
|
||
```
|
||
|
||
### **Решение**
|
||
Перенести инструкции в функцию, тогда понять эти инструкции легче как часть вызываемой функции
|
||
```javascript
|
||
result.concat(photoData(person.photo));
|
||
|
||
function photoData(aPhoto) {
|
||
return [
|
||
`<p>title: ${aPhoto.title}</p>`,
|
||
`<p>location: ${aPhoto.location}</p>`,
|
||
`<p>date: ${aPhoto.date.toDateString()}</p>`,
|
||
];
|
||
}
|
||
```
|
||
|
||
### **Причины рефакторинга**
|
||
|
||
Если один и тот же код выполняется каждый раз, когда вы вызываете определенную функцию, стоит подумать о переносе этого повторяющегося кода в саму функцию. Таким образом, любые будущие изменения повторяющегося кода могут выполняться в одном месте и использоваться во всех вызовах.
|
||
|
||
|
||
### **Порядок рефакторинга**
|
||
1. Если повторяющийся код не соседствует с вызовом целевой функции, используйте рефакторинг [[Перемещение инструкций (Slide Statements)]], чтобы поместить его рядом с функцией.
|
||
2. Если целевая функция вызывается только в одном месте, просто удалите код из его исходного местоположения, вставьте в целевую функцию, выполните тестирование и проигнорируйте остальную часть этой техники.
|
||
3. Если у вас есть несколько мест вызова, примените рефакторинг [[Извлечение функции (Extract Function)]] к одному из них, чтобы извлечь как вызов целевой функции, так и инструкции, которые вы хотите переместить в нее. Дайте ей временное имя, которое будет легко найти.
|
||
4. Преобразуйте все остальные вызовы таким образом, чтобы в них использовалась новая функция. Выполняйте тестирование после каждого преобразования.
|
||
5. Когда все исходные вызовы будут использовать новую функцию, примените рефакторинг [[Встраивание функции (Inline Function)]], чтобы полностью встроить исходную функцию в новую, удалив при этом исходную функцию.
|
||
6. Выполните рефакторинг [[Переименование переменной (Rename Variable)]], чтобы изменить имя новой функции, дав ей имя исходной функции.
|
||
|
||
### **Обратный рефакторинг**
|
||
- [[Перенос инструкций в точку вызова (Move Statements to Callers)]]
|
||
|
||
### **Ссылки**
|
||
- [[Мартин Фаулер - Рефакторинг кода на JavaScript]] |