Писать код интересно, и мы получаем от этого огромное удовольствие. Пока, откуда ни возьмись, появляется ошибка, на избавление от которой уходит довольно много времени. Иногда ошибка не видна и код работает как задумано, но дефект может проявиться в продакшене. Это могут быть ошибки, связанные с производительностью и доступностью, способные привести к плохому пользовательскому опыту. Количество таких ошибок можно уменьшить путем рефакторинга кода.
Рефакторинг кода подразумевает внесение улучшений в существующий код без изменения его внешней функциональности. Это одна из основных частей программирования, которую нельзя упускать из виду. Рефакторинг кода может улучшить читаемость, сопровождаемость и масштабируемость кода. Он также призван повысить производительность и увеличить продуктивность разработчика.
В этой статье мы рассмотрим несколько приемов рефакторинга кода. Итак, давайте приступим.
Как интегрировать рефакторинг
Прежде чем искать методы улучшения рефакторинга, давайте посмотрим, как вы можете интегрировать рефакторинг кода в свой процесс разработки. Рекомендации:
- Выделяйте время специально для рефакторинга кода
- Разбейте большую задачу рефакторинга на более мелкие для лучшей управляемости
- Постарайтесь вовлечь в процесс рефакторинга всю команду
- Используйте автоматизированные инструменты, которые могут помочь вам в поиске распространенных ошибок рефакторинга
А теперь давайте рассмотрим техники, которые следует использовать для рефакторинга.
Метод извлечения
Этот метод предполагает преобразование блоков кода в отдельный метод/функцию. Это делается для улучшения структуры и читабельности кода. Мы извлекаем длинные и сложные блоки кода в более мелкие и управляемые методы.
Чтобы использовать эту технику, сначала нужно найти блок кода, выполняющий определенные задачи, которые являются немного сложными. Обнаружив такой блок, мы извлекаем код и помещаем его в новый метод. Также не забудьте дать методу осмысленное имя. Теперь можно вызывать этот код там, где он нужен.
До рефакторинга
function calculateInvoiceTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
const item = items[i];
if (!item.quantity || !item.price) {
console.error('Invalid item', item);
continue;
}
const itemTotal = item.quantity * item.price;
total += itemTotal;
}
return total;
}
После рефакторинга
function calculateInvoiceTotal(items) {
let total = 0;
for (let i = 0; i < items.length; i++) {
const item = items[i];
const itemTotal = calculateItemTotal(item);
total += itemTotal;
}
return total;
}
function calculateItemTotal(item) {
if (!item.quantity || !item.price) {
console.error('Invalid item', item);
return 0;
}
return item.quantity * item.price;
}
Как видите, мы преобразовали сложный код, выполняющийся внутри цикла for, в другой метод для простоты и читабельности.
Замена магических чисел символическими константами
Цель такого рефакторинга — получение более чистого и читабельного кода. Магические числа — это просто жестко прописанные числовые значения. Использование магических чисел может сбивать с толку других разработчиков, потому что назначение этих чисел не очевидно.
Преобразование жестко прописанных значений в переменную с осмысленным именем определенно поможет другим понять ее. Кроме того, вы можете дать дополнительные объяснения в комментарии. Это также может помочь в отладке и снизить риск возникновения ошибки в будущем.
До рефакторинга
if (temperature > 32) {
// Do something if temperature is above freezing
}
После рефакторинга
const int FREEZING_POINT = 32;
if (temperature > FREEZING_POINT) {
// Do something if temperature is above freezing
}
Слияние дублированного кода
Дублирование кода может появиться по-разному. Блоки кода, о которых идет речь, не обязательно полностью идентичны. Они могут выполнять схожие задачи или немного расширять друг друга. Дублирование кода может привести к нескольким проблемам, включая увеличение затрат на обслуживание, трудности при внесении изменений в кодовую базу и повышенный риск внедрения ошибок.
Проводя рефакторинг, необходимо обращать внимание на дублирующийся код. При обнаружении такого кода одним из методов решения проблемы является преобразование его в одну многократно используемую функцию/метод.
До рефакторинга
function calculateTotal(numbers) {
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
return total;
}
function calculateAverage(numbers) {
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
const average = total / numbers.length;
return average;
}
После рефакторинга
function calculateSum(numbers) {
let total = 0;
for (let i = 0; i < numbers.length; i++) {
total += numbers[i];
}
return total;
}
function calculateTotal(numbers) {
return calculateSum(numbers);
}
function calculateAverage(numbers) {
const total = calculateSum(numbers);
const average = total / numbers.length;
return average;
}
В этом примере кода мы выполняли суммирование и повторяли его для нахождения среднего значения. В ходе рефакторинга мы заменили это функцией, которая дает сумму для обоих значений.
Упрощение методов
Упрощение методов может улучшить логику и сделать методы/функции более читабельными и чистыми. Эта техника может помочь вам в сокращении количества строк кода.
Суть метода в том, что вы как бы разбиваете функцию на отдельные более мелкие блоки кода для их оптимизации.
- Удалите ненужные переменные и выражения. Бывает, что некоторые переменные или выражения остаются для отладки, но вы забываете их удалить, например console.log в JavaScript. Удалите их.
- Используйте встроенные функции. Иногда лучше использовать встроенную функцию библиотеки или языка. С их помощью зачастую можно сократить код.
- Упростите условные операторы. Если метод содержит сложные условные операторы, подумайте о том, чтобы упростить их, объединив условия или используя тернарный оператор.
- Используйте ленивую загрузку. Это техника, при которой объекты загружаются только тогда, когда они необходимы. Это может повысить производительность вашего приложения за счет уменьшения объема используемой памяти. В результате приложение будет загружаться быстрее. Ленивая загрузка довольно популярна в веб-разработке. Особенно в таких JavaScript-фреймворках, как React, где вы можете импортировать различные компоненты посредством ленивой загрузки.
До рефакторинга
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return (
<div>
<h1>My App</h1>
<MyComponent />
</div>
);
}
export default App;
После рефакторинга
import React, { lazy, Suspense } from 'react';
const MyComponent = lazy(() => import('./MyComponent'));
const App = () => {
return (
<div>
<h1>My App</h1>
<Suspense fallback={<div>Loading...</div>}>
<MyComponent />
</Suspense>
</div>
);
}
export default App;
В измененной версии мы используем функцию lazy для асинхронного импорта компонента MyComponent. Это означает, что компонент загружается только тогда, когда он действительно необходим, что повышает общую производительность нашего приложения. Мы также используем компонент Suspense для отображения резервного (fallback) UI во время загрузки компонента.
От редакции Techrocks: рекомендуем также почитать статью «Оптимизация изображений в HTML».
Заключение
Рефакторинг — это необходимая практика для любого разработчика, который хочет улучшить качество, производительность и сопровождаемость своего кода. Уделяя время анализу и оптимизации кода, вы можете устранить избыточность, уменьшить сложность и создать более эффективное и масштабируемое приложение.
Постоянно пересматривая и улучшая свой код, вы можете создать более надежное и устойчивое приложение. Надеюсь, эта статья помогла вам понять некоторые техники рефакторинга. Спасибо за внимание!
Перевод статьи «5 Code Refactoring Techniques to Improve Your Code».
[customscript]techrocks_custom_after_post_html[/customscript]
[customscript]techrocks_custom_script[/customscript]
