DIE 7 BESTEN JAVASCRIPT-DESIGNMUSTER, DIE SIE KENNEN SOLLTEN

Die 7 besten JavaScript-Designmuster, die Sie kennen sollten

7 beste JavaScript-Designmuster, die Sie kennen sollten - Designmuster in JavaScript sind wiederverwendbare Lösungen, die auf häufig auftretende Probleme beim Schreiben von JavaScript-Webanwendungen angewendet werden.

Einführung

Es ist durchaus angebracht, JavaScript-Entwurfsmuster als Vorlagen zu bezeichnen, um Lösungen für Probleme bereitzustellen, aber nicht ganz zu sagen, dass diese Muster die Entwickler ersetzen können.

Entwurfsmuster helfen, die Erfahrungen vieler Entwickler zu kombinieren, um den Code in einer optimierten Weise zu strukturieren, die den Problemen entspricht, für die wir Lösungen suchen, und geben ein gemeinsames Vokabular, das verwendet wird, um Lösungen für unsere Probleme zu beschreiben, als die Syntax und Semantik unseres Codes zu beschreiben.

JavaScript-Entwurfsmuster helfen Entwicklern, organisierte, schöne und gut strukturierte Codes zu schreiben. Obwohl Designmuster leicht wiederverwendet werden können, können sie Entwickler niemals ergänzen, sondern sie nur unterstützen, indem sie kleinere Probleme vermeiden, die zu großen Problemen bei der Entwicklung von Webanwendungen führen könnten, indem sie allgemeine Lösungen bereitstellen, die nicht an ein bestimmtes Thema gebunden sind Problem.

Sie verringern die gesamte Codebasis, indem unnötige Wiederholungen vermieden werden, wodurch unser Code robuster wird als die Ad-hoc-Lösungen.

In diesem Artikel werde ich die sieben besten und beliebtesten JavaScript-Designmuster untersuchen, von denen die meisten natürlich in drei Kategorien fallen, nämlich; Erstellung von Entwurfsmustern, strukturellen Entwurfsmustern und Verhaltensmustern. Ein Muster ist so etwas wie das folgende Bild; nur um dich mit dem Kontext vertraut zu machen.

1. Konstruktor-Entwurfsmuster.

Dies ist eine spezielle Methode, die verwendet wird, um die neu erstellten Objekte zu initialisieren, sobald ein Speicher zugewiesen wurde. Da JavaScript normalerweise objektorientiert ist, befasst es sich am meisten mit Objekten, daher beabsichtige ich, mich mit Objektkonstruktoren zu befassen. Es gibt drei Möglichkeiten, neue Objekte in JavaScript zu erstellen:

Das Folgende ist eine Möglichkeit, ein Konstruktor-Entwurfsmuster zu erstellen.

// This creates a new empty Object var newObject = {}; // This creates a new empty Object var newObject = Object.create(Object.prototype); var newObject = newObject();

Um auf die Eigenschaften einer Funktion zuzugreifen, müssen Sie das Objekt initialisieren.

const object = new ConstructorObject();

Wobei das neue Schlüsselwort oben JavaScript sagt, dass a|_+_|als Konstruktor fungieren soll. Vererbung ist eine Sache, die dieses Entwurfsmuster nicht unterstützt. Erfahren Sie mehr Details

Hier .

2. Prototypmuster

Das Prototypmuster basiert auf prototypischer Vererbung, wobei Objekte erstellt werden, um als Prototypen für andere Objekte zu fungieren. In Wirklichkeit fungieren Prototypen als Blaupause für jeden erstellten Objektkonstruktor.

Beispiel

constructorObject

3. Modulentwurfsmuster

Im Modulentwurfsmuster gibt es eine Verbesserung gegenüber dem Prototypmuster. Die verschiedenen Modifikatoren (sowohl private als auch öffentlich) werden im Modulmuster festgelegt. Sie können ähnliche Funktionen oder Eigenschaften ohne Konflikte erstellen. Es besteht die Flexibilität, Funktionen öffentlich umzubenennen. Der entmutigende Teil davon ist die Unfähigkeit, die erstellten Funktionen von der äußeren Umgebung zu überschreiben.

wie finde ich den link code auf meinem roku tv

Beispiel

var myCat= { name:'Ford Escort', brake:function(){ console.log('Stop! I am applying brakes'); } Panic : function (){ console.log ( 'wait. how do you stop thuis thing?') } } // use objec create to instansiate a new car var yourCar= object.create(myCar); //You can now see that one is a prototype of the other console.log (yourCar.name);]

4. Singleton-Muster

Dies ist in einem Szenario unerlässlich, in dem nur eine Instanz erstellt werden muss, beispielsweise eine Datenbankverbindung. Es ist nur möglich, eine Instanz zu erstellen, wenn die Verbindung geschlossen ist oder Sie stellen sicher, dass Sie die geöffnete Instanz schließen, bevor Sie eine neue öffnen. Dieses Muster wird auch als striktes Muster bezeichnet. Ein Nachteil dieses Musters ist seine entmutigende Erfahrung beim Testen aufgrund seiner versteckten Abhängigkeitsobjekte, die nicht leicht zum Testen ausgewählt werden können.

Beispiel

 function AnimalContainter () { const container = []; function addAnimal (name) { container.push(name); } function getAllAnimals() { return container; } function removeAnimal(name) { const index = container.indexOf(name); if(index <1) { throw new Error('Animal not found in container'); } container.splice(index, 1) } return { add: addAnimal, get: getAllAnimals, remove: removeAnimal } } const container = AnimalContainter(); container.add('Hen'); container.add('Goat'); container.add('Sheep'); console.log(container.get()) //Array(3) ['Hen', 'Goat', 'Sheep'] container.remove('Sheep') console.log(container.get()); //Array(2) ['Hen', 'Goat']

5. Fabrikmuster.

Es ist ein Creational, das sich mit der Erstellung von Objekten beschäftigt, ohne dass ein Konstruktor erforderlich ist. Es bietet eine generische Schnittstelle zum Erstellen von Objekten, in der wir den Typ der zu erstellenden Factory-Objekte angeben können. Daher geben wir nur das Objekt an und die Factory instanziiert es und gibt es zur Verwendung an uns zurück. Es ist ratsam, das Factory-Pattern zu verwenden, wenn die Einrichtung der Objektkomponente ein hohes Maß an Komplexität aufweist und wir je nach Umgebung, in der wir uns befinden, auf einfache Weise verschiedene Instanzen von Objekten erstellen möchten. Wir können auch Factory-Pattern verwenden, wenn wir mit vielen arbeiten kleine Objekte mit denselben Eigenschaften und beim Zusammensetzen von Objekten, die entkoppelt werden müssen.

Beispiel

function DatabaseConnection () { let databaseInstance = null; // tracks the number of instances created at a certain time let count = 0; function init() { console.log(`Opening database #${count + 1}`); //now perform operation } function createIntance() { if(databaseInstance == null) { databaseInstance = init(); } return databaseInstance; } function closeIntance() { console.log('closing database'); databaseInstance = null; } return { open: createIntance, close: closeIntance } } const database = DatabseConnection(); database.open(); //Open database #1 database.open(); //Open database #1 database.open(); //Open database #1 database.close(); //close database

6. Beobachtermuster

Das Designmuster des Beobachters ist praktisch an einem Ort, an dem Objekte gleichzeitig mit anderen Objektgruppen kommunizieren. Bei diesem Beobachtermuster gibt es kein unnötiges Pushen und Ziehen von Ereignissen über die Zustände hinweg, sondern die beteiligten Module ändern nur den aktuellen Datenzustand.

Beispiel

 // Dealer A DealerA = {}; DealerA.title = function title() { return 'Dealer A'; }; DealerA.pay = function pay(amount) { console.log( `set up configuration using username: ${this.username} and password: ${ this.password }` ); return `Payment for service ${amount} is successful using ${this.title()}`; }; //Dealer B DealerB = {}; DealerB.title = function title() { return 'Dealer B'; }; DealerB.pay = function pay(amount) { console.log( `set up configuration using username: ${this.username} and password: ${this.password}` ); return `Payment for service ${amount} is successful using ${this.title()}`; }; //@param {*} DealerOption //@param {*} config function DealerFactory(DealerOption, config = {}) { const dealer = Object.create(dealerOption); Object.assign(dealer, config); return dealer; } const dealerFactory = DealerFactory(DealerA, { username: 'user', password: 'pass' }); console.log(dealerFactory.title()); console.log(dealerFactory.pay(12)); const dealerFactory2 = DealerFactory(DealerB, { username: 'user2', password: 'pass2' }); console.log(dealerFactory2.title()); console.log(dealerFactory2.pay(50));

7. Befehlsmuster

Zusammenfassend würde ich sagen, dass das Befehlsdesignmuster meine 7 besten Summen von JavaScript-Designmustern beendet. Das Befehlsentwurfsmuster kapselt Methodenaufrufe, Operationen oder Anforderungen in ein einzelnes Objekt, sodass wir Methodenaufrufe nach eigenem Ermessen übergeben können. Das Befehlsentwurfsmuster gibt uns die Möglichkeit, Befehle von allem zu erteilen, das Befehle ausführt, und delegiert stattdessen die Verantwortung an verschiedene Objekte. Diese Befehle werden in |_+_| . dargestellt und |_+_| Format.

function Observer() { this.observerContainer = []; } Observer.prototype.subscribe = function (element) { this.observerContainer.push(element); } // the following removes an element from the container Observer.prototype.unsubscribe = function (element) { const elementIndex = this.observerContainer.indexOf(element); if (elementIndex > -1) { this.observerContainer.splice(elementIndex, 1); } } /** * we notify elements added to the container by calling * each subscribed components added to our container */ Observer.prototype.notifyAll = function (element) { this.observerContainer.forEach(function (observerElement) { observerElement(element); }); }

Abschluss

Für JavaScript-Entwickler ist es von Vorteil, Designmuster zu verwenden. Zu den wichtigsten Vorteilen der Verwendung von Entwurfsmustern gehören die Wartbarkeit des Projekts und die Vermeidung unnötiger Arbeit im Entwicklungszyklus. Obwohl JavaScript-Entwurfsmuster Lösungen für komplexe Probleme bieten können, natürlich eine schnelle Entwicklung und Produktivität, ist es falsch, den Schluss zu ziehen, dass diese Entwurfsmuster die Entwickler ersetzen können.

#javascript #web-entwicklung

Die 7 besten JavaScript-Designmuster, die Sie kennen sollten