Wise.js | Frontend tips

☑️ АРГУМЕНТЫ ФЛАГИ

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

Рассмотрим пример кода (очень близко к тому, который я встретил в реальном проекте), который делает запрос за данными, получает список пользователей, и выводит их на страницу:

const users = await userService.fetch();

userComponent.render(users);

Этот код используется во многих частях проекта, чтобы его не дублировать, мы вынесем его в отдельную функцию. Обычная практика DRY.

const UserFacade = {
  update: async () => {
    const users = await userService.fetch();

    userComponent.render(users);
  }
}

Все хорошо, но клиент требует показывать лоадер при обновлении пользователей (т. е. при вызове данной функции). Но лоадер нужно показывать не всегда, а только при вызове из определенных мест в коде. Простым решением может показаться добавление флага (или даже нескольких):

const UserFacade = {
  update: async (showLoader = false) => {
    if (showLoader) { // показываем лоадер если нужно
      userComponent.renderLoader(true);
    }

    const users = await userService.fetch();

    userComponent.render(users);
    userComponent.renderLoader(false); // скрываем лоадер в любом случае
  }
}

UserFacade.update и userComponent.renderLoader теперь принимают флаги true и false.
В зависимости от переданного аргумента выполняется конкретная логика: либо мы отображаем список пользователей без лоадера либо с ним.
Получившийся код оказывается очень сложным для чтения, для понимания и нарушает множество принципов проектирования. Чтобы понять, что делают эти методы нам нужно заглядывать в названия параметров функции. Потому что вызов UserFacade.update(true) и UserFacade.update(false) не дают абсолютно никакого понимания о том, что происходит внутри.

Мне встречались подобные методы принимающие 4(!) аргумента, 3 из которых были флагами. Выглядело это примерно так:

SomeFacace.updateSomeData(uuid, true, false, true)

Мало того, что аргументов слишком много, так еще и совершенно не понятно что они делают.
Этот метод использовался во многих местах, а время на рефакторинг не было, я переписал его так, чтобы он принимал объект.

SomeFacace.updateSomeData(uuid, {
  showLoader: true,
  updateCases: false,
  scrollToCase: true
});

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

Улучшить код в примере с UserFacade можно следующим образом. Переписать UserFacade и userComponent так, чтобы они не принимали флаги.

const UserFacade = {
  updateWithLoader async () => {
    userComponent.showLoader();
    await this.update();
    userComponent.hideLoader();
  },
  update: async () => {
    const users = await userService.fetch();

    userComponent.render(users);
  }
}

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

И в подтверждение моих слов цитата из книги Роберта Мартина «Чистый код»:
«Аргументы-флаги уродливы. Передача логического значения функции — воистину ужасная привычка. Она немедленно усложняет сигнатуру метода, громко провозглашая, что функция выполняет более одной операции…»

2.2K views10:34