Home-theater-designers
Wenn Sie jemals wiederverwendbaren JavaScript-Code erstellen oder mit einem Entwicklerteam zusammenarbeiten möchten, müssen Sie wissen, wie Sie die verschiedenen Designmuster in der Sprache verwenden und identifizieren.
In JavaScript bezieht sich der Begriff Entwurfsmuster auf eine bestimmte Art des Schreibens von Code und wird oft als Programmiervorlage angesehen. Das Interessante daran ist, dass das Etikettendesignmuster auf alles angewendet werden kann, von einer gesamten Anwendung bis hin zu einem einfachen Codeblock.
Design Pattern ist ein breites Thema, aber wenn Sie das Modul Pattern 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 benutzerdefinierten Code erstellen und zur Verwendung in anderen Abschnitten einer JavaScript-Anwendung exportieren.
Die Grundstruktur des Modulmusters
(function(){
//Declare private variables and functions
//Declare and return public variables and functions
})(); Im obigen Beispiel werden Modulmuster immer in einen unmittelbar aufgerufenen Funktionsausdruck (IIFE) eingeschlossen. Dies bedeutet, dass ein Modulmuster ausgeführt wird, sobald es definiert ist. Es ist wichtig zu beachten, 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 einschließt, auf die außerhalb des Gültigkeitsbereichs des Modulmusters zugegriffen werden kann.
Verwenden des Modulmusters zum Erstellen einer Anwendung
Betrachten Sie eine einfache Anwendung wie einen Task-Manager. Mit dem Modulmuster müssen Sie benutzerdefinierte Module für jeden Abschnitt erstellen. Dazu können gehören:
- Ein Aufgabencontroller
- Ein UI-Controller
- Ein Speichercontroller
- Ein App-Controller
Verwandt: Programmierprojekte für Anfänger
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. auf das Klicken einer Schaltfläche zu hören oder die Anzeige zu ändern. Der Speichercontroller wird verwendet, um jede neue Aufgabe in einer Datenbank zu speichern. Das App-Modul wird verwendet, um die Anwendung auszuführen.
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 innerhalb eines Modulmusters befinden – private und öffentliche.
Im privaten Abschnitt der Funktion sind die Komponentenvariable und die Funktion changeComponent beide privat. Wenn Sie also den gesamten h1-Text auf einer Webseite ändern möchten, erhalten Sie eine Fehlermeldung, 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 Abschnitt erstellt werden, wird außerhalb des Geltungsbereichs dieser Funktion niemals direkt zugegriffen.
Auf private Variablen kann zwar nicht direkt zugegriffen werden, jedoch kann auf sie indirekt (aus dem öffentlichen Bereich) zugegriffen werden. Ein Auszug 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 nun indirekt auf die Funktion changeComponent zugreifen. Wir können jetzt die folgende Codezeile (mit dem obigen Modulmuster) verwenden, um den gesamten h1-Text auf einer Ziel-Webseite effektiv in Ersatztext zu ändern.
Richtige Methode zum Aufrufen des changeComponent-Beispiels
UIController.callChangeComponent();
Das Fabrikmuster
Das Factory-Muster (auch als Factory-Methode bekannt) ist ein weiteres beliebtes JavaScript-Designmuster. Das Modulmuster glänzt, wenn eine Datenkapselung erforderlich ist, und das Fabrikmuster ist am nützlichsten, wenn wir es mit einer Sammlung verschiedener Objekte zu tun haben, 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) mit dem Fabrikmuster erstellen
Verwenden des Fabrikmusters zum Zuweisen eines Aufgabentypbeispiels
//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 an die Konsole gedruckt wird.
Die innere Funktion createTask legt die Bühne für die gleichzeitige Erstellung mehrerer Aufgaben fest, aber bevor wir versuchen, neue Aufgaben zu erstellen, müssen wir in diesem Abschnitt des Projekts zusätzlichen Code einfügen.
Im obigen Code erstellen wir eine neue UrgentTask oder eine neue Trivialtask, wenn eine bestimmte Bedingung erfüllt ist. In unserem Projekt gibt es jedoch keine Funktion oder Klasse mit diesen Namen – dieses Problem kann leicht gelöst werden, indem Sie den folgenden Code in unser Projekt einfügen.
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 nun darin, eine neue Aufgabe zu erstellen, aber vorher müssen wir eine Datenbank erstellen, um jede neue Aufgabe so zu speichern, wie sie erstellt wird.
Da das Erstellen einer Datenbank an sich ein ganzer Artikel 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 mit der ursprünglich erstellten TaskFactory-Funktion zwei neue Aufgaben erstellen. Wenn wir jede neue Aufgabe erstellen, werden die Eigenschaften (Name und Typ) an die createTask-Funktion übergeben, die sich in der TaskFactory-Funktion befindet, die wir mit dem Factory-Muster erstellt haben.
Nachdem jede Aufgabe die TaskFactory durchlaufen hat und ihr die entsprechende Typeneigenschaft zugewiesen wurde. Es wird dann in das Task-Array verschoben, das wir zuvor erstellt haben.
Unser einziges Dilemma ist jetzt, woher wir wissen, 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 zu sehen, ob zwei neue Aufgaben erstellt wurden.
Gehen Sie zurück zum Beispiel mit dem Factory-Muster zum Zuweisen eines Aufgabentyps oben, direkt unter dem zum Drucken der Aufgabe und ihres Typs zum Konsolenkommentar verwendet, gibt es eine kleine Funktion task.define, die erstellt wurde, um jede Aufgabe im Array zu drucken an die Konsole mit folgendem Array-Methode .
//print each task to the console
task.forEach(function(task){
task.define();
});
Sie sollten die folgende Ausgabe in Ihrer Konsole sehen.
Clean the house (urgent): as soon as possible
Reach level 30 in Candy Crush (trivial): when you can
Jetzt können Sie Designmuster in Ihren JavaScript-Projekten verwenden
In dieser Phase sollten Sie Designmuster in JavaScript verstehen und verstehen, wie Designmuster verwendet werden können, um wiederverwendbaren Code zu erstellen und allen an einem Projekt beteiligten Entwicklern das Leben zu erleichtern.
Nachdem Sie nun wissen, wie zwei beliebte JavaScript-Entwurfsmuster funktionieren, sollten Sie in der Lage sein, sie effizient zur Entwicklung einer Anwendung anzuwenden.
Bildquelle: Alltechbuzz/ Pixabay
So deaktivieren Sie den Schnellstart von Windows 10Teilen Teilen Tweet Email So deklarieren Sie Variablen in JavaScript
Um mit JavaScript zu beginnen, müssen Sie Variablen verstehen. Hier sind drei Möglichkeiten, Variablen in JavaScript zu deklarieren.
Weiter lesen Verwandte Themen- Programmierung
- JavaScript
Kadeisha Kean ist Full-Stack-Softwareentwicklerin und technische/Technologie-Autorin. Sie hat die ausgeprägte Fähigkeit, einige der komplexesten technologischen Konzepte zu vereinfachen; Herstellung von Material, das von jedem Technikneuling leicht verstanden werden kann. Sie schreibt leidenschaftlich gerne, entwickelt interessante Software und bereist die Welt (durch Dokumentationen).
Mehr von Kadeisha KeanAbonniere unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich zu abonnieren