Hur man skapar återanvändbar kod i JavaScript med hjälp av designmönster

Hur man skapar återanvändbar kod i JavaScript med hjälp av designmönster

Om du någonsin vill skapa återanvändbar JavaScript -kod eller samarbeta med ett team av utvecklare måste du veta hur du använder och identifierar de olika designmönstren på språket.





I JavaScript hänvisar termen designmönster till ett specifikt sätt att skriva kod och ses ofta som en programmeringsmall. Det intressanta är att etikettdesignmönstret kan appliceras på allt från en hel applikation till ett enkelt kodblock.



Designmönster är ett brett ämne, men genom att förstå modulmönstret och fabriksmetoden bör du ta tag i det.





Modulmönstret

JavaScript -moduler introducerades 2009, med ES5 -versionen av programmeringsspråket. Med hjälp av moduler kunde utvecklare nu skapa anpassade kodbitar och exportera dem för att användas i andra delar av en JavaScript -applikation.

Grundstrukturen för modulmönstret


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

I exemplet ovan är modulmönster alltid inneslutna i ett omedelbart påkallat funktionsuttryck (IIFE). Detta innebär att ett modulmönster körs så snart det definieras. Det viktiga att notera är att modulmönstret består av två olika sektioner.



Det första avsnittet används för att deklarera privata variabler och funktioner, som endast kan nås inom ramen för modulmönstret.

Det andra avsnittet består av ett returvärde som omsluter offentliga variabler och funktioner som kan nås utanför modulmönstret.



Använda modulmönstret för att skapa en applikation

Tänk på en enkel applikation, till exempel en uppgiftshanterare. Med modulmönstret måste du skapa anpassade moduler för varje avsnitt. Dessa kan inkludera:

  • En uppgiftsansvarig
  • En UI -kontroller
  • En lagringskontroller
  • En appkontrollant

Relaterad: Programmeringsprojekt för nybörjare



Uppgiftsstyrenheten kommer att användas för att skapa varje ny uppgift. UI-kontrollen kommer att användas för att styra UI-relaterade funktioner, till exempel att lyssna efter ett klick på en knapp eller ändra vad som visas. Lagringskontrollen kommer att användas för att spara varje ny uppgift i en databas. Appmodulen kommer att användas för att köra applikationen.

Använda modulmönstret för att skapa ett användargränssnittsexempel


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

Exemplet ovan visar tydligt de två sektioner som finns inom ett modulmönster - privat och offentligt.

I den privata sektionen av funktionen är komponentvariabeln och funktionen changeComponent båda privata. Därför, om du ville ändra all h1 -text på en webbsida skulle du få ett fel om du skulle skriva följande kod.

Fel sätt att åberopa changeComponent -exemplet


UIController.changeComponent();

Felmeddelandet anger uttryckligen att changeComponent () inte är en funktion av UIController -funktionen. Detta är det fina med modulmönstret; variablerna och funktionerna som skapas i det privata avsnittet kommer aldrig att nås direkt utanför funktionens omfattning.

Även om privata variabler inte kan nås direkt, kan de dock komma indirekt åt (från den offentliga sektionen). En takeaway från UI -styrenhetsexemplet ovan är att den offentliga sektionen i modulmönstret alltid är markerad av returegenskapen.

Inom parametrarna för returegenskapen kan vi nu få indirekt åtkomst till funktionen changeComponent. Vi kan nu använda följande kodrad (med modulmönstret ovan) för att effektivt ändra all h1 -text på en riktad webbsida till ersättningstext.

Korrekt sätt att åberopa changeComponent -exemplet


UIController.callChangeComponent();

Fabriksmönstret

Fabriksmönstret (även känt som fabriksmetoden) är ett annat populärt JavaScript -mönster. Modulmönstret lyser när datakapsling krävs, och fabriksmönstret är mest användbart i de fall då vi har att göra med en samling olika objekt som är likartade i vissa aspekter.

Återgår till vår uppgiftshanterare ovan; om vi skulle tillåta användaren att tilldela en typ till varje uppgift som skapas, då skulle vi kunna skapa den aspekten av appen (ganska effektivt) med hjälp av fabriksmönstret

Använda fabriksmönstret för att tilldela ett exempel på uppgiftstyp


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

Koden ovan använder fabriksmetoden för att skapa nya uppgifter, kontrollera typen (brådskande eller trivial) och tilldela lämplig egenskap innan den nya uppgiften skrivs ut till konsolen.

Den inre funktionen createTask, sätter scenen för att flera uppgifter ska skapas samtidigt, men innan vi försöker skapa några nya uppgifter finns det ytterligare en kod som vi måste inkludera i detta avsnitt av projektet.

I koden ovan skapar vi en ny UrgentTask eller en ny Trivialtask om ett specifikt villkor är uppfyllt. Det finns dock ingen funktion eller klass med dessa namn i vårt projekt - det här problemet kan enkelt lösas genom att introducera följande kod till vårt projekt.

Skapa brådskande och triviala uppgiftstyper


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

På grund av koden ovan kan vi nu tilldela egenskapen UrgentTask eller TrivialTask ​​till varje ny uppgift som skapas. Nästa steg är att nu skapa en ny uppgift, men innan dess måste vi skapa en databas för att lagra varje ny uppgift när den skapas.

Med tanke på att att skapa en databas är en hel artikel i sig, kommer vi att ersätta en databas med en datastruktur (en array).

Skapa ett Array -exempel


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

Nu kan vi äntligen skapa en ny uppgift.

Skapa nya uppgifter Exempel


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

Med koden ovan kan du nu skapa två nya uppgifter med hjälp av funktionen TaskFactory som vi skapade inledningsvis. När vi skapar varje ny uppgift är egenskaperna (namn och typ) förbi till createTask -funktionen, som finns i TaskFactory -funktionen som vi skapade med fabriksmönstret.

Efter att varje uppgift har tagit sig igenom TaskFactory och rätt egenskap har tilldelats den. Det skjuts sedan in i uppgiftsmatrisen som vi skapade tidigare.

Vårt enda dilemma nu är hur vet vi att dessa två uppgifter skapades eller att vårt fabriksmönster fungerade? Om vi ​​hade använt en databas kunde vi helt enkelt kontrollera databasen för att se om två nya uppgifter skapades.

Gå tillbaka till Använda fabriksmönstret för att tilldela ett exempel på uppgiftstyp ovan, direkt under det som används för att skriva ut uppgiften och dess typ till konsolkommentaren, det finns en liten task.define -funktion som skapades för att skriva ut varje uppgift i arrayen till konsolen med hjälp av följande matrismetod .


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

Du bör se följande utdata visas i din konsol.


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

Nu kan du använda designmönster i dina JavaScript -projekt

I detta skede bör du förstå designmönster i JavaScript och förstå hur designmönster kan användas för att skapa återanvändbar kod och göra livet enklare för alla utvecklare som är involverade i ett projekt.

Nu vet du hur två populära JavaScript -designmönster fungerar, du borde kunna använda dem effektivt för att utveckla en applikation.

Bildkredit: Alltechbuzz/ Pixabay

hur man laddar ner borstar på procreate
Dela med sig Dela med sig Tweet E-post Hur deklareras variabler i JavaScript

För att komma igång med JavaScript måste du förstå variabler. Här är tre sätt att deklarera variabler i JavaScript.

Läs Nästa Relaterade ämnen
  • Programmering
  • JavaScript
Om författaren Kadeisha Kean(21 artiklar publicerade)

Kadeisha Kean är en fullstack mjukvaruutvecklare och teknisk/teknikförfattare. Hon har den distinkta förmågan att förenkla några av de mest komplexa tekniska begreppen; producerar material som lätt kan förstås av någon nybörjare inom teknik. Hon brinner för att skriva, utveckla intressant programvara och resa runt i världen (genom dokumentärer).

Mer från Kadeisha Kean

Prenumerera på vårt nyhetsbrev

Gå med i vårt nyhetsbrev för tekniska tips, recensioner, gratis e -böcker och exklusiva erbjudanden!

Klicka här för att prenumerera