Home-theater-designers
Als u ooit herbruikbare JavaScript-code wilt maken of wilt samenwerken met een team van ontwikkelaars, moet u weten hoe u de verschillende ontwerppatronen in de taal kunt gebruiken en identificeren.
In JavaScript verwijst de term ontwerppatroon naar een specifieke manier om code te schrijven en wordt vaak gezien als een programmeersjabloon. Het interessante is dat het labelontwerppatroon op alles kan worden toegepast, van een hele applicatie tot een eenvoudig codeblok.
Ontwerppatroon is een breed onderwerp, maar door het modulepatroon en de fabrieksmethode te begrijpen, zou u er grip op moeten krijgen.
Het modulepatroon
JavaScript-modules werden in 2009 geïntroduceerd met de ES5-versie van de programmeertaal. Met behulp van modules konden ontwikkelaars nu aangepaste stukjes code maken en deze exporteren voor gebruik in andere secties van een JavaScript-toepassing.
De basisstructuur van het modulepatroon
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})(); In het bovenstaande voorbeeld zijn modulepatronen altijd ingesloten in een direct aangeroepen functie-uitdrukking (IIFE). Dit betekent dat een modulepatroon wordt uitgevoerd zodra het is gedefinieerd. Het belangrijkste om op te merken is dat het modulepatroon uit twee verschillende secties bestaat.
De eerste sectie wordt gebruikt om privévariabelen en functies te declareren, die alleen toegankelijk zijn binnen het bereik van het modulepatroon.
De tweede sectie bestaat uit een retourwaarde die openbare variabelen en functies omsluit die toegankelijk zijn buiten het bereik van het modulepatroon.
Het modulepatroon gebruiken om een toepassing te maken
Overweeg een eenvoudige toepassing zoals een taakbeheerder. Met behulp van het modulepatroon moet u voor elke sectie aangepaste modules maken. Deze kunnen zijn:
- Een taakcontroller
- Een UI-controller
- Een opslagcontroller
- Een app-controller
Verwant: Programmeerprojecten voor beginners
De taakcontroller wordt gebruikt om elke nieuwe taak te maken. De UI-controller wordt gebruikt om de UI-gerelateerde functies te besturen, zoals luisteren naar een klik op een knop of het wijzigen van wat wordt weergegeven. De opslagcontroller wordt gebruikt om elke nieuwe taak op te slaan in een database. De app-module wordt gebruikt om de applicatie uit te voeren.
Het modulepatroon gebruiken om een UI-controllervoorbeeld te maken
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();
}
}
})();
Het bovenstaande voorbeeld toont duidelijk de twee secties die binnen een modulepatroon worden gevonden: privé en openbaar.
In het privégedeelte van de functie zijn de componentvariabele en de functie changeComponent beide privé. Daarom, als u alle h1-tekst op een webpagina zou willen wijzigen, zou u een foutmelding krijgen als u de volgende code zou schrijven.
Onjuiste manier om het changeComponent-voorbeeld aan te roepen
UIController.changeComponent();
Het foutbericht vermeldt expliciet dat changeComponent() geen functie is van de UIController-functie. Dit is het mooie van het modulepatroon; de variabelen en functies die in het privégedeelte zijn gemaakt, zullen nooit rechtstreeks worden benaderd buiten het bereik van die functie.
Hoewel privévariabelen niet direct toegankelijk zijn, zijn ze wel indirect toegankelijk (vanuit het openbare gedeelte). Een afhaalpunt van het bovenstaande voorbeeld van de UI-controller is dat de openbare sectie in het modulepatroon altijd wordt gemarkeerd door de eigenschap return.
Binnen de parameters van de return-eigenschap kunnen we nu indirect toegang krijgen tot de changeComponent-functie. We kunnen nu de volgende regel code gebruiken (met het modulepatroon hierboven) om alle h1-tekst op een gerichte webpagina effectief te wijzigen in vervangende tekst.
Correcte manier om het changeComponent-voorbeeld aan te roepen
UIController.callChangeComponent();
Het fabriekspatroon
Het fabriekspatroon (ook bekend als de fabrieksmethode) is een ander populair JavaScript-ontwerppatroon. Het modulepatroon schijnt wanneer gegevensinkapseling vereist is, en het fabriekspatroon is het nuttigst in gevallen waarin we te maken hebben met een verzameling verschillende objecten die in sommige opzichten vergelijkbaar zijn.
Teruggaand naar onze taakbeheerder hierboven; als we de gebruiker zouden toestaan om een type toe te wijzen aan elke taak die wordt gemaakt, dan zouden we dat aspect van de app (vrij efficiënt) kunnen maken met behulp van het fabriekspatroon
Het fabriekspatroon gebruiken om een taaktype toe te wijzen Voorbeeld
//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
}
}De bovenstaande code gebruikt de fabrieksmethode om nieuwe taken aan te maken, het type (dringend of triviaal) te controleren en de juiste eigenschap toe te wijzen voordat de nieuwe taak naar de console wordt afgedrukt.
De innerlijke functie createTask stelt de basis voor meerdere taken die tegelijkertijd moeten worden gemaakt, maar voordat we nieuwe taken proberen te maken, is er wat extra code die we in dit gedeelte van het project moeten opnemen.
In de bovenstaande code maken we een nieuwe UrgentTask of een nieuwe Trivialtask aan als aan een specifieke voorwaarde is voldaan. Er is echter geen functie of klasse met deze namen in ons project - dit probleem kan eenvoudig worden opgelost door de volgende code in ons project te introduceren.
Urgente en triviale taaktypen maken
//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'
}
Vanwege de bovenstaande code kunnen we nu de eigenschap UrgentTask of TrivialTask toewijzen aan elke nieuwe taak die wordt gemaakt. De volgende stap is om nu een nieuwe taak te maken, maar daarvoor moeten we een database maken om elke nieuwe taak op te slaan zoals deze is gemaakt.
Aangezien het maken van een database een heel artikel op zich is, vervangen we een database door een datastructuur (een array).
Een matrixvoorbeeld maken
//create an array to host the different task
const task = [];
Nu kunnen we eindelijk een nieuwe taak aanmaken.
Voorbeeld nieuwe taken maken
//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'));
Met de bovenstaande code kun je nu twee nieuwe taken maken met behulp van de TaskFactory-functie die we in eerste instantie hebben gemaakt. Wanneer we elke nieuwe taak maken, worden de eigenschappen (naam en type) doorgegeven aan de createTask-functie, die zich bevindt in de TaskFactory-functie die we hebben gemaakt met behulp van het fabriekspatroon.
Nadat elke taak zijn weg heeft gevonden door de TaskFactory en de juiste type-eigenschap eraan is toegewezen. Het wordt vervolgens in de taakmatrix geduwd die we eerder hebben gemaakt.
Ons enige dilemma is nu: hoe weten we dat die twee taken zijn gemaakt of dat ons fabriekspatroon werkte? Als we een database hadden gebruikt, konden we de database eenvoudig controleren om te zien of er twee nieuwe taken waren gemaakt.
Ga terug naar het voorbeeld van het gebruik van het fabriekspatroon om een taaktype toe te wijzen hierboven, direct onder het voorbeeld dat wordt gebruikt om de taak en het type ervan af te drukken in de consolecommentaar, is er een kleine task.define-functie die is gemaakt om elke taak in de array af te drukken naar de console met behulp van het volgende: matrix methode: .
//print each task to the console
task.forEach(function(task){
task.define();
});
U zou de volgende uitvoer in uw console moeten zien verschijnen.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Nu kunt u ontwerppatronen gebruiken in uw JavaScript-projecten
In dit stadium moet u ontwerppatronen in JavaScript begrijpen en begrijpen hoe ontwerppatronen kunnen worden gebruikt om herbruikbare code te maken en het leven van alle ontwikkelaars die bij een project betrokken zijn gemakkelijker te maken.
Nu je weet hoe twee populaire JavaScript-ontwerppatronen werken, zou je ze efficiënt moeten kunnen toepassen om een applicatie te ontwikkelen.
Afbeelding tegoed: Alltechbuzz/ Pixabay
hoe meerdere nummers op spotify te selecterenDeel Deel Tweeten E-mail Variabelen declareren in JavaScript
Om met JavaScript aan de slag te gaan, moet u variabelen begrijpen. Hier zijn drie manieren om variabelen in JavaScript te declareren.
Lees volgende Gerelateerde onderwerpen- Programmeren
- JavaScript
Kadeisha Kean is een full-stack softwareontwikkelaar en technisch/technologisch schrijver. Ze heeft het onmiskenbare vermogen om enkele van de meest complexe technologische concepten te vereenvoudigen; materiaal produceren dat gemakkelijk kan worden begrepen door elke nieuwe technologie-beginner. Ze is gepassioneerd door schrijven, interessante software ontwikkelen en de wereld rondreizen (via documentaires).
Meer van Kadeisha KeanAbonneer op onze nieuwsbrief
Word lid van onze nieuwsbrief voor technische tips, recensies, gratis e-boeken en exclusieve deals!
Klik hier om je te abonneren