Шаблоны проектирования помогают объединить опыт многих разработчиков для оптимизации структуры кода, отвечающей задачам, решения которых мы ищем, и дают общий словарь, используемый для описания решений наших проблем, а не для описания синтаксиса и семантики нашего кода.
Шаблоны проектирования 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 > -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: Эдди Османи