Java Script Design Patterns

Übersicht: In diesem Dokument werden wir über die verschiedenen Design-Muster, die in JavaScript sprechen. Die meisten Entwickler fragen sich die genaue oder das ideale Design-Muster zu finden, um in ihrem Programm verwendet werden. Um ehrlich zu sein, gibt es keine konkrete Antwort auf diese Frage oder es gibt keine Formeln, die das richtige Design-Muster herauszufinden, würde in einer bestimmten Situation verwendet werden. Also unter solchen Umständen, wir sollten einen festen Keuchen der Design-Muster haben und die spezifischen Probleme, die sie beschäftigen sich mit, sollten wir in einer besseren Situation sein, eine Entscheidung zu treffen, an dem Design-Muster, in dem Zustand verwendet werden.

Einführung:
Ein Entwurfsmuster ist eine wiederverwendbare Lösung, die auf gemeinsame Wieder auftretenden Probleme in Software-Design und Entwicklung angewendet werden kann,. Design-Muster kann auch bezeichnet werden als Vorlagen verwendet, gemeinsame Probleme zu lösen. Design-Muster haben drei große Vorteile:

Sie sind bewährte Lösungen: Design-Muster eine solide Ansatz in der Softwareentwicklung bieten und nutzt bewährte Techniken.
Kann leicht wiederverwendet: Entwurfsmuster sind konzeptionelle und bieten aus der Box-Lösung, die unseren Bedürfnissen entspricht. Diese Eigenschaft macht die Designmuster robuster und sie können in ähnlichen Bedingungen wiederverwendet werden.
Muster sind ausdrucks: Jedes Design-Muster stellt einen vordefinierten Satz Struktur und Vokabular, das verwendet werden kann, Lösungen für größere Probleme zu schaffen,.

Design-Muster liefert nie eine exakte Lösung für ein Problem. Es ist wichtig, dass die Rolle von Mustern zu beachten ist, eine Lösung Schema bereitzustellen.

Arten von Design Patterns
Entwurfsmuster lassen sich in folgende drei Unterkategorien unterteilt werden:

Creational Design, Muster, : In dieser Kategorie die folgenden Designmuster fallen :
- Singleton
- BAUTRÄGER
- Fabrik
- Abstrakt
- Prototyp
- Baumeister
Structural Design Pattern : In dieser Kategorie die folgenden Designmuster fallen :
- Dekorateur
- Fassade
- Fliegengewicht
- Adapter
- Stellvertreter
Behavioral Design, Muster, : In dieser Kategorie die folgenden Design-Muster Herbst :
- Iterator
- Gast
- Vermittler
- Beobachter

Patterns in JavaScript:
Die folgenden Muster sind häufig in JavaScript verwendet:

constructor Pattern
Modul-Muster
Singleton Pattern
Observer-Muster
Mediator-Muster
Urmuster
Command-Muster
Fassadenmuster
Factory-Muster
Decorator-Muster
Flyweight-Muster

Der Constructor Muster:
Gemäß der klassischen objektorientierten Programmierkonzept, Ein Konstruktor ist eine besondere Art von Verfahren, das verwendet wird, um eine Instanz eines Objekts in dem Speicher zu erstellen,. In JavaScript-Objekterstellung erfolgt mit einer der folgenden drei Ansätze:

Listing 1: Drei Ansätze in JavaScript verwendet, um Objekte zu erstellen

[Code]

// Ansatz 1

war newObject = {};

//Ansatz 2

var newObject = Object.create(null);

//Ansatz 3

var newObject = new Object();

[/Code]

Im dritten Ansatz, das Objekt erstellt, um den Object-Konstruktor, wo kein Wert übergeben wird oder eingestellt. Es gibt mehrere Möglichkeiten, Werte zu einem neu erstellten Objekt zu setzen. These are:

Listing 2: Ways Werte an einen Konstruktor gesetzt werden

[Code]

//Ansatz 1

newObject.someKey = "Hallo Welt"

//Ansatz 2

newObject[somekey] = "Hallo Welt"

//Ansatz 3

Object.defineProperty( newObject, “somekey”, {

Wert : "Hallo Welt"

schreibbar : wahr

enumerable : wahr

konfigurierbar : wahr

);

[/Code]

The Singleton Pattern:
Wir alle wissen, dass die Singletonmuster die Schaffung eines Objekts einzelne Instanz beschränkt. Singleton-Muster wird durch die Schaffung einer Klasse mit einer Methode implementiert, die nur eine neue Instanz des Objekts erstellt, wenn keine anderen Instanzen vorhanden. In JavaScript dienen Singletons als Ressource Namensraum geteilt, die Implementierung von globalen Namespace-Isolaten. in JavaScript, Singleton wird in der folgenden Weise implementiert:

Listing 3: Singleton-Implementierung in JavaScript

[Code]

war mySingleton = (Funktion () {

// Beispiel speichert eine Referenz auf die Singleton

var Instanz;

function init() {

// Singleton

// Private Methoden und Variablen

Funktion privateMethod(){

console.log( “Ich bin privat” );

}

private Variable war = “Im auch privat”;

var privateRandomNumber = Math.random();

return {

// Öffentliche Methoden und Variablen

publicMethod: Funktion () {

console.log( “Die Öffentlichkeit kann mich sehen!” );

öffentliches Eigentum: “Ich bin auch der Öffentlichkeit”,

getRandomNumber: Funktion() {

Rückkehr privateRandomNumber;

}

};

return {

// Holen Sie sich das Singleton Beispiel, wenn ein solches vorhanden ist

// oder erstellen Sie ein, wenn es nicht tut

getInstance: Funktion () {

wenn ( !Beispiel ) {

Beispiel = init();

}

Rückkehr Instanz;

}

};

})();

war myBadSingleton = (Funktion () {

// Beispiel speichert eine Referenz auf die Singleton

var Instanz;

function init() {

// Singleton

var privateRandomNumber = Math.random();

return {

getRandomNumber: Funktion() {

Rückkehr privateRandomNumber;

}

};

return {

// Erstellen Sie immer eine neue Singleton Instanz

getInstance: Funktion () {

Beispiel = init();

Rückkehr Instanz;

}

};

})();

// Verwendung:

war Single1 = mySingleton.getInstance();

war single2 = mySingleton.getInstance();

console.log( singleA.getRandomNumber() === singleB.getRandomNumber() ); // wahr

var badSingle1 = myBadSingleton.getInstance();

var badSingle2 = myBadSingleton.getInstance();

console.log( badSingleA.getRandomNumber() !== badSingleB.getRandomNumber() ); // wahr

[/Code]

Gemäß der GoF, Singleton ist anwendbar in den folgenden Situationen:

Es sollte genau auf Instanz des Objekts existieren.
Die einzige Instanz sollte erweiterbar sein von Nebenklassen.

The Observer Pattern:
Im Beobachter-Muster, the object (auch als Subjekt genannt) führt eine Liste der Objekte auf sie in Abhängigkeit bezeichnet als Beobachter. Das Thema benachrichtigt automatisch den Beobachtern jede Änderung, was geschehen ist, mit der Broadcast-Mechanismus. Die Umsetzung des Observer-Muster ist unten dargestellt.

Listing 4: Liste der abhängigen Beobachter ein Thema haben

[Code]

Funktion ObserverList(){ this.observerList = [];} ObserverList.prototype.Add = function( obj ){ return this.observerList.push( obj );}; ObserverList.prototype.Empty = function(){ this.observerList = [];}; ObserverList.prototype.Count = function(){ return this.observerList.length;}; ObserverList.prototype.Get = function( index ){ wenn( index > -1 && index < this.observerList.length ){ return this.observerList[ index ]; }}; ObserverList.prototype.Insert = function( obj, index ){ var pointer = -1; wenn( Index === 0 ){ this.observerList.unshift( obj ); pointer = index; }oder wenn( Index === this.observerList.length ){ this.observerList.push( obj ); pointer = index; } return pointer;}; ObserverList.prototype.IndexOf = function( obj, start ){ var i = startIndex, Zeiger = -1; während( ich < this.observerList.length ){ wenn( this.observerList[ich] === obj ){ pointer = i; } i ; } return pointer;}; ObserverList.prototype.RemoveAt = function( index ){ wenn( Index === 0 ){ this.observerList.shift(); }oder wenn( Index === this.observerList.length -1 ){ this.observerList.pop(); }}; // Extend an object with an extensionfunction extend( extension, obj ){ für ( var Schlüssel in Verlängerung ){ obj[key] = Verlängerung[key]; }}

[/Code]

Listing 5: Das Thema

[Code]

Funktion Subject(){ this.observers = new ObserverList();} Subject.prototype.AddObserver = function( observer ){ this.observers.Add( observer );}; Subject.prototype.RemoveObserver = function( observer ){ this.observers.RemoveAt( this.observers.IndexOf( observer, 0 ) );}; Subject.prototype.Notify = function( Kontext ){ var observerCount = this.observers.Count(); für(var i=0; ich < observerCount; i ){ this.observers.Get(ich).Aktualisieren( Kontext ); }};

[/Code]

In dem obigen Beispiel, mit den Observer Komponenten, wir jetzt definieren:

Eine Schaltfläche zum Hinzufügen neuer beobachtbaren Kontrollkästchen, um die Seite
Ein Kontrollkästchen, die als Subjekt handeln, Benachrichtigung anderen Kontrollkästchen sie sollten überprüft werden
Ein Behälter für die neuen Ankreuzfelder hinzugefügt

Der HTML-Code ist wie unter

Listing 5: Der HTML-Code

[Code]

<button id =”addNewObserver”>New Observer Checkbox</Taste><input id =”mainCheckbox” type =”Checkbox”/><div id =”observersContainer”></div>

[/Code]

Summary: Also in diesem Artikel habe ich Details diskutiert über die JavaScript-Entwurfsmuster. Die Design-Muster sind für alle Arten von Sprachen wie Objektsprache Java-orientierte und auch Skriptsprache wie JavaScript. Aber es gibt Unterschiede, und wir haben es in den obigen Beispielen gesehen. So schließen die Diskussion können wir sagen, dass Entwurfsmuster verwendet werden Lösung bereitzustellen, um häufig auftretende Probleme. Und bitte beachten Sie, dass Entwurfsmuster sind