Was sind einige Beispiele für Entwurfsmusterimplementierungen mit JavaScript?

Question

Ich bin ein mäßig erfahrener Programmierer, der JavaScript verwendet, aber ich bin kein Guru.Ich weiß, dass man damit einige ziemlich mächtige Dinge tun kann, ich habe nur nicht viel anderes als eine ziemlich einfache DOM-Manipulation gesehen.Ich frage mich, ob die Leute einige Beispiele für traditionelle Entwurfsmusterkonzepte wie Factory Method, Singleton usw. mit JavaScript bereitstellen könnten.In welchen Fällen würden diese Muster im Web verwendet?

Answer 1

Ich wollte nur mein Lieblings-JavaScript-Muster hinzufügen, das ich von Pro JavaScript Design Patterns gelernt habe und das Jonathan Rauch bereits empfohlen hat.

Es handelt sich um das Namespace-Singleton-Muster.Grundsätzlich erstellen Sie Namespaces über Singletons, die es Ihnen ermöglichen, Methoden und Variablen vor der externen Verwendung zu verbergen.Die versteckten/exponierten Methoden sind tatsächlich verborgen, da sie innerhalb des Abschlusses definiert sind.

var com = window.com || {};
com.mynamespace = com.mynamespace || {};
com.mynamespace.newpackage = (function() {
    var myPrivateVariable = "hidden";
    var myPublicVariable = "exposed";

    function myPrivateMethod() {
        return "also hidden";
    }

    function myPublicMethod() {
        return "also exposed";
    }

    return {
        myPublicMethod: myPublicMethod,
        myPublicVariable: myPublicVariable
    };
})();

Answer 2

Nickolay hat dies angesprochen, aber Designmuster sind zwischen Sprachen, die drastische Unterschiede aufweisen, nicht konsistent.Ich habe bereits gelesen (und stimme dem zu), dass ein Entwurfsmuster oft ein Zeichen für fehlende Funktionen in der Sprache ist.

Als perfektes Beispiel ist das „Factory“-Muster in einigen Sprachen völlig unnötig, Ruby ist das Beispiel, an das ich denke (da die Objektkonstruktion nur eine Methode auf der Klasseninstanz ist):

# create a factory for MyObject
my_factory = MyObject
instance_1 = my_factory.new

# change the factory to another class
my_factory = MyOtherObject
instance_2 = my_factory.new

Wenn Sie ein Entwurfsmuster auf eine andere Sprache anwenden, als es ursprünglich entwickelt wurde, sollten Sie unbedingt überlegen, ob es WIRKLICH notwendig ist und wie Sie es mit den neuen verfügbaren Sprachfunktionen verbessern können.Entwurfsmuster sind nur ein Leitfaden. Sie sollten immer überlegen, ob die von Ihnen beabsichtigte Verwendung das Muster wirklich erfordert oder ob es in Ihrem Fall besser übernommen werden kann.

Answer 3

Es gibt ein gutes frei Online-Buch von Addy Osmani, das Javascript-Designmuster vorstellt: Grundlegende JavaScript-Designmuster für Anfänger, Band 1

Answer 4

@jamting:

Das Singleton-Entwurfsmuster in JavaScript

Ach du lieber Gott.Ich bin sprachlos.

Zum OP:Ja, natürlich können Sie das in gewisser Weise, aber einige Muster sind, wie Sie es gewohnt sind, nicht so sichtbar wie in Java.Singleton wäre beispielsweise einfach ein Objekt:

var singleton = {
    sayHello: function() {
       alert("Hello!")
    }
};

Wikipedia hat ein Beispiel dafür Fabrik in JS.

Answer 5

Ich habe es kürzlich verwendet Bernies besserer Animationskurs das macht ausgiebigen Gebrauch von der Strategie Designmuster.Bernie beschreibt hervorragend, warum das Strategiemuster verwendet werden sollte, erklärt aber leider nicht genau, wie der Code funktioniert.Wenn Sie jedoch eine Design Patterns-Referenz verwenden, werfen Sie einen Blick auf den Code und die Kommentare in animator.js, um ein gutes Beispiel für die Verwendung des Strategiemusters zu erhalten.

Beispiel:

// This object controls the progress of the animation 
ex1 = new Animator();
// The Animator's subjects define its behaviour 
ex1.addSubject(updateButton);
function updateButton(value) {
    $('ex1Button').innerHTML = "Progress: " + Math.round(value * 100) + "%";
}

// now click below: each click to the button calls ex1.toggle()

Answer 6

Wie heißt diese Vorgehensweise in JavaScript?

Dies ist das Designmuster für den Selbstaufruf.Ich hatte es noch nie gesehen, bis ich mit Javascripting begann.

Answer 7

Ich vermute, dass sie das können – hier ist ein Beispiel für Singleton:

Das Singleton-Entwurfsmuster in JavaScript

Answer 8

Klar können sie das.Hier ist ein Buch zum Thema:
Pro-JavaScript-Designmuster
Hier ist ein Beispiel für das Factory-Muster:
Fabrikmuster in Javascript

Answer 9

Ich möchte hier hinzufügen, was ich als Gruppe studiert habe, mit Diskussion über Designmuster sowohl in C# als auch in JavaScript.Was mir während des Meetings besonders aufgefallen ist, ist, dass der C#-Mitarbeiter Codes in JavaScript schreibt, und das Gleiche gilt auch für den JavaScript-Mitarbeiter.Nachdem ich das Meeting verlassen habe, versuche ich, zu Hause mehr zu lernen und hier zu bloggenhttp://tech.wowkhmer.com/category/Design-Patterns.aspx sowohl für C# als auch für JavaScript.

Answer 10

Hören an Justin Diaz, der über Designmuster für Javascript spricht.Der Vortrag basiert auch auf seinem oben erwähnten Buch Pro Javascript Techniques.Der Vortrag dauert etwa 45 Minuten bei Google I/O