Изхвърлете това мислене „Ако не е счупено, не го поправяйте“!

Първото нещо, което вероятно си мислите, ако никога не сте чували за рефакторинг и чист код, е:

Това означава ли, че кодът ми е мръсен или небрежен?

Може би. Запитайте се: Ще мога ли да разбера кода си след 6 месеца до няколко години?

Какво е рефакторинг?

Нека да разгледаме определението за рефакторинг. Рефакторингът на кода е систематичен процес стъпка по стъпка за подобряване на качеството на вашия код, увеличаване на четливостта и следователно увеличаване на предвидимостта и улесняване на използването от вас и другите разработчици.

Мръсният код би бил код, който не следва съгласуваните насоки, конвенции и ръководства за стил, не следва принципа „Не се повтаряй“ и е неефективен. Отнема ли повече време писането на чист код? Зависи. Можете да пишете чист код от самото начало. Писането на чист код трябва да бъде интуитивно.

Някои хора обичат да преработват, докато вървят. Това е грешка. Тъй като рефакторингът отнема известно време, най-добре е просто да го направите и да рефакторинг за ефективност по-късно. Освен това се уверете, че поддържате същата функционалност, докато вървите.

Преди да започнем преработването с примери на код на живо, позволете ми да обясня кога е добре да преработвате кода. Блогът на адрес https://refactoring.guru/ обяснява, че е добър момент за рефакторинг при добавяне на нова функция, при коригиране на грешка и по време на преглед на кода. Те пишат, че „когато правите нещо за първи път, просто го направете“, което повтаря това, което казах по-рано. Ако вашият код не работи или работи, но не прави това, което е възнамерявал да направи, няма смисъл да се преработва. Друга причина да не преработвате е, когато кодът трябва да бъде бракуван и пренаписан от самото начало. Много хора избират да не преработват, когато мигрират от един език за кодиране към друг. Друг добър съвет е да не смесвате рефакторинг и директно разработване на нови функции

Всичко готово и готово да започнете? Ето някои стъпки, които трябва да предприемете, когато преработвате кода.

  1. Разбийте кода на малки части преди рефакторинг, за да минимизирате грешките.
  2. Уверете се, че кодът е четлив.
  3. Добавяне на тестови случаи. Всички съществуващи тестове трябва да преминат след рефакторинг.
  4. Подобрете имената на променливите.
  5. Премахнете дублирания код чрез създаване на класове и функции. Следвайте принципа на единичната отговорност, където единична част от код, клас или функция трябва да има само една цел.
  6. Разбийте дългите методи на по-малки и избягвайте ада с обратно извикване.

Ето пример за това как да преработите в React.

Извлечете тези седем вложени div в техните собствени компоненти. Всеки компонент трябва да има свой собствен CSS стилов лист.

return (
      <div>
        <div>Title: {main}</div>
        <div>Desc: {description}</div>
        <div>Icon: {icon}</div>
        <div>Temp: {temp}</div>
        <div>Pressure: {pressure}</div>
        <div>Humidity: {humidity}</div>
        <div>Temp Min: {temp_min} Temp Max:{temp_max}</div>
      </div>
    )

Извличайте дори съобщенията за грешки в техните собствени компоненти.

if (weatherData.cod === '404' || weatherData.cod === '400') {
      return <ErrorMessage message={weatherData.message} />;
    }

Реквизити за разрушаване.

Да предположим, че имате тези данни във вашите реквизити.

props = {
    cars: {
        "stock_number": "I058Q00",   
        "car_year": 2005,
        "car_make": "Dodge",   
        "car_model": "Stratus",   
        "exterior_color": "Teal",   
        "city": "Bridgeport",   
        "state": "Connecticut",   
        "mileage": 2649,   
        "price": "$29213.73" 
        }
    }

...и трябваше да направите компонент Cars и да добавите малко JSX.

Ето как ще изглежда:

const Cars = props => {
  return (
    <div>
      <Link
        car_make={props.cars.car_make}
        to={`/cars/${props.cars.url_name}`}
        key={props.cars.stock_number}
      >
        <img 
          alt={props.cars.name} 
          src={props.cars.image_url} 
        />
      </Link>
      <Reviews rating={props.cars.rating} />
    </div>
  );
};

Е, можете да разрушите тези подпори така. Добавете изявление за деструктуриране, преди да използвате връщането.

const = { car_make, url_name, stock_number, name, image_url, rating } = props;

В React можете да TypeCheck директно в React, като напишете код в края на вашата функция преди оператора за експортиране. Това е, за да можете да хванете грешки, занимаващи се с типа. За да направите това, добавете библиотеката с prop-types с вашия мениджър на пакети.

import React from 'react';
import PropTypes from 'prop-types';
import './Category-Button.css';

const CategoryButton = ({ isSelected, label, onClick }) => (
  <button
    type="button"
    onClick={() => onClick(label)}
    className={`category-button ${isSelected ? 'selected' : ''}`}
  >
    { label }
  </button>
);

CategoryButton.propTypes = {
  onClick: PropTypes.func.isRequired,
  label: PropTypes.string.isRequired,
  isSelected: PropTypes.bool.isRequired,
};

Прочетете повече за проверка на типа с React тук.

В случай, че не сте намерили защо трябва да преработите. Мислете за тези неща като за свои цели.

  1. Рефакторингът на кода подобрява качеството.
  2. Рефакторингът на кода подобрява скоростта.
  3. Кодът за рефакторинг премахва техническия дълг.

„Технически дълг“ е концепция, която отразява подразбиращите се разходи за допълнителна преработка чрез избор на лесно (ограничено) решение вместо по-добро, по-чисто кодово решение. Това може да се дължи на лоши софтуерни практики и липса на рефакторинг на кода. Подобно на обикновения дълг, техническият дълг може да се натрупа и когато това се случи, може да бъде напрежение, което да срине целия екип за производство на софтуер. Както казва Дан Радиган, „Предотвратяването на технически дълг е това, което позволява развитието да бъде гъвкаво в дългосрочен план“. Дан Радиган, старши гъвкав евангелист, Атласиан

Чия работа е да преработва?

В екип за производство на софтуер? Вие! По собствен проект? Вие! Рефакторингът на код трябва да бъде неразделна част от вашия процес на разработка на софтуер. Поддържа кода лесен за работа. Рефакторингът е много по-труден при наследена кодова база за голяма корпорация, където много хора работят върху един и същ код. Въпреки това, когато кодовата база е неорганизирана и изградена върху слаба основа, с кода е много по-трудно да се работи.

Ако искате да научите повече за рефакторинга, ето няколко книги, които можете да прочетете.

„„Управление на софтуерния дълг: Изграждане на неизбежна промяна““ от Крис Стърлинг

„„Рефакторинг: Подобряване на дизайна на съществуващ код““ от Мартин Фаулър и Кент Бек