Так что вы находитесь в том, если черт возьми, ада – вот как выйти из этого

Автор оригинала: Adeel Imran.

О чем эта тема?

Если вы из JavaScript Фон, который вы могли бы услышать условия обратный ад или Async/жду ад . Это выглядит что-то подобное:

Есть подобная ситуация с просто используем Если/else также. Вы можете пометить это, как разработчики, которые являются одержимыми или игнорируют его, думая, что это вроде вроде в некоторых ситуациях.

Позволю себе не согласиться. Как говорится … просто притворяйся, что тот, кто поддерживает ваш код, следующий, знает, где вы работаете и можете прийти на вас.

С целью этой статьи я продемонстрирую пример с использованием REVENTJS. Сам принцип может применяться в JavaScript или любой язык для этого вопроса.

Прежде чем начать , /> Пример не может быть лучшим примером для объяснения вложенной проблемы IF/else. Но, надеюсь, это даст вам хорошее руководство относительно того, что проблема и как ее избежать.

Давайте нарисовать картину. Вам дают кнопку для реализации в Реагировать & Кнопка имеет 2 варианта для темы, либо по умолчанию или Первичный Отказ Вы думаете, что это просто, и вы пишете свой /> Компонент:

const MyButton = ({ theme, content }) => {
  let className = '';                
  if (theme === 'default') {
    className = 'default-btn';
  } else if (theme === 'primary') {
    className = 'primary-btn';
  }
                   
  return (
    {content}
  );
}

Некоторые временные пропуски и другой разработчик дают задачу для добавления функциональных возможностей для круглых углов для кнопки для обоих тем, по умолчанию и первичному. Разработчик, который поднимает задачи, очень большой на использовании тройных операторов. Они в конечном итоге делают что-то вроде ниже:

const MyButton = ({ theme, rounded, content }) => {
  let className = '';                
  if (theme === 'default') {
    className = rounded ? 'default-btn rounded' : 'default-btn';
  } else if (theme === 'primary') {
    className = rounded ? 'primary-btn rounded' : 'primary-btn';
  }
                   
  return (
    {content}
  );
}

Time Passes & другой разработчик дан задачей, чтобы добавить Hover Состояние как для по умолчанию & Первичный Кнопки. Теперь другой разработчик не хочет вносить изменения в уже реализованный код, опасаясь, что они могут в конечном итоге что-то сломать.

Таким образом, они пишут отдельное, если заявление:

const MyButton = ({ theme, rounded, hover, content }) => {
  let className = '';                
  if (theme === 'default') {
    className = rounded ? 'default-btn rounded' : 'default-btn';
  } else if (theme === 'primary') {
    className = rounded ? 'primary-btn rounded' : 'primary-btn';
  }
  
  if (hover) {
    className = className + ' hover';
  }
                   
  return (
    {content}
  );
}

Все идет нормально …

Это где это становится интересным

Переезд, окончательное требование приходит через несколько месяцев, чтобы добавить анимацию, когда пользователь охватывает над кнопкой, которая имеет Первичный Тема и это округлые тип.

Теперь, основываясь на этом требовании, вся структура API меняет N/> Компонент. Разработчик, работающий над кодом, заканчивается логикой, как это:

const MyButton = ({ theme, rounded, hover, animation, content }) => {
  let className = '';                
  if (theme === 'default') {
    className = rounded ? 'default-btn rounded' : 'default-btn';
    if (hover) {
      className = className + ' hover';
    }
  } else if (theme === 'primary') {
    if (rounded) {
      if (hover) {
        if (animation) {
           className = 'primary-btn rounded hover my-custom-animation';
        } else {
          className = 'primary-btn rounded hover';
        }
      } else {
        className = 'primary-btn rounded';
      }
    } else {
      if (hover) {
        className = 'primary-btn hover';
      } else {
        className = 'primary-btn';
      }
    }
  }

  return (
    {content}
  );
}

Это слишком быстро вышло из руки … Разве это не было?

Чтобы сделать этот код проще, нам нужно понять все возможные состояния, что имеет этот код. Я сделал диаграмму возможностей всех возможных комбинаций в определенное время для кнопки.

Если это кажется немного сложным, вы можете попробовать смотреть на этот следующий график для вашего понимания.

Ключевая вещь при написании кода является понимание потока данных вашего кода. Как только у вас будет полное понимание этого, все становится проще.

Решение

На основании вышеуказанных критериев я могу написать мой код, чтобы упростить его.

const MyButton = ({ theme, rounded, hover, animation, content }) => {
  const isThemeDefault = theme === 'default'
  const isThemePrimary = theme === 'primary';
  const isRounded = rounded === true;
  const isHover = hover === true;
  const isAnimated = animation === true;
  
  const isPrimaryAnimated = isThemePrimary && isAnimated;
  
  let className = isThemePrimary ? 'primary-btn' : 'default-btn';

  if (isRounded) {
    className = `${className} rounded`;
  }
  if (isHover) {
    className = `${className} hover`;
  }
  if (isPrimaryAnimated) {
    className = `${className} animated`;
  }
 
  return (
    {content}
  );
}

Этот код сейчас более читабелен. Любой разработчик, который работает в этом коде, может легко расширить свою функциональность и продолжать свою жизнь, зная, что они сделали замечательную работу с кодом.

Вы можете попробовать играть с кодом, если вы хотите, чтобы увидеть, соответствует ли он всеми случаями использования.

С автоматами (конечными состояниями) – подобный подход кодирования:

• Код сейчас более читаемый
• Код более ремонсимы

Не стесняйтесь поделиться своими мыслями. Спасибо за чтение.

Вы также можете добраться до меня в Twitter @adeelible.

Оригинал: “https://www.freecodecamp.org/news/so-youre-in-if-else-hell-here-s-how-to-get-out-of-it-fc6407fec0e/”