Home-theater-designers
Ако някога искате да създадете JavaScript код за многократна употреба или да си сътрудничите с екип от разработчици, тогава трябва да знаете как да използвате и идентифицирате различните дизайнерски модели на езика.
В JavaScript терминът модел за проектиране се отнася до специфичен начин на писане на код и често се мисли като шаблон за програмиране. Интересното е, че шаблонът за дизайн на етикети може да се приложи към всичко - от цяло приложение до обикновен блок код.
Моделът за проектиране е широка тема, но като разберете модела на модула и фабричния метод, трябва да се справите с него.
Модулен модел
JavaScript модулите бяха въведени през 2009 г. с ES5 версията на езика за програмиране. С помощта на модули разработчиците вече успяха да създават персонализирани парчета код и да ги експортират, за да се използват в други раздели на приложение на JavaScript.
Основната структура на модела на модела
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})(); В горния пример, моделите на модули винаги са затворени в незабавно извикан функционален израз (IIFE). Това означава, че моделът на модула се изпълнява веднага щом бъде дефиниран. Важното, което трябва да се отбележи, е, че моделът на модула се състои от две отделни секции.
Първият раздел се използва за деклариране на частни променливи и функции, които могат да бъдат достъпни само в обхвата на модела на модула.
Вторият раздел се състои от връщаща стойност, която обхваща публични променливи и функции, които могат да бъдат достъпни извън обхвата на шаблона на модула.
Използване на модела за създаване на приложение
Помислете за просто приложение, като диспечер на задачи. Използвайки шаблона на модула, ще трябва да създадете персонализирани модули за всеки раздел. Те могат да включват:
- Контролер на задачи
- UI контролер
- Контролер за съхранение
- Контролер за приложения
Свързани: Програмиране на проекти за начинаещи
Контролерът на задачи ще се използва за създаване на всяка нова задача. Контролерът на потребителския интерфейс ще се използва за управление на свързаните с потребителския интерфейс функции, като например слушане на натискане на бутон или промяна на това, което се показва. Контролерът за съхранение ще се използва за запазване на всяка нова задача в база данни. Модулът на приложението ще се използва за изпълнение на приложението.
Използване на модел на модул за създаване на пример за UI контролер
const UIController = ( function() {
//the private section of the module
let component = 'Replacement Text';
const changeComponent = function() {
//change all the h1 text to what is in the component variable above
const element = document.querySelector('h1');
element.textContent = component;
}
//the public section of the module
return{
callChangeComponent: function() {
changeComponent();
}
}
})();
Горният пример ясно показва двата раздела, които се намират в модела на модула - частен и публичен.
В частния раздел на функцията променливата компонент и функцията changeComponent са частни. Следователно, ако искате да промените целия h1 текст на уеб страница, ще получите грешка, ако напишете следния код.
Неправилен начин за извикване на примера на changeComponent
UIController.changeComponent();
Съобщението за грешка изрично ще посочи, че changeComponent () не е функция на функцията UIController. Това е красотата на модела на модула; променливите и функциите, създадени в частния раздел, никога няма да бъдат достъпни директно извън обхвата на тази функция.
Въпреки че частните променливи не могат да бъдат достъпни директно, те могат да бъдат достъпни косвено (от публичния раздел). Пример от горния пример за UI контролер е, че публичната секция в модела на модула винаги е маркирана от свойството return.
В рамките на параметрите на свойството return, сега можем да получим непряк достъп до функцията changeComponent. Вече можем да използваме следния ред код (с модела на модула по -горе), за да променим ефективно целия h1 текст на целевата уеб страница на Текст за замяна.
Правилен начин за извикване на примера на changeComponent
UIController.callChangeComponent();
Фабричният модел
Фабричният модел (известен също като фабричен метод) е друг популярен модел за проектиране на JavaScript. Моделът на модула блести, когато се изисква капсулиране на данни, а фабричният модел е най -полезен в случаите, когато имаме работа с колекция от различни обекти, които са сходни в някои аспекти.
Връщаме се към нашия диспечер на задачите по -горе; ако трябваше да позволим на потребителя да присвои тип на всяка създадена задача, тогава бихме могли да създадем този аспект на приложението (доста ефективно), използвайки фабричния модел
Използване на фабричен модел за присвояване на пример за тип задача
//Factory pattern function
const TaskFactory = function(){
this.createTask = function(name, type){
let task;
//check the type the user selected
if(type === 'urgent'){
task = new UrgentTask(name);
}else if(type === 'trivial'){
task = new TrivialTask(name);
}
//set the type selected in the if statement to the one received as a property
task.type = type;
//used to print the task and its type to the console
task.define = function(){
console.log(`${this.name} (${this.type}): ${this.priority}`)
}
return task
}
}Горният код използва фабричния метод за създаване на нови задачи, проверка на типа (спешен или тривиален) и присвояване на съответното свойство, преди да отпечатате новата задача в конзолата.
Вътрешната функция createTask задава сцена за едновременно създаване на множество задачи, но преди да се опитаме да създадем нови задачи, трябва да включим допълнителен код в този раздел на проекта.
В горния код създаваме нова UrgentTask или нова Trivialtask, ако е изпълнено конкретно условие. В нашия проект обаче няма функция или клас с тези имена - този проблем може лесно да бъде решен чрез въвеждане на следния код в нашия проект.
Създайте спешни и тривиални типове задачи
//Create the urgent task type
const UrgentTask = function(name){
this.name = name;
this.priority = 'as soon as possible'
}
//create the trivial task type
const TrivialTask = function(name){
this.name = name;
this.priority = 'when you can'
}
Поради горния код вече можем да присвоим свойството UrgentTask или TrivialTask на всяка нова създадена задача. Следващата стъпка е сега да създадем нова задача, но преди това трябва да създадем база данни, за да съхраняваме всяка нова задача при нейното създаване.
Като се има предвид, че създаването на база данни е цяла статия сама по себе си, ще заменим база данни със структура от данни (масив).
Създаване на пример за масив
//create an array to host the different task
const task = [];
Сега най -накрая можем да създадем нова задача.
Пример за създаване на нови задачи
//create two new tasks
const factory = new TaskFactory();
task.push(factory.createTask('Clean the house', 'urgent'));
task.push(factory.createTask('Reach level 30 in Candy Crush', 'trivial'));
С горния код вече можете да създадете две нови задачи, използвайки функцията TaskFactory, която създадохме първоначално. Когато създаваме всяка нова задача, свойствата (име и тип) преминават към функцията createTask, която се намира във функцията TaskFactory, която създадохме с помощта на фабричния модел.
След като всяка задача си проправи път през TaskFactory и й се присвои съответното свойство type. След това се избутва в масива със задачи, който създадохме по -рано.
Единствената ни дилема сега е как да разберем, че тези две задачи са създадени или че фабричният ни модел работи? Ако бяхме използвали база данни, тогава можехме просто да проверим базата данни, за да видим дали са създадени две нови задачи.
Върнете се към Пример за използване на фабричния модел за присвояване на тип задача по -горе, точно под използваната за отпечатване задача и нейния тип към коментара на конзолата, има малка функция task.define, която е създадена за отпечатване на всяка задача в масива към конзолата, като използвате следното метод на масива .
//print each task to the console
task.forEach(function(task){
task.define();
});
Трябва да видите следния изход, който се показва във вашата конзола.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Сега можете да използвате шаблони за дизайн във вашите JavaScript проекти
На този етап трябва да разберете шаблоните за проектиране в JavaScript и да разберете как дизайнерските модели могат да се използват за създаване на код за многократна употреба и да улеснят живота на всички разработчици, участващи в проект.
Сега знаете как работят два популярни шаблона за проектиране на JavaScript, трябва да можете ефективно да ги приложите за разработване на приложение.
Кредит на изображението: Alltechbuzz/ Pixabay
как да увеличите паметта на компютърДял Дял Туит електронна поща Как да декларирате променливи в JavaScript
За да започнете с JavaScript, трябва да разберете променливите. Ето три начина за деклариране на променливи в JavaScript.
Прочетете Напред Свързани теми- Програмиране
- JavaScript
Kadeisha Kean е разработчик на софтуер с пълен набор и технически/технологичен писател. Тя има отличителната способност да опростява някои от най -сложните технологични концепции; производство на материал, който може лесно да бъде разбран от всеки начинаещ в технологиите. Тя е запалена по писането, разработването на интересен софтуер и пътуването по света (чрез документални филми).
Още от Kadeisha KeanАбонирайте се за нашия бюлетин
Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!
Щракнете тук, за да се абонирате