Kako ustvariti kodo za večkratno uporabo v JavaScript z vzorci oblikovanja

Kako ustvariti kodo za večkratno uporabo v JavaScript z vzorci oblikovanja

Če želite kdaj ustvariti kodo JavaScript za večkratno uporabo ali sodelovati z ekipo razvijalcev, morate vedeti, kako uporabljati in prepoznati različne vzorce oblikovanja v jeziku.





V JavaScript se izraz oblikovalski vzorec nanaša na poseben način pisanja kode in se pogosto obravnava kot programska predloga. Zanimivo je, da se lahko vzorec oblikovanja etikete uporabi za kar koli, od celotne aplikacije do preprostega bloka kode.



Oblikovalni vzorec je široka tema, vendar se morate z razumevanjem vzorčnega modula in tovarniške metode lotiti tega.





Vzorec modula

JavaScript moduli so bili predstavljeni leta 2009 z različico programskega jezika ES5. Razvijalci modulov so zdaj lahko ustvarili kode po meri in jih izvozili za uporabo v drugih oddelkih aplikacije JavaScript.

Osnovna struktura vzorca modula


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

V zgornjem primeru so vzorčni moduli vedno zaprti v takojšnji klicni izraz funkcije (IIFE). To pomeni, da se vzorec modula izvede takoj, ko je definiran. Pomembno je omeniti, da je vzorec modula sestavljen iz dveh različnih delov.



Prvi razdelek se uporablja za razglasitev zasebnih spremenljivk in funkcij, do katerih je mogoče dostopati samo v okviru vzorca modula.

Drugi odsek je sestavljen iz vrnjene vrednosti, ki zajema javne spremenljivke in funkcije, do katerih lahko dostopate zunaj obsega vzorčnega modula.



Uporaba vzorca modula za ustvarjanje aplikacije

Razmislite o preprosti aplikaciji, kot je upravitelj opravil. Z vzorcem modulov boste morali za vsak odsek ustvariti module po meri. Ti lahko vključujejo:

  • Krmilnik opravil
  • UI krmilnik
  • Krmilnik za shranjevanje
  • Krmilnik aplikacije

Povezano: Programiranje projektov za začetnike



Krmilnik opravil bo uporabljen za ustvarjanje vsakega novega opravila. Upravljalnik uporabniškega vmesnika bo uporabljen za nadzor funkcij, povezanih z uporabniškim vmesnikom, na primer poslušanje klika na gumb ali spreminjanje prikazanega. Krmilnik za shranjevanje bo uporabljen za shranjevanje vsake nove naloge v bazo podatkov. Modul aplikacije bo uporabljen za izvajanje aplikacije.

Uporaba vzorca modula za ustvarjanje primera krmilnika uporabniškega vmesnika


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

Zgornji primer jasno prikazuje dva razdelka, ki jih najdemo v vzorcu modula - zasebni in javni.

V zasebnem delu funkcije sta spremenljivka komponente in funkcija changeComponent zasebni. Če bi torej želeli spremeniti vse besedilo h1 na spletni strani, bi prišlo do napake, če bi napisali naslednjo kodo.

Nepravilen način za priklic primera changeComponent


UIController.changeComponent();

Sporočilo o napaki bo izrecno navedlo, da changeComponent () ni funkcija funkcije UIController. To je lepota vzorčnega modula; spremenljivke in funkcije, ustvarjene v zasebnem razdelku, nikoli ne bodo neposredno dostopne zunaj področja uporabe te funkcije.

Čeprav do zasebnih spremenljivk ni mogoče dostopati neposredno, pa je do njih mogoče dostopati posredno (iz javnega razdelka). Zgornji primer krmilnika uporabniškega vmesnika je, da je javni odsek v vzorcu modula vedno označen z lastnostjo return.

V okviru parametrov povratne lastnosti lahko zdaj pridobimo posreden dostop do funkcije changeComponent. Zdaj lahko uporabite naslednjo vrstico kode (z vzorcem modula zgoraj) za učinkovito spreminjanje vsega besedila h1 na ciljni spletni strani v nadomestno besedilo.

Pravilen način za priklic primera changeComponent


UIController.callChangeComponent();

Tovarniški vzorec

Tovarniški vzorec (znan tudi kot tovarniška metoda) je še en priljubljen vzorec oblikovanja JavaScript. Vzorec modula zasveti, ko je potrebna inkapsulacija podatkov, tovarniški vzorec pa je najbolj uporaben v primerih, ko imamo opravka z zbirko različnih predmetov, ki so si v nekaterih pogledih podobni.

Če se vrnemo k zgornjemu upravitelju opravil; če bi uporabniku dovolili, da vsaki ustvarjeni nalogi dodeli vrsto, bi lahko ta vidik aplikacije (precej učinkovito) ustvarili s tovarniškim vzorcem

Z uporabo tovarniškega vzorca za dodelitev primera vrste opravila


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

Zgornja koda uporablja tovarniško metodo za ustvarjanje novih opravil, preverjanje vrste (nujno ali nepomembno) in dodelitev ustrezne lastnosti, preden natisnete novo opravilo v konzolo.

Notranja funkcija createTask določa podlago za istočasno ustvarjanje več opravil, vendar preden poskušamo ustvariti nova opravila, moramo v ta razdelek projekta vključiti še dodatno kodo.

V zgornji kodi ustvarjamo novo UrgentTask ali novo Trivialtask, če je izpolnjen določen pogoj. Vendar v našem projektu ni nobene funkcije ali razreda s temi imeni - to težavo je mogoče enostavno rešiti z uvedbo naslednje kode v naš projekt.

Ustvarite nujne in nepomembne vrste opravil


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

Zaradi zgornje kode lahko zdaj dodelimo lastnost UrgentTask ali TrivialTask ​​vsaki novi ustvarjeni nalogi. Naslednji korak je zdaj ustvariti novo nalogo, pred tem pa moramo ustvariti bazo podatkov za shranjevanje vsake nove naloge, ko je ustvarjena.

Glede na to, da je ustvarjanje baze podatkov sam po sebi celoten članek, bomo bazo podatkov nadomestili s podatkovno strukturo (matriko).

Ustvarjanje primera niza


//create an array to host the different task
const task = [];

Zdaj lahko končno ustvarimo novo nalogo.

Primer ustvarjanja novih nalog


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

Z zgornjo kodo lahko zdaj ustvarite dve novi nalogi s funkcijo TaskFactory, ki smo jo ustvarili na začetku. Ko ustvarjamo vsako novo opravilo, so lastnosti (ime in tip) pretekle za funkcijo createTask, ki se nahaja v funkciji TaskFactory, ki smo jo ustvarili s tovarniškim vzorcem.

Ko se vsako opravilo prebije skozi TaskFactory in mu je dodeljena ustrezna lastnost tipa. Nato se potisne v matriko opravil, ki smo jo ustvarili prej.

Naša edina dilema je zdaj, kako vemo, da sta bili ti dve nalogi ustvarjeni ali da je naš tovarniški vzorec deloval? Če bi uporabili bazo podatkov, bi lahko preprosto preverili, ali sta bili ustvarjeni dve novi nalogi.

Vrnite se na zgornji primer uporabe tovarniškega vzorca za dodelitev vrste opravila, neposredno pod napisom, ki se uporablja za tiskanje opravila in njegovo vrsto v komentarju konzole, obstaja majhna funkcija task.define, ki je bila ustvarjena za tiskanje vsakega opravila v matriki. na konzolo z naslednjim matrična metoda .


//print each task to the console
task.forEach(function(task){
task.define();
});

Na konzoli bi morali videti naslednji izhod.


Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can

Zdaj lahko v svojih projektih JavaScript uporabite vzorce oblikovanja

Na tej stopnji morate razumeti oblikovalske vzorce v JavaScriptu in razumeti, kako je mogoče oblikovalske vzorce uporabiti za ustvarjanje kode za večkratno uporabo in olajšati življenje vsem razvijalcem, vključenim v projekt.

Zdaj veste, kako delujeta dva priljubljena vzorca oblikovanja JavaScripta, zato bi jih morali učinkovito uporabiti za razvoj aplikacije.

Zasluge za sliko: Alltechbuzz/ Pixabay

kako priključiti airpods na xbox
Deliti Deliti Cvrkutati E-naslov Kako razglasiti spremenljivke v JavaScript

Če želite začeti uporabljati JavaScript, morate razumeti spremenljivke. Tu so trije načini za razglasitev spremenljivk v JavaScript.

Preberite Naprej Sorodne teme
  • Programiranje
  • JavaScript
O avtorju Kadeisha Kean(21 objavljenih člankov)

Kadeisha Kean je razvijalka programske opreme in tehnična/tehnološka pisateljica. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelavo materiala, ki ga lahko vsak tehnološki začetnik zlahka razume. Strastno piše, razvija zanimivo programsko opremo in potuje po svetu (skozi dokumentarne filme).

Več od Kadeisha Kean

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite