Шаблоните за проектиране помагат за комбиниране на опита на много разработчици за структуриране на кодовете по оптимизиран начин, който отговаря на проблемите, на които търсим решения, и дава общ речник, използван за описание на решения на нашите проблеми, отколкото за описване на синтаксиса и семантиката на нашия код.
Шаблоните за проектиране на JavaScript помагат на разработчиците да пишат организирани, красиви и добре структурирани кодове. Въпреки че шаблоните за проектиране, когато се използват, могат лесно да бъдат използвани повторно, те никога не могат да допълнят разработчиците, а по-скоро само ги поддържат, като предотвратяват дребни проблеми, които биха могли да доведат до големи проблеми при разработването на уеб приложения, като предоставят обобщени решения, които не са обвързани с конкретно проблем.
Те намаляват общата кодова база, като премахват ненужните повторения, като по този начин правят нашия код по-стабилен от ad-hoc решенията.
В тази статия ще разгледам седем най-добри и най-популярни шаблона за проектиране на 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. Модел на наблюдател
Шаблонът за проектиране на наблюдателя е удобен на място, където обектите комуникират с други набори от обекти едновременно. В този модел на наблюдател няма ненужно натискане и изтегляне на събития в различните състояния, по-скоро включените модули само променят текущото състояние на данните.
Пример
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: Addy Osmani
