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

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

Шаблоны проектирования JavaScript помогают разработчикам писать организованный, красивый и хорошо структурированный код. Хотя шаблоны проектирования, когда они используются, могут быть легко использованы повторно, они никогда не могут дополнить разработчиков, а только поддерживают их, предотвращая незначительные проблемы, которые могут привести к серьезным проблемам при разработке веб-приложений, предоставляя обобщенные решения, которые не привязаны к конкретному. проблема.

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

Категории шаблонов проектирования

Шаблоны проектирования делятся на множество категорий, но наиболее распространенными являются Креативные, Структурные и Поведенческие. Вот краткий обзор!

Шаблон конструктора

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

function Car(model, year, miles) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}

// Usage:
var honda = new Car('TRX', '2020', '1000');

Шаблон модуля

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

  • Буквенное обозначение объекта
  • Модуль Pattern
  • модули AMD
  • Модуль CommonJS
  • Модули гармонии ECMAScript
var testModule = (function() {
  var counter = 0;
  return {
    incrementCounter: function() {
      return ++counter;
    },
    resetCounter: function() {
      counter = 0;
    }
  };
})();

// Usage:
testModule.incrementCounter();
testModule.resetCounter();

Шаблон раскрывающегося модуля

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

var myRevealingModule = (function() {
  var privateVariable = 'not okay',
    publicVariable = 'okay';
  function privateFun() {
    return privateVariable;
  }

  function publicSetName(strName) {
    privateVariable = strName;
  }

  function publicGetName() {
    privateFun();
  }

  return {
    setName: publicSetName,
    message: publicVariable,
    getName: publicGetName
  };
})();

//Usage:

myRevealingModule.setName('Naufal');

Шаблон синглтона

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

let dbInstance = null

function getDBConn () {
    if (!dbInstance) {
        dbInstance = new DB() // Creating an instance of DB class and storing it in the global variable dbInstance
    }
    return dbInstance
}

function useDBConn () {
    let dbObj = getDBConn()
    /* --- */
}

function f1 () {
    let dbObj = getDBConn()
    /* --- */
}

function f2 () {
    let dbObj = getDBConn()
    /* --- */
}

Шаблон наблюдателя

Паттерн Observer — это удобное место, где мы можем одновременно общаться с другим объектом, нет ненужных push-and-pull событий между состояниями, а задействованные модули только изменяют текущее состояние данных.

function Observer() {
this.observerContainer = [];
}

Observer.prototype.subscribe = function (element) {
this.observerContainer.push(element);
}

// the following removes an element from the container

Observer.prototype.unsubscribe = function (element) {

const elementIndex = this.observerContainer.indexOf(element);
if (elementIndex > -1) {
this.observerContainer.splice(elementIndex, 1);
}
}

/**
* we notify elements added to the container by calling
* each subscribed components added to our container
*/
Observer.prototype.notifyAll = function (element) {
this.observerContainer.forEach(function (observerElement) {
observerElement(element);
});
}

Шаблон прототипа

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

var myCar = {
  name: 'honda',
  drive: function() {
    console.log('I am driving!');
  },
  panic: function() {
    console.log('wait, how do you stop this thing?');
  }
};

//Usages:

var yourCar = Object.create(myCar);

console.log(yourCar.name); //'honda'

Фабричный образец

Factory может предоставить общий интерфейс для создания объектов, где мы можем указать тип объекта factory, который мы хотим создать.

function Car(options) {
  this.doors = options.doors || 4;
  this.state = options.state || 'second';
  this.color = options.color || 'blue';
}

Паттерн Миксин

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

var Person = function(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
  this.gender = 'male';
};

var clark = new Person('Naufal', 'RDJ');

var Superhero = function(firstName, lastName, powers) {
  Person.call(this.firstName, this.lastName);
  this.powers = powers;
};

SuperHero.prototype = Object.create(Person.prototype);
var superman = new Superhero('Clark', 'Kent', ['flight', 'heat-vision']);

console.log(superman);

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

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



rachfiandj07 — Обзор
Инженер Bukan terbaik bangsa Indonesia, сравнение fetchin API с использованием React Lifecycle и Opensource lib Axios…github.com



Использованная литература :