Design Patterns per Javascript [duplicato]

Namespacing : non dimenticare di usare gli oggetti come pseudo-pacchetto (la maggior parte dei framework fa questo, dovresti anche):

var YourCompany = {};

YourCompany.util = {};

YourCompany.util.myFunction = function() { /* ...  */ }

Non devi necessariamente configurarlo in questo modo e utilizzare le convenzioni di denominazione che preferisci, ma il namespaces ti aiuterà molto (facilita anche il refactoring di search-and-replace quando decidi di spostare qualcosa).

alcune persone non si rendono conto che JS è completamente orientato agli oggetti. Puoi creare qualcosa che funzioni come una classe:

function Car() {
    this.publicField = "bad";
    var privateField = "good";
    var self = this;

    this.publicMethod = function() {
        alert("I can access " + this.publicField + " and " + privateField);
    }

    function privateMethod() {
        alert("I can access " + self.publicField + " and " + privateField);
    }
}

puoi creare un'istanza di quelle classi:

var car = new Car();

e supporta ereditarietà :

function Vehicle() { /* define class */ }

function Truck() { /* define class */ }
Truck.prototype = new Vehicle();

e può persino aggiungere metodi a classi esistenti:

Array.prototype.remove = function() {
}

Se desideri saperne di più sul supporto OO di JavaScript, ti consiglio vivamente il libro di Rhino .

Questo link descrive, meglio di quanto potrei, un modo sano per l'architettura un'applicazione JavaScript medio-grande. Tra le altre cose, questo comporta:

• Suddividere il codice in moduli, utilizzando lo schema del modulo
• Lasciando che i moduli dichiarino le loro dipendenze e caricandoli in modo asincrono tramite uno strumento come RequireJS
• Namespacing gli oggetti globali definiti
• Estrarre la libreria di manipolazione DOM (questo ha senso solo per progetti abbastanza grandi)
• Seguendo (alcune variazioni) lo schema MVC, lasciando ai modelli il ruolo della persistenza dei dati e delle chiamate AJAX, per controllare il ruolo della gestione degli eventi e per visualizzare il ruolo del DOM e le manipolazioni di stile
• Riduzione al minimo della comunicazione tramite moduli indipendenti, tramite un nucleo che invia messaggi
• Progettazione di un meccanismo che riavvia il modulo non appena viene generata un'eccezione. Di conseguenza, progettando i moduli in modo che il loro riavvio non abbia conseguenze inaspettate (come disegnare due elementi dell'interfaccia utente due volte)
• Combina parti riutilizzabili dell'interfaccia utente in widget

Suggerirei di usare namespaces e quindi una struttura di file che rispecchia lo spazio dei nomi. Ad esempio, utilizzando la risposta di Brad, avrei Truck.js , Car.js e Vehicle.js . Questo dovrebbe darti una base di codice che è più facile da mantenere, organizzare e unit test. Tuttavia, dovresti avere una sorta di processo di compilazione che concatena e ottimizza i tuoi file JS multipli pronti per la produzione.

Con una base di codice organizzata di oggetti prototipali dovresti essere in grado di implementare la maggior parte dei modelli di progettazione. Ci sono anche alcuni buoni libri su questo argomento . Questa presentazione di Nicholas Zackas è anche utile per avere un'idea di come costruire buone app JavaScript.

Inoltre, in Javascript, penso che sia anche importante distinguere tra modelli e tecniche. È necessario avere familiarità con varie tecniche di uso comune a cui JS manca in modo nativo, come il namespace. Ma queste sono tecniche non modelli; tecniche che rendono più facile la costruzione di modelli come quelli definiti dalla Gang of Four.

Mi spiace questo un breve riassunto. Ma raccomando vivamente le risorse che ho menzionato per ottenere maggiori informazioni.

Ci sono alcuni nuovi articoli aggiunti di recente che si concentrano sull'implementazione di modelli di progettazione JavaScript e alcuni Modelli di progettazione Gang-of-Four utilizzando JavaScript:

1. JavaScript Design Patterns: Chain of Responsibility (Ultimo aggiornamento 20 febbraio 2012) - Sebbene questo articolo si concentri ovviamente su Chain of Responsibility , ha collegamenti a molti degli altri pattern GoF implementati in JavaScript.
2. JavaScript essenziale e amp; jQuery Design Patterns (Ultimo aggiornamento 30 aprile 2012)

L'utilizzo di jQuery è un ottimo inizio. JavaScript in un browser aumenta il frontend, non c'è un "pattern" MVC o qualcosa da seguire. Esistono alcune "migliori pratiche" che aiutano a mantenere pulito il codice.

• Funzioni separate per cose separate. Associazioni in una, azioni in un'altra. Utilizza this e le classi per le azioni.
• Ricorda che JavaScript consente una grande flessibilità, passando le chiusure in giro mentre vengono create può aiutare a semplificare le associazioni e alleggerire il codice.
• Scudo dall'ambito globale, esponi solo ciò che è necessario.
• Utilizza JSLint per mantenere il tuo codice conforme agli standard.

Per il lato server / JavaScript non-browser (come Node.js) ci sono diversi ottimi framework per la realizzazione di. Potrebbe valere la pena sfogliando la fonte per vedere se riesci a cogliere qualsiasi cosa.

L'ho spostato in una voce più approfondita per gli interessati .

Da un punto di vista pratico, dai un'occhiata a AngularJS e KnockoutJS . Questi framework risolvono i problemi reali che si incontrano durante la creazione di applicazioni pesanti JS. Angular è una soluzione più "all inclusive" con molte funzionalità avanzate, mentre Knockout affronta solo il problema dell'aggiornamento dell'interfaccia utente in tempo reale. Entrambe sono molto belle e, se utilizzate correttamente, possono aiutare a strutturare l'applicazione in uno stile MVC mentre sono effettivamente produttive. Ci sono una miriade di altre "librerie JavaScript MVC" là fuori, ma francamente, la maggior parte di loro prova solo a calzare un pattern MVC senza realmente risolvere alcun problema nel mondo reale.

Come commentato, Modelli JavaScript è un libro molto utile che prende in considerazione i modelli di livello inferiore utile nella lingua