Frage Beispiele für praktische javascript-objektorientierte Entwurfsmuster


Welche objektorientierten Entwurfsmuster verwenden Sie im JavaScript Ihrer Anwendung und warum?

Fühlen Sie sich frei, Code zu veröffentlichen, auch wenn kein formelles Designmuster vorhanden ist.

Ich habe viel Javascript geschrieben, aber ich habe nicht viel objektorientierte Muster auf das angewendet, was ich mache, und ich bin mir sicher, dass ich viel vermisse.


76
2017-09-16 00:17


Ursprung


Antworten:


Das Folgende sind drei beliebte JavaScript-Muster. Diese sind leicht zu implementieren, weil Verschlüsse:

Vielleicht möchten Sie auch auschecken:

Das Folgende ist ein Google I / O-Talk aus dem Jahr 2008 von Diaz, in dem er einige Themen aus seinem Buch diskutiert:


51
2017-09-16 00:23



Erbe

Ich benutze ein Notation für die Vererbung das basiert auf ExtJS 3, was meiner Meinung nach der klassischen Vererbung in Java sehr nahe kommt. Es läuft im Wesentlichen wie folgt ab:

// Create an 'Animal' class by extending
// the 'Object' class with our magic method
var Animal = Object.extend(Object, {
    move : function() {alert('moving...');}
});

// Create a 'Dog' class that extends 'Animal'
var Dog = Object.extend(Animal, {
    bark : function() {alert('woof');}
});

// Instantiate Lassie
var lassie = new Dog();

// She can move and bark!
lassie.move();
lassie.bark();

Namespaces

Ich stimme Eric Miraglia auch darin zu, Namespaces beizubehalten, damit der obige Code innerhalb seines eigenen Kontexts außerhalb des Fensterobjekts ausgeführt werden sollte. Dies ist wichtig, wenn der Code als eines von vielen parallelen Frameworks / Bibliotheken im Browserfenster ausgeführt werden soll.

Dies bedeutet, dass der einzige Weg zum Fensterobjekt über Ihr eigenes Namespace / Modul-Objekt ist:

// Create a namespace / module for your project
window.MyModule = {};

// Commence scope to prevent littering 
// the window object with unwanted variables
(function() {

    var Animal = window.MyModule.Animal = Object.extend(Object, {
         move: function() {alert('moving...');}
    });

    // .. more code

})();

Schnittstellen

Sie können auch erweiterte OOP-Konstrukte wie Schnittstellen verwenden, um Ihr Anwendungsdesign zu verbessern. Meine Annäherung an diese ist es, das zu verbessern Function.prototype um eine Notation in diesen Zeilen zu bekommen:

var Dog = Object.extend(Animal, {
     bark: function() {
         alert('woof');
     }
     // more methods ..
}).implement(Mammal, Carnivore);

OO-Muster

Was "Patterns" im Java - Sinne anbelangt, habe ich nur für das verwendet Singleton-Muster (toll zum Cachen) und die Beobachtermuster für ereignisgesteuerte Funktionen wie das Zuweisen einiger Aktionen, wenn ein Benutzer auf eine Schaltfläche klickt.

Ein Beispiel für die Verwendung des Beobachtermusters wäre:

// Instantiate object
var lassie = new Animal('Lassie');

// Register listener
lassie.on('eat', function(food) {
   this.food += food;
});

// Feed lassie by triggering listener
$('#feeding-button').click(function() {
    var food = prompt('How many food units should we give lassie?');
    lassie.trigger('eat', [food]);
    alert('Lassie has already eaten ' + lassie.food + ' units');
});

Und das sind nur ein paar Tricks in meiner Tasche von OO JS, hoffe sie sind nützlich für dich.

Ich empfehle, wenn Sie vorhaben, diese Straße zu gehen, die Sie lesen Douglas Crockfords Javascript: die guten Teile. Es ist ein brillantes Buch für dieses Zeug.


24
2017-10-10 11:28



Ich bin ein Fan der Modulmuster. Es ist ein Weg, um erweiterbare, nicht abhängige (meistens) Frameworks zu implementieren.

Beispiel:

Der Rahmen, Q, ist wie folgt definiert:

var Q = {};

So fügen Sie eine Funktion hinzu:

Q.test = function(){};

Diese zwei Codezeilen werden zusammen verwendet, um zu bilden Module. Die Idee hinter Modulen ist, dass sie alle ein gewisses Grundgerüst erweitern, in diesem Fall Q, sind aber nicht aufeinander angewiesen (wenn sie richtig ausgelegt sind) und können in beliebiger Reihenfolge enthalten sein.

In einem Modul erstellen Sie zuerst das Framework-Objekt, wenn es nicht existiert (das ist ein Beispiel für das Singleton Muster):

if (!Q)
    var Q = {};

Q.myFunction = function(){};

Auf diese Weise können Sie mehrere Module (wie die oben genannten) in separaten Dateien speichern und sie in beliebiger Reihenfolge einschließen. Jeder von ihnen wird das Framework-Objekt erstellen und dann erweitern. Keine manuelle Überprüfung, ob das Framework existiert. Dann, um zu überprüfen, ob ein Modul / eine Funktion in benutzerdefiniertem Code vorhanden ist:

if (Q.myFunction)
    Q.myFunction();
else
    // Use a different approach/method

20
2017-09-16 00:23



Das Singleton-Muster ist oft sehr hilfreich für die Kapselung und Organisation. Sie können sogar die Zugänglichkeit ändern.

var myInstance = {
  method1: function () {
    // ...
  },
  method2: function () {
    // ...
  }
};

sauberste Möglichkeit, ein Singleton in Javascript zu implementieren


6
2017-09-16 00:25



Ich mag Jquery wirklich Verkettungsmuster der Methode, sodass Sie mehrere Methoden für ein Objekt aufrufen können. Es macht es wirklich einfach, mehrere Operationen in einer einzigen Codezeile auszuführen.

Beispiel:

$('#nav').click(function() {
   $(this).css('color','#f00').fadeOut();
});

4
2017-09-16 00:23



Ich mag das Dekorationsmuster mit jQuery-Plugins. Anstatt Plug-ins entsprechend Ihren Anforderungen zu modifizieren, schreiben Sie ein benutzerdefiniertes Plug-in, das nur Anforderungen weiterleitet und zusätzliche Parameter und Funktionen hinzufügt.

Wenn Sie beispielsweise ständig eine Reihe von Standardargumenten übergeben müssen und ein leicht unterschiedliches Verhalten benötigen, das mit der Geschäftslogik verknüpft ist, schreiben Sie ein Plugin, das was auch immer tut pre und post Arbeit ist notwendig, um Ihre Bedürfnisse zu erfüllen und übergibt Ihre Standardargumente, wenn diese bestimmten Argumente nicht angegeben sind.

Der Hauptvorteil besteht darin, dass Sie Ihre Bibliotheken aktualisieren können und sich nicht darum kümmern müssen, Bibliotheksänderungen zu portieren. Dein Code könnte brechen, aber es besteht zumindest die Möglichkeit, dass es nicht funktioniert.


3
2017-09-16 00:32



Eines der nützlichen Muster in der JavaScript-Welt ist das Verkettungsmuster, das von LINQ auf den ersten Platz gebracht wird und auch in jQuery verwendet wird.

Dieses Muster ermöglicht es uns, unterschiedliche Methoden einer Klasse in verkettender Weise aufzurufen.

die Hauptstruktur dieses Musters wäre wie

var Calaculator = function (init) {
    var result = 0;
    this.add = function (x) { result += (init + x); return this; };
    this.sub = function (x) { result += (init - x); return this; };
    this.mul = function (x) { result += (init * x); return this; };
    this.div = function (x) { result += (init / x); return this; };

    this.equals = function (callback) {
        callback(result);
    }

    return this;
};


new Calaculator(0)
    .add(10)
    .mul(2)
    .sub(5)
    .div(3)
    .equals(function (result) {
        console.log(result);
    });

Die Schlüsselidee dieses Musters ist this Schlüsselwort, das den Zugriff auf andere öffentliche Mitglieder von Calculator function ermöglicht.


3
2018-05-18 18:07