Когда вы только начинаете свой путь программирования, создание веб-страницы/приложения кажется недосягаемым. Когда вы, наконец, почувствуете, что готовы создать свое первое приложение, ваш главный приоритет — просто заставить эту чертову штуку работать. Вы размещаете функции там, где они кажутся подходящими, и ваши соглашения об именах, вероятно, не так описательны. Но в конце концов… это работает!
После того, как вы закончите свой победный круг, важно сделать привычкой снова пройти этот круг, но на этот раз внимательно все осмотрев. Как выглядит ваш код? Как долго ваши функции? Есть ли повторяющийся код? Это хорошие вопросы, которые стоит задать, чтобы начать процесс рефакторинга.
Рефакторинг
Рефакторинг — это процесс разборки и повторной сборки кода с целью сделать его более читабельным и функциональным. Вот некоторые вопросы, которые следует задать при принятии решения о необходимости рефакторинга функции:
1. Длина этой функции превышает 5 строк?
2. Делает ли эта функция несколько вещей?
3. Название этой функции плохо описывает ее назначение? Еще один способ задать этот вопрос: если бы кто-то еще просматривал мой код, были бы у него проблемы с пониманием того, что должна делать функция, основываясь только на имени?
4. Есть ли в моем коде что-то, что я сделал дважды?
Если ответ на любой из этих вопросов «да», пришло время реорганизовать ваш код!
Функции длиной более 5 строк и выполнение более одной задачи
Если ваша функция состоит более чем из 5–7 строк, найдите способы разбить ее на несколько функций.
Вышеприведенная функция является типичным примером того, что она слишком длинная. В рефакторинге это может выглядеть так:
Теперь, когда есть две разные функции, код стал намного читабельнее. В рамках
showTotalExpenses
функция, там есть все, что появилось после 200 строки исходной функции. Вызывая его в конце
sumExpenses(user)
Javascript запустит этот код сразу после строки 200, а это означает, что ничего не изменилось при разделении этих двух строк. Просто выглядит и читается намного лучше!
Если вы внимательно посмотрите на исходный код, вы также увидите, что первая половина функции работает над суммированием всех расходов, а вторая половина работает над добавлением результата на страницу. Поскольку выполняются две разные цели, лучше их разбить (даже если функция была длиной менее 5 строк).
Правильно ли названа ваша функция?
Выше мы видим функцию с именем
clearExpenses
Однако, если мы действительно посмотрим на это, мы увидим, что функция на самом деле ничего не очищает. Что он действительно делает, так это предоставляет опцию «Очистить расходы» для пользователей на внешнем интерфейсе. Поэтому было бы лучше, если бы наша функция выглядела так:
При этом мы назвали нашу функцию
clearExpensesOption
затем вызвал функцию с именем
clearExpensesEvent
в конце, который будет касаться фактического возмещения расходов.
Есть ли в файле что-то, что я сделал дважды?
Если ответ на этот вопрос «да», рассмотрите возможность создания функции/переменной и ее вызова всякий раз, когда это необходимо, вместо того, чтобы писать один и тот же код/строку несколько раз.
Заключительные мысли
Делая все это, вы помогаете не только людям, которые будут искать/работать с вашим кодом, но и себе в будущем. Теперь вы будете знать, что повлечет за собой каждый фрагмент кода, еще до того, как просмотрите его, потому что ваши функции лучше разбиты и названы.
