Разработчик темные искусства: Волшебные струны

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

Почему мне все равно?

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

Что такое хек – «волшебная» строка?

// animalType.js
export const AnimalType = {
  rabbit: "rabbit",
  pigeon: "pigeon",
  snake: "snake",
};

// tricks.js
import { AnimalType } from "./animalType";

const trick = {
  animalType: AnimalType["rabbit"],
  description: `Pull ${AnimalType["rabbit"]} out of hat`,
};

// favorites.js
import { AnimalType } from "./animalType";

const animal = AnimalType.rabbit;

Вы можете увидеть код, похожий на выше. Давние разработчики могут уметь понюхать кодовый запах. Есть горстка проблем. Все укоренились вокруг волшебство Строка «Кролик» Отказ

❌ Мы используем строку для доступа к реквисам на Animaltype объект в некоторые мест ❌. Переинтересование той же строки несколько раз – ошибка Prone ❌. Найти и замена кролик Ошибка подвержена ошибкам из-за строки vs dot notiation использует ❌ Результаты автозаполнения современных редакторов загрязнены строковыми значениями

Что квалифицирует это как «волшебную» строку, которую вы спрашиваете? Это магия из-за строкового значения «Кролик» Отказ

Позволь мне объяснить.

Волшебная строка – это строка (или число), значение которой, по-видимому, происходит из тонкого воздуха и не хватает какой-либо дополнительной информации, чтобы понять ее происхождение. Его значение произвольно. Как произвольно как кролик быть вытянутым из шляпы волшебника.

– Я только сейчас

Почему это плохо, хотя?

Есть некоторые подводные камни, чтобы написать ваше кодирование так.

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

В этом случае мы будем обновлять наш код следующим:

// animalType.js
export const AnimalType = {
  RABBIT: "RABBIT",
  PIGEON: "PIGEON",
  SNAKE: "SNAKE",
};

// tricks.js
import { AnimalType } from "./animalType";

const trick = {
  animalType: AnimalType["RABBIT"],
  description: `Pull ${AnimalType["RABBIT"]} out of hat`,
};

// favorites.js
import { AnimalType } from "./animalType";

const animal = AnimalType.RABBIT;

Здесь мы обновляем «Кролик» Значение для «Кролик» в кучке мест. В реальном мире сценария «Кролик» Строка должна быть обновлена везде, что оно будет ссылаться. Каждая ссылка в каждом файле что использует Animaltype. . Мы также должны были сделать это для "Голубь" и «Змея» Отказ Представьте, если их ценности были более распространенными условиями, как «Имя» или «Тип» Отказ Удачи найти/замена тех. Супер брутто 🤮.

Как мы можем улучшить это?

В идеальном мире струна «Кролик» будет определен один раз.

Позволь мне показать тебе:

// animalType.js
const RABBIT = 'RABBIT';
const PIGEON = 'PIGEON';
const SNAKE = 'SNAKE';

export const AnimalType = {
  RABBIT,
  PIGEON,
  SNAKE,
};

// tricks.js
import { AnimalType } from "./animalType";

const trick = {
  animalType: AnimalType.RABBIT,
  description: `Pull ${AnimalType.RABBIT} out of hat`,
};

// favorites.js
import { AnimalType } from "./animalType";

const animal = AnimalType.RABBIT;

Почему это лучше?

✅ Мы определили наши строковые значения в одном месте с именами, которые являются информационными ✅ Везде вы видите Кролик Переменная Вы знаете, что его фактическая стоимость является деталей реализации. Вы заботитесь только о том, что вы используете подходящие AnimalType. <Тип> Отказ ✅ Строковое значение для Кролик определяется один раз. Нужно изменить его значение? Обновите эту единую строку кода. Нет больше Найти/заменить кошмары. ✅ Современные редакторы автозаполнения Animaltype без загрязнения общих результатов

Заключение

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

Сегодняшний пост был доставлен вам VSCode «удалить мертвый импорт и сортировку»: Опция + Сдвиг + o

Первоначально опубликовано на Блог Zeal’s

Оригинал: “https://dev.to/n8io/developer-dark-arts-magic-strings-2ihn”