Was sind einige Beispiele für Design Pattern Implementierungen mit JavaScript?

Question

Ich bin ein mäßiger Programmierer mit JavaScript, aber ich bin kein Guru. Ich weiß, dass Sie einige ziemlich mächtige Dinge damit tun können, ich habe nur viel mehr als nur grundlegende DOM-Manipulation gesehen. Ich frage mich, ob Leute einige Beispiele für traditionelle Design-Muster-Konzepte wie Factory-Methode, Singleton usw. mit JavaScript zur Verfügung stellen könnten. In welchen Fällen würden diese Muster im Internet verwendet?

Answer 1

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

Es ist das Namensraum-Singleton-Muster. Grundsätzlich erstellen Sie Namespaces über Singletons, mit denen Sie Methoden und Variablen vor der externen Verwendung verbergen können. Die versteckten/exponierten Methoden sind tatsächlich verborgen, weil sie innerhalb der Schließung 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

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

The singleton design pattern in JavaScript

Answer 3

@jamting:

The singleton design pattern in JavaScript

Oh mein Gott. Ich bin sprachlos.

Um OP: ja, natürlich können Sie in gewissem Sinne, aber einige Muster, wie Sie sie gewohnt sind, sind nicht so sichtbar, wie in Java. Zum Beispiel Singleton wäre einfach ein Objekt sein:

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

Wikipedia ein Beispiel Factory in JS hat.

Answer 4

Sicher können sie. Hier ist ein Buch über das Thema:
Pro JavaScript Design Patterns
Hier ist ein Beispiel für die Fabrikmuster:
Factory pattern in Javascript

Answer 5

Nickolay auf diese berührt, aber Designmuster sind nicht konsistent zwischen den Sprachen, die drastische Unterschiede. Ich habe schon einmal gelesen (und stimme zu), dass ein Designmuster oft ein Zeichen für fehlende Features in der Sprache ist.

Als perfektes Beispiel, die „Factory“ Muster ist völlig unnötig in einigen Sprachen Ruby als Beispiel die ich denke (da Objektbau ist nur eine Methode für die Klasse-Instanz):

# 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 

Wann immer Sie ein Designmuster auf eine andere Sprache anwenden als ursprünglich geplant, stellen Sie sicher, dass Sie überlegen, ob es wirklich notwendig ist und wie Sie es mit den neuen Sprachfunktionen verbessern können. Design Patterns sind nur ein Leitfaden, Sie sollten immer überlegen, ob die von Ihnen beabsichtigte Verwendung das Pattern wirklich benötigt oder ob es in Ihrem Fall besser übernommen werden kann.

Answer 6

Ich habe vor kurzem verwendet Bernie's Better Animation Class, die umfangreiche Nutzung der Strategy Design Muster macht. Bernie beschreibt sehr gut, warum das Strategie-Pattern verwendet werden sollte, erklärt aber leider nicht genau, wie der Code funktioniert. Wenn Sie 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 Strategie-Patterns 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 7

Ich möchte hier hinzufügen, was ich als Gruppe mit Diskussion über Design Patterns studierte sowohl in C# und JavaScript. Was ist das Besondere für mich während des Treffens ist, dass der C# -Code-Code in JavaScript und das gleiche für den JavaScript-Typ schreiben. Nachdem ich das Treffen verlassen habe, versuche ich mehr zu Hause zu lernen und blogge hier http://tech.wowkhmer.com/category/Design-Patterns.aspx für C# und JavaScript.

Answer 8

Listen zu Justin Diaz über Designmuster für Javascript sprechen. Der Vortrag basiert auch auf seinem oben erwähnten Buch Pro Javascript Techniques. Die Rede ist etwa 45 Minuten bei Google I/O

Answer 9

What is this practice called in JavaScript?

Dies ist das Selbst Aufruf Design-Muster. Ich hatte es nie gesehen, bis ich Javascripting begann.

Answer 10

Es gibt ein gutes kostenlos Online-Buch von Addy Osmani, Einführung Javascript Entwurfsmuster: Essential JavaScript Design Patterns For Beginners, Volume 1