L'importanza dei design pattern con Javascript, NodeJs et al


36

Con Javascript che sembra essere l'onnipresente linguaggio di programmazione del web nei prossimi anni, nuovi quadri spuntano ogni cinque minuti e la programmazione guidata dagli eventi assume un ruolo guida sia sul lato server che sul lato client:

Come sviluppatore di Javascript consideri i tradizionali modelli di design importanti o meno importanti di quanto lo siano stati con altri linguaggi / ambienti ?.

Indica i tre principali modelli di design che utilizzi regolarmente come sviluppatore Javascript e fornisci un esempio di come hanno contribuito allo sviluppo di Javascript.


5
Alcune persone sostengono che i modelli di progettazione (in particolare quelli GoF) sono segni di carenza del linguaggio (vedi questa discussione ). Poiché JavaScript è prototipo e funzionale in natura, direi che un altro insieme di modelli è applicabile / utile.

molto interessato alle risposte ... +1 per la domanda :)
usoban

2
Il libro JavaScript Patterns di Stoyan Stefanov è una grande risorsa su tonnellate di pattern che puoi usare in JS. Molti di essi esistono specificamente per JS e non per qualsiasi altra lingua.
IgorGanapolsky,

Javascript ha i suoi schemi. Oltre al libro citato da Igor, c'è anche Learning Javascript Design Patterns di Addy Osmani , che è gratuito.
user16764,

Risposte:


23

Come sviluppatore di Javascript consideri i tradizionali modelli di design importanti o meno importanti di quanto lo siano stati con altri linguaggi / ambienti ?.

I modelli di design classici non si applicano a JavaScript.

Ciò che si applica è la scrittura di codice modulare e funzionale.

È necessario utilizzare una combinazione di costruttori e funzioni di prima classe.

Come sviluppatore JavaScript spingo personalmente verso il trattamento di JavaScript come LISP piuttosto che Java. Quindi prova a emulare monadi e codice di stile funzionale di alto livello piuttosto che provare a emulare il codice OOP classico.

Indica i tre principali modelli di design che utilizzi regolarmente come sviluppatore Javascript e fornisci un esempio di come hanno contribuito allo sviluppo di Javascript.

Ancora una volta i modelli di progettazione non si applicano molto, ma di seguito sono riportati tre importanti costrutti.

  1. Uso di chiusure
  2. Uso di funzioni di prima classe
  3. Uso delle fabbriche di oggetti con o senza new

Per favore, lascia un qualche tipo di contesto per il quale posso mostrare esempi di questo tipo di tecniche rispetto a fare lo stesso tipo di codice usando i modelli di progettazione tradizionali.

Diamo un'occhiata ad alcuni dei modelli di design classici e come implementarli in js così come modelli alternativi più adatti a js stesso:

Modello osservatore:

In node.jsquesto è semplicemente events.EventEmitter. In jQueryquesto è $.fn.bind&& $.fn.trigger. In backbonequesto è Backbone.Events.triggere Backbone.Events.bind. Questo è un modello molto comune usato nel codice quotidiano.

Non mi fermo mai e penso "Ehi, sto usando un modello di osservatore qui!". No, questo è solo un modo di basso livello per trasmettere messaggi o un modo per cambiare in cascata.

Ad esempio, nel backbone tutte le viste MVC si legano onchangeall'evento dei modelli , quindi cambiando il modello si sovrappongono automaticamente eventuali modifiche alla vista. Sì, questo è un modello potente, ma il suo uso è così comune nella programmazione guidata dagli eventi che non si rendevano conto che lo stavano usando ovunque.

Nel WebSocketprototipo abbiamo quello .onche usiamo per legare agli on("message", ...eventi. Ancora una volta questo è molto comune, ma è un osservatore su uno stream piuttosto che sulla tua classica OOP while (byte b = Stream.ReadNextByte()).

Questi sono tutti potenti usi del modello Observer. Ma questo non è uno schema che usi. Questa è una parte semplice della lingua. Questo è solo codice.

Motivo ricordo:

Questo è semplicemente JSON. Ti consente di serializzare lo stato di un oggetto in modo da poter annullare un'azione.

function SomeObject() {
    var internalState;

    this.toJSON = function() {
        return internalState;
    }

    this.set = function(data) {
        internalState = data;
    }

    this.restore = function(json) {
        internalState = JSON.parse(json);
    }
}

var o = new SomeObject();
o.set("foo"); // foo
var memento = JSON.stringify(o);
o.set("bar"); // bar
o.restore(memento);

In JavaScript supportiamo nativamente un'API per i ricordi. Basta definire un metodo chiamato toJSONsu qualsiasi oggetto. Quando lo chiami JSON.stringify, chiamerà internamente .toJSONil tuo oggetto per ottenere i dati reali che vuoi serializzare su JSON.

Ciò ti consente di realizzare in modo banale istantanee del tuo codice.

Ancora una volta non mi rendo conto che questo è un modello ricordo. Questo sta semplicemente usando lo strumento di serializzazione JSON.

Pattern di stato / Pattern di strategia:

Non hai bisogno di un modello di stato. Hai funzioni di prima classe e tipi dinamici. Basta iniettare funzioni o modificare le proprietà al volo.


Raynos, bella risposta. Per quanto riguarda gli esempi, stavo pensando di più a livello concettuale. Ad esempio: "un modello di osservatore ha aiutato nella situazione ..."

@Lewis scegli alcuni modelli di design che ti piacciono e in seguito proverò a suggerire alternative funzionali più appropriate.
Raynos

L'approccio allo sforzo e la risposta sono geniali Raynos. Grazie.
Lewis,

@Lewis Ho provato a guardare un altro paio, ma sono rimasto perplesso poiché sono tutti su misura per le rigorose lingue OO classiche. se ci sono altri modelli di design specifici che vuoi che faccia vedere, fammi sapere.
Raynos,

Hai dimenticato il modello prototipo - aka stupido javascript non ha nemmeno il normale oop ;)
c69,

10

Prendi questa risposta come opinione soggettiva.

Come sviluppatore di Javascript consideri i tradizionali motivi di design importanti o meno importanti di quanto lo siano stati con altri linguaggi / ambienti?

Se intendi modelli di progettazione tradizionali come Gang of Four , la maggior parte delle tecniche sono agnostiche di linguaggio / piattaforma come "Programma su un'interfaccia, non un'implementazione" o "Favorisci la composizione di oggetti sull'eredità di classe" e sono ugualmente importanti anche per gli sviluppatori JavaScript.

Modelli più specifici come creazionali, strutturali e comportamentali possono o non devono essere usati nello stesso modo o con la stessa frequenza di altre lingue perché le caratteristiche del linguaggio possono influenzare il loro uso in larga misura. Alcuni linguaggi (JavaScript incluso) hanno quindi i loro modelli di progettazione basati sulla funzionalità o sullo zucchero sintattico che offrono.

In generale, direi che i modelli di design tradizionali sono importanti quanto lo sono in altre lingue, ma i modelli specifici di JavaScript sono più importanti di quelli tradizionali.

dai un nome ai tre principali modelli di progettazione che utilizzi regolarmente come sviluppatore Javascript e fornisci un esempio di come hanno contribuito allo sviluppo di Javascript

Tra i modelli essenziali di progettazione JavaScript li uso principalmente:

1. Modello del costruttore (con prototipi)

Soprattutto sul lato server quando si scrivono cose node.js, perché è adatto per scrivere moduli anche se manca di incapsulamento nativo. Inoltre è popolare per molti altri sviluppatori se sfogli i repository su GitHub, quindi la familiarità con questo modello può aiutarti a capire meglio altri codici.

2. Modello del modulo rivelatore

Offre modularità con incapsulamento.

3. Schema ASCIUTTO

Questo è piuttosto specifico per lo scenario, anche se ogni sviluppatore dovrebbe usarlo il più (im) possibile.


Grazie! Bella risposta e il tipo di risposta che speravo. Sebbene la domanda possa essere considerata soggettiva, una buona risposta come questa suggerisce che esiste una risposta appropriata. Attenderà più risposte prima di "disconnettersi".

2

I modelli di progettazione vengono insegnati in classi di progettazione per CS. Non sono essenziali, ma sono davvero utili se riesci a trovare situazioni analoghe per avere una soluzione che è stata pensata.

Inoltre, consente ai programmatori di comunicare più facilmente. Puoi parlare con il tuo collega anche in termini di schemi. Se dici qui che ho il mio osservatore, allora è abbastanza ben compreso cosa stia succedendo.

Le persone troveranno naturalmente soluzioni che si adatteranno da sole a un modello di progettazione, ma i modelli di progettazione aiutano a definire la terminologia e le idee standard che possono essere utili.

Non c'è niente di straordinario negli schemi, la cosa più bella è che sono idee canonizzate e definite in modi che sono ripetutamente utili.


1

Come sviluppatore Javascript consideri i modelli di design tradizionali come importanti o meno importanti

Sono vitali.

Questo perché i concetti di soluzioni riutilizzabili possono trascendere il linguaggio. - modifiche di sintassi - modifiche di implementazione - Esiste ancora la nozione di modello.

Gli sviluppatori di qualsiasi lingua possono apprendere il JS avanzato apprendendo schemi, non sintassi. Coloro che non lo conoscono si stanno perdendo.

Indica i tre principali modelli di design che utilizzi regolarmente come sviluppatore Javascript

Esistono schemi usati frequentemente contro cui alcuni "discuterebbero". Tuttavia, sono utili da sapere perché sono estremamente comuni e potenti nei JS avanzati.

1- Spazio dei nomi: avvolgi il codice in un oggetto.

var x = (function () {}) ();

2- ObjectConfiguration, modello simile a Factory. -Passa un oggetto su una funzione, non un gruppo di variabili.

var product = factory ({});

3- Funzione di richiamata. - Passa una funzione come parametro, da chiamare al termine dell'attività.

function longTask (function () {// chiamami quando finito});

Come ho detto, alcuni potrebbero sostenere che questi non sono schemi, ma sono molto comuni e molto potenti e dovrebbero essere citati perché sono davvero utili riutilizzabili solutoni a problemi comuni. Qual è la definizione di Design Pattern.

Ottima domanda

Spero che sia d'aiuto.

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.