So erstellen Sie wiederverwendbaren Code in JavaScript mithilfe von Entwurfsmustern
Wenn Sie jemals wiederverwendbaren JavaScript-Code erstellen oder mit einem Entwicklerteam zusammenarbeiten möchten, müssen Sie wissen, wie die verschiedenen Entwurfsmuster in der Sprache verwendet und identifiziert werden.
In JavaScript bezieht sich der Begriff Entwurfsmuster auf eine bestimmte Art des Codeschreibens und wird häufig als Programmiervorlage angesehen. Das Interessante ist, dass das Label „Design Pattern“ auf alles angewendet werden kann, von einer gesamten Anwendung bis zu einem einfachen Codeblock.
Das Entwurfsmuster ist ein weit gefasstes Thema, aber wenn Sie das Modulmuster und die Factory-Methode verstehen, sollten Sie sich damit auseinandersetzen.
Das Modulmuster
JavaScript-Module wurden 2009 mit der ES5-Version der Programmiersprache eingeführt. Mithilfe von Modulen konnten Entwickler nun benutzerdefinierte Codeteile erstellen und exportieren, um sie in anderen Abschnitten einer JavaScript-Anwendung zu verwenden.
Die Grundstruktur des Modulmusters
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})();Im obigen Beispiel sind Modulmuster immer in einem sofort aufgerufenen Funktionsausdruck (IIFE) eingeschlossen. Dies bedeutet, dass ein Modulmuster ausgeführt wird, sobald es definiert ist. Wichtig ist, dass das Modulmuster aus zwei unterschiedlichen Abschnitten besteht.
Im ersten Abschnitt werden private Variablen und Funktionen deklariert, auf die nur im Rahmen des Modulmusters zugegriffen werden kann.
Der zweite Abschnitt besteht aus einem Rückgabewert, der öffentliche Variablen und Funktionen enthält, auf die außerhalb des Bereichs des Modulmusters zugegriffen werden kann.
Verwenden des Modulmusters zum Erstellen einer Anwendung
Stellen Sie sich eine einfache Anwendung wie einen Task-Manager vor. Mithilfe des Modulmusters müssen Sie für jeden Abschnitt benutzerdefinierte Module erstellen. Dies können sein:
- Ein Task-Controller
- Ein UI-Controller
- Ein Speichercontroller
- Ein App-Controller
Der Task-Controller wird verwendet, um jede neue Task zu erstellen. Der UI-Controller wird verwendet, um die UI-bezogenen Funktionen zu steuern, z. B. das Abhören eines Klicks auf eine Schaltfläche oder das Ändern der angezeigten Funktionen. Der Speichercontroller wird verwendet, um jede neue Aufgabe in einer Datenbank zu speichern. Das App-Modul wird zum Ausführen der Anwendung verwendet.
Verwenden des Modulmusters zum Erstellen eines UI-Controller-Beispiels
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();
}
}
})();
Das obige Beispiel zeigt deutlich die beiden Abschnitte, die sich in einem Modulmuster befinden – privat und öffentlich.
Im privaten Bereich der Funktion sind sowohl die Komponentenvariable als auch die Funktion changeComponent privat. Wenn Sie daher den gesamten h1-Text auf einer Webseite ändern möchten, wird eine Fehlermeldung angezeigt, wenn Sie den folgenden Code schreiben.
Falsche Methode zum Aufrufen des changeComponent-Beispiels
UIController.changeComponent();
In der Fehlermeldung wird explizit angegeben, dass changeComponent () keine Funktion der UIController-Funktion ist. Dies ist die Schönheit des Modulmusters; Auf die Variablen und Funktionen, die im privaten Bereich erstellt werden, wird außerhalb des Funktionsumfangs niemals direkt zugegriffen.
Auf private Variablen kann zwar nicht direkt zugegriffen werden, auf sie kann jedoch indirekt zugegriffen werden (aus dem öffentlichen Bereich). Ein Beispiel aus dem obigen UI-Controller-Beispiel ist, dass der öffentliche Abschnitt im Modulmuster immer durch die return-Eigenschaft gekennzeichnet ist.
Innerhalb der Parameter der return-Eigenschaft können wir jetzt indirekten Zugriff auf die changeComponent-Funktion erhalten. Wir können jetzt die folgende Codezeile (mit dem obigen Modulmuster) verwenden, um den gesamten h1-Text auf einer Zielwebseite effektiv in "Ersatztext" zu ändern.
Richtige Methode zum Aufrufen des changeComponent-Beispiels
UIController.callChangeComponent();
Das Fabrikmuster
Das Factory-Muster (auch als Factory-Methode bezeichnet) ist ein weiteres beliebtes JavaScript-Entwurfsmuster. Das Modulmuster leuchtet, wenn eine Datenkapselung erforderlich ist, und das Factory-Muster ist am nützlichsten in Fällen, in denen es sich um eine Sammlung verschiedener Objekte handelt, die in einigen Aspekten ähnlich sind.
Zurück zu unserem Task-Manager oben; Wenn wir dem Benutzer erlauben würden, jeder erstellten Aufgabe einen Typ zuzuweisen, könnten wir diesen Aspekt der App (ziemlich effizient) unter Verwendung des Factory-Musters erstellen
Verwenden des Factory-Musters zum Zuweisen eines Beispiels für einen Aufgabentyp
//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
}
}Der obige Code verwendet die Factory-Methode, um neue Aufgaben zu erstellen, den Typ (dringend oder trivial) zu überprüfen und die entsprechende Eigenschaft zuzuweisen, bevor die neue Aufgabe auf der Konsole gedruckt wird.
Die innere Funktion createTask legt die Bühne für die gleichzeitige Erstellung mehrerer Aufgaben fest. Bevor wir jedoch versuchen, neue Aufgaben zu erstellen, müssen wir zusätzlichen Code in diesen Abschnitt des Projekts aufnehmen.
Im obigen Code erstellen wir eine neue UrgentTask oder eine neue Trivialtask, wenn eine bestimmte Bedingung erfüllt ist. Es gibt jedoch keine Funktion oder Klasse mit diesen Namen in unserem Projekt. Dieses Problem kann leicht gelöst werden, indem der folgende Code in unser Projekt eingefügt wird.
Erstellen Sie dringende und triviale Aufgabentypen
//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"
}
Aufgrund des obigen Codes können wir jetzt jeder neu erstellten Aufgabe die Eigenschaft UrgentTask oder TrivialTask zuweisen. Der nächste Schritt besteht darin, jetzt eine neue Aufgabe zu erstellen. Zuvor müssen wir jedoch eine Datenbank erstellen, um jede neue Aufgabe beim Erstellen zu speichern.
Da das Erstellen einer Datenbank ein ganzer Artikel für sich ist, ersetzen wir eine Datenbank durch eine Datenstruktur (ein Array).
Erstellen eines Array-Beispiels
//create an array to host the different task
const task = [];
Jetzt können wir endlich eine neue Aufgabe erstellen.
Beispiel für das Erstellen neuer Aufgaben
//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'));
Mit dem obigen Code können Sie jetzt zwei neue Aufgaben mit der von uns ursprünglich erstellten TaskFactory-Funktion erstellen. Wenn wir jede neue Aufgabe erstellen, werden die Eigenschaften (Name und Typ) an die Funktion createTask übergeben, die sich in der TaskFactory-Funktion befindet, die wir mithilfe des Factory-Musters erstellt haben.
Nachdem jede Aufgabe ihren Weg durch die TaskFactory gefunden hat und ihr die entsprechende Typeneigenschaft zugewiesen wurde. Es wird dann in das zuvor erstellte Task-Array verschoben.
Unser einziges Dilemma ist jetzt, woher wissen wir, dass diese beiden Aufgaben erstellt wurden oder dass unser Fabrikmuster funktioniert hat? Wenn wir eine Datenbank verwendet hätten, könnten wir einfach die Datenbank überprüfen, um festzustellen, ob zwei neue Aufgaben erstellt wurden.
Gehen Sie zurück zu "Verwenden des Factory-Musters zum Zuweisen eines Aufgabentypbeispiels" oben, direkt unter dem Kommentar "Zum Drucken der Aufgabe und ihres Typs auf der Konsole". Es wurde eine kleine Funktion "task.define" erstellt Drucken Sie jede Aufgabe im Array mit der folgenden Array-Methode auf der Konsole aus.
//print each task to the console
task.forEach(function(task){
task.define();
});
Die folgende Ausgabe sollte in Ihrer Konsole angezeigt werden.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Jetzt können Sie Entwurfsmuster in Ihren JavaScript-Projekten verwenden
In dieser Phase sollten Sie Entwurfsmuster in JavaScript verstehen und verstehen, wie Entwurfsmuster verwendet werden können, um wiederverwendbaren Code zu erstellen und allen an einem Projekt beteiligten Entwicklern das Leben zu erleichtern.
Jetzt wissen Sie, wie zwei beliebte JavaScript-Entwurfsmuster funktionieren. Sie sollten sie effizient anwenden können, um eine Anwendung zu entwickeln.
Bildnachweis: Alltechbuzz / Pixabay