Шаблон проектирования (I)

Я работаю Front-end инженером с 2021 года. Мне нравится эта работа, но…

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

TL;DR: Разрабатывал и поддерживал веб-платформу в моем резюме

Постепенно я заметил, что всегда фокусируюсь на том, как я могу «закончить» функцию, вместо того, как я могу «спроектировать» функцию. А это то, что мне нужно — мышление в области проектирования программного обеспечения.

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

=======================================================

Зачем нам нужны паттерны проектирования?

Каждый паттерн описывает проблему, которая снова и снова возникает в нашей среде, а затем описывает суть решения этой проблемы таким образом, что вы можете использовать это решение миллион раз, никогда не делая это дважды одним и тем же способом». — Кристофер Александер

Принципы SOLID

Существует пять принципов для описания проектирования программного обеспечения, но я не собираюсь обсуждать сначала принципы SOLID. Вместо этого давайте сначала поговорим об основной концепции паттерна проектирования — инкапсуляции того, что меняется.

ECV (Encapsulating what varies)

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

Паттерн фабрики

Что делает фабрика? Если вы бывали на фабрике, то неважно, что там производится — ткани, обувь или телефоны, — она производит продукцию по определенной схеме, чтобы она была одинаково качественной.

Давайте представим, что вы хотите создать данные пользователя.

const userA = {
  name: "Alex",
  age: 28
  career: programmer
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Но однажды ваш коллега просит вас создать его/ее данные. Поэтому вам придется сделать это снова

const userA = {
  name: "Alex",
  age: 28
  career: programmer
}

const userB = {
  name: "Ben",
  age: 30
  career: administrator
}
Войти в полноэкранный режим Выйти из полноэкранного режима

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

class User {
  constructor(name, age, career) {
    this.name = name
    this.age = age
    this.career = career
  }
}
Вход в полноэкранный режим Выход из полноэкранного режима
const userC = new User("Cat", 30, "engineer")
Вход в полноэкранный режим Выход из полноэкранного режима

В этом примере, какая часть является изменяемой, а какая нет?

Очевидно, что значение имени, возраста и карьеры пользователя можно изменить, а характеристики пользователя изменить нельзя. Каждый пользователь обладает этими тремя характеристиками.

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

Если мы хотим определить работу пользователей по их карьере, мы можем поступить следующим образом

class User {
  constructor(name, age, career, job) {
    this.name = name
    this.age = age
    this.career = career
    this.job = job
  }
}

function Factory(name, age, career) {
  let job
  switch(career) {
    case  "programmer":
     job = ['xxx', 'yyy', 'zzz']
    break;
    case  "accounting":
     job = ['abc', 'def', 'jkm']
    break;
    ...
  }
  return new User(name, age, career, job)
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Итак, если я хочу создать данные пользователя программиста, я могу сделать следующее

const userE = Factory("Mary", 30, "programmer")
console.log(userE)// {"Mary", age: 30, career: "programmer", job: ['xxx', 'yyy', 'zzz']}
Войти в полноэкранный режим Выйти из полноэкранного режима

Резюме

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

Продолжение…

Оцените статью
Procodings.ru
Добавить комментарий