#рефакторинг #методы_рефакторинга 

![[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]]