Kako stvoriti kôd za višekratnu uporabu u JavaScript -u koristeći uzorke dizajna

Ako ikada želite stvoriti JavaScript kôd za višekratnu uporabu ili surađivati s timom programera, morate znati koristiti i identificirati različite uzorke dizajna u jeziku.

U JavaScriptu izraz dizajnerski uzorak odnosi se na specifičan način pisanja koda i često se smatra programskim predloškom. Zanimljivo je da se uzorak dizajna naljepnice može primijeniti na bilo što, od cijele aplikacije do jednostavnog bloka koda.

Uzorak dizajna široka je tema, ali razumijevanjem uzorka modula i tvorničke metode trebali biste se uhvatiti u koštac s tim.

Uzorak modula

JavaScript moduli uvedeni su 2009. s ES5 verzijom programskog jezika. Pomoću modula programeri su sada mogli stvoriti prilagođene komade koda i izvesti ih za upotrebu u drugim odjeljcima JavaScript aplikacije.

Osnovna struktura uzorka modula

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

U gornjem primjeru uzorci modula uvijek su zatvoreni u izrazu funkcije koji se odmah poziva (IIFE). To znači da se uzorak modula izvršava čim je definiran. Važno je napomenuti da se uzorak modula sastoji od dva različita dijela.

Prvi odjeljak koristi se za deklariranje privatnih varijabli i funkcija, kojima se može pristupiti samo unutar opsega uzorka modula.

Drugi odjeljak sastoji se od povratne vrijednosti koja obuhvaća javne varijable i funkcije kojima se može pristupiti izvan opsega uzorka modula.

Korištenje uzorka modula za izradu aplikacije

Razmislite o jednostavnoj aplikaciji, poput upravitelja zadataka. Koristeći uzorak modula, morat ćete izraditi prilagođene module za svaki odjeljak. To može uključivati:

Kontroler zadataka
UI kontroler
Kontroler za pohranu
Kontroler aplikacije

Povezano: Programiranje projekata za početnike

Kontroler zadataka će se koristiti za izradu svakog novog zadatka. UI kontroler će se koristiti za kontrolu funkcija povezanih s korisničkim sučeljem, poput slušanja pritiska na gumb ili mijenjanja prikazanog. Kontroler za pohranu koristit će se za spremanje svakog novog zadatka u bazu podataka. Modul aplikacije će se koristiti za izvršavanje aplikacije.

Primjer uzorka modula za stvaranje primjera UI kontrolera

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

Gornji primjer jasno prikazuje dva odjeljka koji se nalaze unutar uzorka modula - privatni i javni.

U privatnom dijelu funkcije, varijabla komponente i funkcija changeComponent obje su privatne. Stoga, ako želite promijeniti sav h1 tekst na web stranici, dobili biste pogrešku ako napišete sljedeći kôd.

Neispravan način dozivanja primjera promjene komponente

  
UIController.changeComponent();

Poruka o pogrešci izričito će reći da changeComponent () nije funkcija funkcije UIController. To je ljepota uzorka modula; varijablama i funkcijama koje su stvorene u privatnom odjeljku nikada se neće izravno pristupiti izvan dosega te funkcije.

Premda se privatnim varijablama ne može izravno pristupiti, ipak im se može neizravno pristupiti (iz javnog odjeljka). Izvadak iz gore navedenog primjera UI kontrolera je da je javni odjeljak u uzorku modula uvijek označen svojstvom return.

Unutar parametara povratnog svojstva, sada smo u mogućnosti steći neizravni pristup funkciji changeComponent. Sada možemo koristiti sljedeći redak koda (s gornjim uzorkom modula) za učinkovitu promjenu cijelog teksta h1 na ciljanoj web stranici u zamjenski tekst.

Ispravan način dozivanja primjera promjene komponente

  
UIController.callChangeComponent();

Tvornički uzorak

Tvornički uzorak (poznat i kao tvornička metoda) još je jedan popularan JavaScript uzorak dizajna. Uzorak modula svijetli kada je potrebna enkapsulacija podataka, a tvornički uzorak je najkorisniji u slučajevima kada se radi o zbirci različitih objekata koji su u nekim aspektima slični.

Vraćajući se gore navedenom upravitelju zadataka; ako bismo dopustili korisniku da dodijeli vrstu svakom stvorenom zadatku, mogli bismo stvoriti taj aspekt aplikacije (prilično učinkovito) koristeći tvornički uzorak

Korištenje tvorničkog uzorka za dodjelu primjera vrste zadatka

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

Gornji kôd koristi tvorničku metodu za stvaranje novih zadataka, provjeru vrste (hitni ili trivijalni) i dodjeljivanje odgovarajućeg svojstva prije ispisa novog zadatka na konzolu.

Unutarnja funkcija createTask postavlja pozornicu za istovremenu izradu više zadataka, ali prije nego što pokušamo stvoriti nove zadatke, postoji neki dodatni kôd koji moramo uključiti u ovaj odjeljak projekta.

U gornjem kodu stvaramo novi UrgentTask ili novi Trivialtask ako je ispunjen određeni uvjet. Međutim, u našem projektu ne postoji nijedna funkcija ili klasa s tim nazivima - ovaj se problem može lako riješiti uvođenjem sljedećeg koda u naš projekt.

Stvorite hitne i trivijalne vrste zadataka

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

Zbog gornjeg koda, sada možemo dodijeliti svojstvo UrgentTask ili TrivialTask svakom novom kreiranom zadatku. Sljedeći korak je sada stvoriti novi zadatak, no prije toga moramo stvoriti bazu podataka za pohranu svakog novog zadatka kako je nastao.

S obzirom da je stvaranje baze podataka cijeli članak sam po sebi, zamijenit ćemo bazu podataka strukturom podataka (nizom).

Izrada primjera niza

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

Sada konačno možemo stvoriti novi zadatak.

Primjer stvaranja novih zadataka

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

Pomoću gornjeg koda sada možete stvoriti dva nova zadatka pomoću funkcije TaskFactory koju smo prvotno stvorili. Prilikom izrade svakog novog zadatka svojstva (naziv i vrsta) prelaze u funkciju createTask koja se nalazi u funkciji TaskFactory koju smo stvorili pomoću tvorničkog uzorka.

Nakon što je svaki zadatak prošao kroz TaskFactory i dodijeljeno mu je odgovarajuće svojstvo tipa. Zatim se gura u niz zadataka koji smo ranije stvorili.

Naša je jedina dilema sada kako znamo da su ta dva zadatka stvorena ili da je naš tvornički uzorak funkcionirao? Da smo koristili bazu podataka, mogli bismo jednostavno provjeriti bazu podataka da vidimo jesu li stvorena dva nova zadatka.

Vratite se na gornji primjer Korištenje tvorničkog uzorka za dodjelu vrste zadatka, neposredno ispod upotrijebljenog za ispis zadatka i njegove vrste na komentar konzole, postoji mala funkcija task.define koja je stvorena za ispis svakog zadatka u nizu na konzolu koristeći sljedeće metoda polja .

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

Trebali biste vidjeti sljedeći izlaz koji se prikazuje na vašoj konzoli.

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

Sada možete koristiti uzorke dizajna u svojim JavaScript projektima

U ovoj fazi trebali biste razumjeti obrasce dizajna u JavaScriptu i razumjeti kako se uzorci dizajna mogu koristiti za stvaranje koda za višekratnu uporabu i olakšavanje života svim programerima uključenim u projekt.

Sada znate kako funkcioniraju dva popularna JavaScript uzorka dizajna, trebali biste ih moći učinkovito primijeniti za razvoj aplikacije.

Kredit za sliku: Alltechbuzz/ Pixabay

gdje mogu ispisati papire

Udio Udio Cvrkut E -pošta Kako deklarirati varijable u JavaScript -u

Da biste počeli koristiti JavaScript, morate razumjeti varijable. Evo tri načina deklariranja varijabli u JavaScriptu.

Pročitajte Dalje Povezane teme

Programiranje
JavaScript

O autoru Kadeisha Kean(Objavljen 21 članak)

Kadeisha Kean je programer softvera i pisac tehničke/tehnologije. Ona ima izrazitu sposobnost pojednostavljivanja nekih od najsloženijih tehnoloških koncepata; proizvodnju materijala koji će lako razumjeti svaki tehnološki novak. Oduševljena je pisanjem, razvojem zanimljivog softvera i putovanjem po svijetu (kroz dokumentarne filmove).

Više od Kadeishe Kean

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu