Kujundusmustrite abil JavaScriptis korduvkasutatava koodi loomine

Kui soovite kunagi luua korduvkasutatavat JavaScripti koodi või teha koostööd arendajate meeskonnaga, peate teadma, kuidas kasutada ja tuvastada keele erinevaid kujundusmustreid.

JavaScriptis viitab mõiste disainimuster konkreetsele koodi kirjutamise viisile ja seda peetakse sageli programmeerimismalliks. Huvitav on see, et etiketi kujundusmustrit saab rakendada kõigele, alates kogu rakendusest kuni lihtsa koodiplokini.

Disainimuster on lai teema, kuid mõistes mooduli mustrit ja tehase meetodit, peaksite sellega hakkama saama.

Mooduli muster

JavaScripti moodulid võeti kasutusele 2009. aastal, programmeerimiskeele versiooniga ES5. Moodulite abil said arendajad nüüd luua kohandatud kooditükke ja eksportida neid JavaScripti rakenduse teistesse osadesse kasutamiseks.

Mooduli mustri põhistruktuur

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

Ülaltoodud näites on moodulimustrid alati suletud kohe käivitatud funktsiooni avaldisesse (IIFE). See tähendab, et mooduli muster käivitatakse kohe, kui see on määratletud. Oluline on märkida, et mooduli muster koosneb kahest erinevast osast.

Esimest jaotist kasutatakse privaatsete muutujate ja funktsioonide deklareerimiseks, millele pääseb juurde ainult moodulimustri piires.

Teine jaotis koosneb tagastusväärtusest, mis sisaldab avalikke muutujaid ja funktsioone, millele pääseb juurde väljaspool mooduli mustrit.

Mooduli mustri kasutamine rakenduse loomiseks

Mõelge lihtsale rakendusele, näiteks ülesannete haldurile. Kasutades moodulimustrit, peate iga sektsiooni jaoks looma kohandatud moodulid. Need võivad hõlmata järgmist:

Ülesande kontroller
UI kontroller
Salvestuskontroller
Rakenduse kontroller

Seotud: Programmeerimisprojektid algajatele

Iga uue ülesande loomiseks kasutatakse ülesannete kontrollerit. Kasutajaliidese kontrollerit kasutatakse kasutajaliidesega seotud funktsioonide juhtimiseks, näiteks nupuvajutuse kuulamiseks või kuvatava muutmiseks. Salvestuskontrollerit kasutatakse iga uue ülesande salvestamiseks andmebaasi. Rakenduse käivitamiseks kasutatakse rakenduse moodulit.

Mooduli mustri kasutamine kasutajaliidese kontrolleri näite loomiseks

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

Ülaltoodud näide näitab selgelt kahte jaotist, mis on moodulimustris - privaatne ja avalik.

Funktsiooni privaatses osas on komponendimuutuja ja changeComponent funktsioon mõlemad privaatsed. Seega, kui soovite muuta kogu veebilehe h1 teksti, saate järgmise koodi kirjutamisel vea.

Vale viis muutmiskomponendi käivitamiseks

  
UIController.changeComponent();

Veateade ütleb selgesõnaliselt, et changeComponent () ei ole funktsiooni UIController funktsioon. See on mooduli mustri ilu; privaatses jaotises loodud muutujatele ja funktsioonidele ei pääse kunagi otse selle funktsiooni reguleerimisalast välja.

Kuigi privaatmuutujatele ei saa otse juurde pääseda, saab neile siiski kaudselt juurde pääseda (avalikust jaotisest). Ülaltoodud kasutajaliidese kontrolleri näitest võib järeldada, et mooduli mustri avalik osa on alati märgitud tagastamisomadusega.

Tagastamisomaduste parameetrite piires saame nüüd kaudse juurdepääsu funktsioonile changeComponent. Nüüd saame kasutada järgmist koodirida (ülaltoodud moodulimustriga), et muuta sihitud veebilehe kogu tekst h1 asendustekstiks.

ChangeComponent näide õige viis

  
UIController.callChangeComponent();

Tehase muster

Tehase muster (tuntud ka kui tehase meetod) on veel üks populaarne JavaScripti disainimuster. Mooduli muster särab, kui on vaja andmete kapseldamist, ja tehase muster on kõige kasulikum juhtudel, kui tegemist on erinevate objektide kogumiga, mis on mõnes aspektis sarnased.

Tulles tagasi meie ülaltoodud ülesannete halduri juurde; kui lubaksime kasutajal määrata igale loodud ülesandele tüübi, siis saaksime selle rakenduse aspekti (üsna tõhusalt) tehase mustrit kasutades luua

Tehase mustri kasutamine ülesandetüübi määramiseks

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

Ülaltoodud kood kasutab tehase meetodit uute ülesannete loomiseks, tüübi kontrollimiseks (kiireloomuline või tühine) ja sobiva atribuudi määramiseks enne uue ülesande printimist konsooli.

Sisemine funktsioon createTask seab aluse mitme ülesande samaaegseks loomiseks, kuid enne uute ülesannete loomist on vaja lisakoodi, mille peame projekti sellesse sektsiooni lisama.

Ülaltoodud koodis loome uue UrgentTaski või uue Trivialtaski, kui teatud tingimus on täidetud. Meie projektis pole aga ühtegi nende nimedega funktsiooni ega klassi - selle probleemi saab hõlpsasti lahendada, lisades meie projektile järgmise koodi.

Looge kiireloomulisi ja triviaalseid ülesannetüüpe

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

Ülaltoodud koodi tõttu saame nüüd igale uuele ülesandele määrata atribuudi UrgentTask või TrivialTask. Järgmine samm on nüüd uue ülesande loomine, kuid enne seda peame looma andmebaasi, et salvestada iga uus ülesanne nii, nagu see on loodud.

Arvestades, et andmebaasi loomine on iseenesest terve artikkel, asendame andmebaasi andmestruktuuriga (massiiviga).

Massiivi näite loomine

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

Nüüd saame lõpuks uue ülesande luua.

Uute ülesannete loomise näide

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

Ülaltoodud koodiga saate nüüd luua kaks uut ülesannet, kasutades meie loodud funktsiooni TaskFactory. Iga uue ülesande loomisel on atribuudid (nimi ja tüüp) möödunud funktsioonist createTask, mis asub funktsioonis TaskFactory, mille lõime tehase mustri abil.

Pärast seda, kui iga ülesanne on TaskFactory kaudu läbinud ja sellele on määratud sobiva tüübi atribuut. Seejärel lükatakse see ülesannete massiivi, mille lõime varem.

Meie ainus dilemma on nüüd see, kuidas me teame, et need kaks ülesannet loodi või et meie tehase muster töötas? Kui oleksime kasutanud andmebaasi, saaksime lihtsalt andmebaasi kontrollida, kas kaks uut ülesannet on loodud.

Minge tagasi ülaltoodud näite 'Tehase mustri kasutamine ülesande tüübi määramiseks', otse ülesande ja selle tüübi printimiseks konsooli kommentaari alla, on väike ülesanne. Defineerige funktsioon, mis loodi massiivi iga ülesande printimiseks konsooli kasutades järgmist massiivi meetod .

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

Te peaksite nägema, et teie konsoolis kuvatakse järgmine väljund.

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

Nüüd saate oma JavaScripti projektides kasutada disainimustreid

Selles etapis peaksite mõistma JavaScripti disainimustreid ja mõistma, kuidas kujundusmustreid saab kasutada korduvkasutatava koodi loomiseks ja kõigi projektis osalevate arendajate elu hõlbustamiseks.

Nüüd teate, kuidas kaks populaarset JavaScripti kujundusmustrit töötavad, peaksite saama neid rakenduse arendamiseks tõhusalt rakendada.

Pildikrediit: Alltechbuzz/ Pixabay

kuidas testida, kas kõvaketas ebaõnnestub

Jaga Jaga Piiksuma E -post Muutujate deklareerimine JavaScriptis

JavaScriptiga alustamiseks peate aru saama muutujatest. Siin on kolm võimalust JavaScriptis muutujate deklareerimiseks.

Loe edasi Seotud teemad

Programmeerimine
JavaScript

Autori kohta Kadeisha Kean(Avaldatud 21 artiklit)

Kadeisha Kean on täispinu tarkvaraarendaja ja tehniline/tehnoloogiline kirjutaja. Tal on selge võime lihtsustada mõnda kõige keerukamat tehnoloogilist kontseptsiooni; materjali tootmine, millest igale tehnoloogia algajale on lihtne aru saada. Ta on kirglik kirjutamise, huvitava tarkvara arendamise ja maailmas reisimise vastu (dokumentaalfilmide kaudu).

Veel Kadeisha Keanilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin