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

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

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

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

1. Шаблон проектирования конструктора.

Это специальный метод, который используется для инициализации вновь созданных объектов после выделения памяти. Поскольку JavaScript обычно объектно-ориентирован, он больше всего работает с объектами, поэтому я намерен углубиться в конструкторы объектов. Есть три способа создания новых объектов в JavaScript:

Ниже приведен один из способов создания шаблона проектирования конструктора.

// This creates a new empty Object
var newObject = {};
// This creates a new empty Object
var newObject = Object.create(Object.prototype);
var newObject = newObject();

Чтобы получить доступ к свойствам функции, вам необходимо инициализировать объект.

const object = new ConstructorObject();

При этом новое ключевое слово выше сообщает JavaScript, что a constructorObject должен действовать как конструктор. Этот шаблон проектирования не поддерживает наследование. Узнайте подробнее здесь.

2. Образец прототипа

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

Пример

name:"Ford",
brake:function(){
console.log("Stop! I am applying brakes");
}
Panic : function (){
console.log ( "wait. how do you stop thuis thing?")
}
}
// use objec create to instansiate a new car
var yourCar= object.create(myCar);
//You can now see that one is a prototype of the other
console.log (yourCar.name);]

3. Шаблон проектирования модуля

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

Пример

var myCar= {
function AnimalContainter () {
const container = [];
function addAnimal (name) {
container.push(name);
}
function getAllAnimals() {
return container;
}
function removeAnimal(name) {
const index = container.indexOf(name);
if(index < 1) {
throw new Error('Animal not found in container');
}
container.splice(index, 1)
}
return {
add: addAnimal,
get: getAllAnimals,
remove: removeAnimal
}
}
const container = AnimalContainter();
container.add('Hen');
container.add('Goat');
container.add('Sheep');
console.log(container.get()) //Array(3) ["Hen", "Goat", "Sheep"]
container.remove('Sheep')
console.log(container.get()); //Array(2) ["Hen", "Goat"]

4. Одноэлементный шаблон

Это важно в сценарии, где необходимо создать только один экземпляр, например, подключение к базе данных. Создать экземпляр можно только тогда, когда соединение закрыто, или вы обязательно закрываете открытый экземпляр, прежде чем открывать новый. Этот шаблон также называют строгим шаблоном. Одним из недостатков, связанных с этим шаблоном, является его сложный опыт тестирования из-за его скрытых объектов зависимостей, которые нелегко выделить для тестирования.

Пример

function DatabaseConnection () {
let databaseInstance = null;
// tracks the number of instances created at a certain time
let count = 0;
function init() {
console.log(`Opening database #${count + 1}`);
//now perform operation
}
function createIntance() {
if(databaseInstance == null) {
databaseInstance = init();
}
return databaseInstance;
}
function closeIntance() {
console.log('closing database');
databaseInstance = null;
}
return {
open: createIntance,
close: closeIntance
}
}
const database = DatabseConnection();
database.open(); //Open database #1
database.open(); //Open database #1
database.open(); //Open database #1
database.close(); //close database

5. Заводской узор.

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

Пример

// Dealer A
DealerA = {};
DealerA.title = function title() {
return "Dealer A";
};
DealerA.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username} and password: ${
this.password
}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//Dealer B
DealerB = {};
DealerB.title = function title() {
return "Dealer B";
};
DealerB.pay = function pay(amount) {
console.log(
`set up configuration using username: ${this.username}
and password: ${this.password}`
);
return `Payment for service ${amount} is successful using ${this.title()}`;
};
//@param {*} DealerOption
//@param {*} config
function DealerFactory(DealerOption, config = {}) {
const dealer = Object.create(dealerOption);
Object.assign(dealer, config);
return dealer;
}
const dealerFactory = DealerFactory(DealerA, {
username: "user",
password: "pass"
});
console.log(dealerFactory.title());
console.log(dealerFactory.pay(12));
const dealerFactory2 = DealerFactory(DealerB, {
username: "user2",
password: "pass2"
});
console.log(dealerFactory2.title());
console.log(dealerFactory2.pay(50));

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

Шаблон проектирования наблюдателя удобен в тех случаях, когда объекты взаимодействуют с другими наборами объектов одновременно. В этом шаблоне наблюдателя нет ненужных 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 &gt; -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);
});
}

7. Шаблон команды

Подводя итог, я бы сказал, что паттерн проектирования команд завершает мои 7 лучших сумм паттернов проектирования JavaScript. Шаблон разработки команды инкапсулирует вызов метода, операции или запросы в один объект, чтобы мы могли передавать вызовы методов по своему усмотрению. Шаблон разработки команд дает нам возможность выдавать команды из чего-либо, выполняющего команды, и вместо этого делегирует ответственность другим объектам. Эти команды представлены в формате run() и execute().

(function(){
var carManager = {
//information requested
requestInfo: function( model, id ){
return "The information for " + model + " with ID " + id + " is foo bar";
},
// now purchase the car
buyVehicle: function( model, id ){
return "You have successfully purchased Item " + id + ", a " + model;
},
// now arrange a viewing
arrangeViewing: function( model, id ){
return "You have successfully booked a viewing of " + model + " ( " + id + " ) ";
}
};
})();

Ссылка:

Изучение шаблонов проектирования Javascript: Эдди Османи