Quali sono alcuni esempi di implementazioni di modelli di progettazione utilizzando JavaScript?

Question

Sono un programmatore moderatamente esperto che utilizza JavaScript ma non sono un guru.So che puoi fare cose piuttosto potenti con esso, semplicemente non ho visto molto altro oltre alla manipolazione DOM abbastanza elementare.Mi chiedo se le persone potrebbero fornire alcuni esempi di concetti di design pattern tradizionali come Factory Method, Singleton, ecc. Utilizzando JavaScript.In quali casi verrebbero utilizzati questi modelli sul web?

Answer 1

Volevo solo aggiungere il mio pattern JavaScript preferito che ho imparato da Pro JavaScript Design Patterns già consigliato da Jonathan Rauch.

È il modello singleton dello spazio dei nomi.Fondamentalmente, crei spazi dei nomi tramite singleton che ti consentono di nascondere metodi e variabili dall'uso esterno.I metodi nascosti/esposti sono effettivamente nascosti perché definiti all'interno della chiusura.

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 ha accennato a questo, ma i modelli di progettazione non sono coerenti tra linguaggi che presentano differenze drastiche.Ho letto in precedenza (e sono d'accordo) che un design pattern è spesso un segno di funzionalità mancanti nel linguaggio.

Come esempio perfetto, il pattern "Factory" è completamente inutile in alcuni linguaggi, Ruby come esempio a cui sto pensando (perché la costruzione dell'oggetto è solo un metodo sull'istanza Class):

# 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

Ogni volta che applichi un design pattern a un linguaggio diverso da quello per cui è stato inizialmente sviluppato, assicurati di considerare se è VERAMENTE necessario e in che modo potresti migliorarlo con le nuove funzionalità linguistiche disponibili.I design pattern sono solo una guida, dovresti sempre considerare se l'uso che intendi fare ha davvero bisogno del pattern, o se può essere adottato in modo migliore nel tuo caso.

Answer 3

C'è un bene gratuito libro online di Addy Osmani, che introduce i modelli di progettazione Javascript: Modelli di progettazione JavaScript essenziali per principianti, volume 1

Answer 4

@jamting:

Il modello di progettazione singleton in JavaScript

Dio mio.Sono senza parole.

Per OP:sì, certo che puoi in un certo senso, ma alcuni modelli, come sei abituato a loro, non sono così visibili, come in Java.Ad esempio, singleton sarebbe semplicemente un oggetto:

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

Wikipedia ne ha un esempio Fabbrica in JS.

Answer 5

Ho usato di recente Il corso di animazione migliore di Bernie che fa ampio uso di Strategia Design pattern.Bernie fa un ottimo lavoro nel descrivere perché dovrebbe essere utilizzato il modello di strategia, ma purtroppo non spiega esattamente come funziona il codice.Poi ancora, quando usi un riferimento a Design Patterns, dai un'occhiata al codice e ai commenti in animator.js per un buon esempio di come usare lo Strategy Pattern.

Esempio:

// 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

Come si chiama questa pratica in JavaScript?

Questo è il Design Pattern di autoinvocazione.Non l'avevo mai visto finché non ho iniziato a usare Javascript.

Answer 7

Sospetto che possano - ecco un esempio di Singleton:

Il modello di progettazione singleton in JavaScript

Answer 8

Certo che possono.Ecco un libro sull'argomento:
Modelli di progettazione JavaScript professionali
Ecco un esempio del modello Factory:
Modello di fabbrica in Javascript

Answer 9

Vorrei aggiungere qui ciò che ho studiato in gruppo con la discussione sui modelli di progettazione sia in C# che in JavaScript.La cosa più bella per me durante l'incontro è che il ragazzo C# scrive codici in JavaScript e la stessa cosa per il ragazzo JavaScript.Dopo aver lasciato la riunione provo a saperne di più a casa e scrivo sul blog quihttp://tech.wowkhmer.com/category/Design-Patterns.aspx sia per C# che per JavaScript.

Answer 10

Ascoltare a Justin Diaz parlando di design pattern per Javascript.Il discorso si basa anche sul suo libro Pro Javascript Techniques menzionato sopra.La conversazione dura circa 45 minuti al Google I/O