Како створити код за вишекратну употребу у ЈаваСцрипт -у користећи обрасце дизајна

Како створити код за вишекратну употребу у ЈаваСцрипт -у користећи обрасце дизајна

Ако икада желите да направите ЈаваСцрипт код за вишекратну употребу или сарађујете са тимом програмера, морате знати како да користите и идентификујете различите обрасце дизајна у језику.





У ЈаваСцрипту, термин дизајн узорак се односи на специфичан начин писања кода и често се сматра програмским шаблоном. Занимљиво је да се узорак дизајна етикете може применити на било шта, од целе апликације до једноставног блока кода.



Узорак дизајна је широка тема, али разумевањем обрасца модула и фабричке методе требало би да се ухватите у коштац с тим.



Узорак модула

ЈаваСцрипт модули су уведени 2009. године, са ЕС5 верзијом програмског језика. Помоћу модула програмери су сада могли да креирају прилагођене делове кода и да их извезу за употребу у другим одељцима ЈаваСцрипт апликације.

Основна структура обрасца модула


(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})();

У горњем примеру, обрасци модула су увек затворени у изразу функције који се одмах позива (ИИФЕ). То значи да се образац модула извршава чим је дефинисан. Важно је напоменути да се образац модула састоји од два различита одељка.



Први одељак се користи за декларисање приватних променљивих и функција, којима се може приступити само у оквиру обрасца модула.

Други одељак се састоји од повратне вредности која обухвата јавне променљиве и функције којима се може приступити ван опсега обрасца модула.



Коришћење обрасца модула за креирање апликације

Размислите о једноставној апликацији, као што је менаџер задатака. Користећи образац модула, мораћете да креирате прилагођене модуле за сваки одељак. Ово може укључивати:

  • Контролер задатака
  • УИ контролер
  • Контролер за складиштење
  • Контролер апликације

Повезан: Програмирање пројеката за почетнике



Контролер задатака ће се користити за креирање сваког новог задатка. УИ контролер ће се користити за контролу функција повезаних са корисничким интерфејсом, као што је слушање притиска на дугме или промена приказаног. Контролер за складиштење ће се користити за чување сваког новог задатка у бази података. Модул апликације ће се користити за извршавање апликације.

Коришћење узорка модула за креирање примера УИ контролера


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();
}
}
})();

Горњи пример јасно приказује два одељка који се налазе унутар обрасца модула - приватни и јавни.

У приватном делу функције, променљива компоненте и функција цхангеЦомпонент су приватне. Стога, ако желите да промените сав х1 текст на веб страници, добили бисте грешку ако напишете следећи код.

Нетачан начин позивања примене промене компоненте


UIController.changeComponent();

Порука о грешци ће експлицитно навести да цхангеЦомпонент () није функција функције УИЦонтроллер. Ово је лепота обрасца модула; променљивим и функцијама које су креиране у приватном одељку никада неће бити директно приступљено ван опсега те функције.

Иако се приватним променљивим не може директно приступити, може им се, међутим, индиректно приступити (из јавног одељка). Из горњег примера контролера корисничког интерфејса се може закључити да је јавни одељак у обрасцу модула увек означен својством ретурн.

У оквиру параметара повратног својства, сада смо у могућности да добијемо индиректан приступ функцији цхангеЦомпонент. Сада можемо да користимо следећи ред кода (са шаблоном модула изнад) да ефикасно променимо сав х1 текст на циљаној веб страници у заменски текст.

Тачан начин позивања примене промене компоненте


UIController.callChangeComponent();

Фацтори Паттерн

Фабрички узорак (такође познат и као фабрички метод) је још један популаран ЈаваСцрипт узорак дизајна. Узорак модула светли када је потребна енкапсулација података, а фабрички образац је најкориснији у случајевима када се ради о збирци различитих објеката који су у неким аспектима слични.

Враћајући се горе наведеном менаџеру задатака; ако бисмо дозволили кориснику да додељује тип сваком задатку који је креиран, могли бисмо да створимо тај аспект апликације (прилично ефикасно) користећи фабрички образац

Коришћење фабричког обрасца за доделу примера типа задатка


//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
}
}

Горњи код користи фабрички метод за креирање нових задатака, проверу типа (хитно или тривијално) и додељивање одговарајућег својства пре штампања новог задатка на конзоли.

Унутрашња функција цреатеТаск, поставља позорницу за истовремено креирање више задатака, али пре него што покушамо да креирамо нове задатке, постоји неки додатни код који морамо да укључимо у овај одељак пројекта.

У горњем коду стварамо нови УргентТаск или нови Тривиалтаск ако је испуњен одређени услов. Међутим, у нашем пројекту не постоји ниједна функција или класа са овим именима - овај проблем се лако може решити увођењем следећег кода у наш пројекат.

Креирајте хитне и тривијалне типове задатака


//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'
}

Због горњег кода, сада можемо доделити својство УргентТаск или ТривиалТаск сваком новом задатку који се креира. Следећи корак је сада креирање новог задатка, али пре тога морамо да направимо базу података за складиштење сваког новог задатка како је креиран.

С обзиром да је стварање базе података читав чланак сам по себи, заменићемо базу података структуром података (низ).

Креирање примера низа


//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'));

Помоћу горњег кода сада можете да креирате два нова задатка помоћу функције ТаскФацтори коју смо првобитно креирали. Када креирамо сваки нови задатак, својства (име и тип) прелазе у функцију цреатеТаск која се налази у функцији ТаскФацтори коју смо креирали помоћу фабричког обрасца.

Након што сваки задатак прође кроз ТаскФацтори и додели му се одговарајуће својство типа. Затим се гура у низ задатака који смо раније креирали.

Наша једина дилема сада је како знамо да су та два задатка створена или да је наш фабрички образац успео? Да смо користили базу података, могли бисмо једноставно проверити базу података да видимо да ли су створена два нова задатка.

Вратите се на горњи пример Коришћење фабричког обрасца за додељивање типа задатка, непосредно испод коришћеног за штампање задатка и његовог типа у коментару конзоле, постоји мала функција таск.дефине која је створена за штампање сваког задатка у низу на конзолу користећи следеће метода низа .


//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

Сада можете користити обрасце дизајна у својим ЈаваСцрипт пројектима

У овој фази требали бисте разумјети дизајнерске обрасце у ЈаваСцрипт -у и разумјети како се дизајнерски обрасци могу користити за креирање кода за вишекратну употребу и олакшати живот свим програмерима укљученим у пројекат.

Сада знате како функционишу два популарна шаблона дизајна ЈаваСцрипта. Могли бисте их ефикасно применити за развој апликације.

Кредит за слику: Аллтецхбузз/ Пикабаи

како да креирате групу е -поште у оутлоок -у
Објави Објави Твеет Емаил Како декларисати променљиве у ЈаваСцрипт -у

Да бисте почели да користите ЈаваСцрипт, морате да разумете променљиве. Ево три начина за декларисање променљивих у ЈаваСцрипт -у.

Прочитајте следеће Повезане теме
  • Програмирање
  • ЈаваСцрипт
О аутору Кадеисха Кеан(Објављен 21 чланак)

Кадеисха Кеан је програмер софтвера и писац техничке/технологије. Она има изразиту способност да поједностави неке од најсложенијих технолошких концепата; производњу материјала који може лако разумети сваки почетник у технологији. Одушевљена је писањем, развојем занимљивог софтвера и путовањем по свету (кроз документарне филмове).

Више од Кадеисха Кеан

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили