Alternativa “architettonico” approcci javaScript codice cliente?

Question

Come è il tuo codice javaScript organizzato?Non seguire schemi come MVC, o qualcos'altro?

Ho lavorato su un progetto parallelo per qualche tempo, e ulteriore trovo più la mia pagina web si è trasformato in una applicazione completa.Ora, mi sto attaccando con jQuery, tuttavia, la logica della pagina sta crescendo a un punto in cui la sua organizzazione, o oserei dire, "architettura" è necessario.Il mio primo approccio è "MVC-ish":

• Il 'modello' è un JSON albero che viene estesa con aiutanti
• La vista è il DOM plus classi di modificarlo
• Il controller è l'oggetto a cui collego eventi gestione e kick off visualizzazione o la manipolazione del modello

Sono molto interessato, tuttavia, come altre persone hanno costruito di più sostanzioso javaScript apps.Io non sono interessato a GWT, o altri server-oriented si avvicina...solo in un approccio di "javaScript + <generic web="" service-y="" thingy="" here="">"

Nota:prima ho detto javaScript "non è davvero OO, non è proprio funzionale".Questo, penso, distratto tutti.Mettiamola in questo modo, perché javaScript è unico in molti modi, e vengo da un tipizzata in background, non voglio per forza paradigmi, lo so, ma sono stati sviluppati in linguaggi differenti.

Answer 1

..ma Javascript ha molte sfaccettature che sono OO.

Considerate questo:

var Vehicle = jQuery.Class.create({ 
   init: function(name) { this.name = name; } 
});

var Car = Vehicle.extend({ 
   fillGas: function(){ 
      this.gas = 100; 
   } 
});

Ho usato questa tecnica per creare a livello di pagina javascript classi che hanno il loro proprio stato, questo aiuta a mantenere in esso contenute (e mi capita spesso di identificare le aree che si possono riutilizzare e mettere in altre classi).

Questo è particolarmente utile quando si dispone di componenti/controlli server che hanno la loro esecuzione dello script, ma quando si potrebbe avere più istanze di una stessa pagina.Ciò mantiene lo stato separato.

Answer 2

JavaScriptMVC è una grande scelta per l'organizzazione e lo sviluppo di una grande scala JS applicazione.

Il disegno di architettura molto ben pensato.Ci sono 4 cose che si potrà mai fare con JavaScript:

1. Rispondere a un evento
2. Richiesta Dati / Manipolare Servizi (Ajax)
3. Aggiungi dominio informazioni specifiche per l'ajax risposta.
4. Aggiornamento DOM

JMVC divide il Modello, View, Controller pattern.

Il primo, e probabilmente il vantaggio più importante, è il Controller.Controller di utilizzare l'evento di delega, così invece di attaccare gli eventi, è sufficiente creare regole per la tua pagina.Usano anche il nome del Controller di limitare la portata di quello che il controller funziona.Questo rende il vostro codice di tipo deterministico, nel senso che se vedi un evento accada in un '#todos' elemento sai che ci deve essere una todos controller.

$.Controller.extend('TodosController',{
   'click' : function(el, ev){ ... },
   '.delete mouseover': function(el, ev){ ...}
   '.drag draginit' : function(el, ev, drag){ ...}
})

Poi viene il modello.JMVC fornisce una potente Classe e modello di base, che ti permette di organizzare la funzionalità Ajax (#2) e avvolgere i dati con il dominio funzionalità specifiche (#3).Quando è completo, è possibile utilizzare i modelli dal controller come:

Todo.findAll({dopo:new Date()}, myCallbackFunction);

Infine, una volta che il vostro todos tornare indietro, non abbiamo la loro visualizzazione (#4).Questo è dove si utilizza JMVC vista.

'.show click' : function(el, ev){ 
   Todo.findAll({after: new Date()}, this.callback('list'));
},
list : function(todos){
   $('#todos').html( this.view(todos));
}

In 'vista/cose da fare/elenco.ejs'

<% for(var i =0; i < this.length; i++){ %>
   <label><%= this[i].description %></label>
<%}%>

JMVC fornisce molto più di una architettura.Aiuta in ogni parte del ciclo di sviluppo con:

• Generatori di codice
• Browser integrato, Selenio, e Rhino Test
• Documentazione
• Script di compressione
• Segnalazione errori

Answer 3

MochiKit è grande, e fu il mio primo amore, per così dire, per quanto riguarda librerie js andare.Ma ho trovato che, mentre MochiKit è molto espressivo sintassi, non sentire quasi più confortevole per me come Prototipo/Scriptaculous o jQuery fatto per me.

Penso che se si sa o come python, quindi MochiKit è un ottimo strumento per voi.

Answer 4

Grazie a tutti gentilmente per le vostre risposte.Dopo qualche tempo, mi piacerebbe postare quello che ho imparato finora.

Finora, vedo una grande differenza di approccio che utilizza qualcosa di simile Ext, e gli altri come JQuery UI, Scriptaculous, MochiKit, etc.

Con Ext, l'HTML è un solo segnaposto - UI va qui.Da allora in poi, tutto è descritto in JavaScript.DOM interazione è ridotta al minimo con un altro (forse più forte) strato di API.

Con altri kit, devo iniziare facendo un po ' di HTML design, per poi estendere il DOM direttamente con sgargianti effetti, o semplicemente sostituendo il modulo di input qui, un'aggiunta ci.

Le principali differenze cominciano ad accadere, come ho bisogno di trattare con la gestione degli eventi, etc.Come moduli bisogno di "parlare" tra di loro, mi trovo a dover fare un passo via da DOM, astraendo via in pezzi.

Faccio notare che molte di queste biblioteche includono anche alcune interessanti tecniche di modularizzazione così.Una descrizione chiara, hanno contribuito in Ext sito, che comprende un modo elegante per "proteggere" il codice dei moduli.

Un nuovo giocatore che non ho ancora completamente valutato è Sproutcore.Sembra Ext in approccio, dove il DOM è nascosto, e soprattutto si vuole affrontare con il progetto di API.

Answer 5

Tristan, si noterà che quando si tenta di architettura JavaScript come un'applicazione MVC tende a salire a breve in una zona-il modello.L'aspetto più difficile da affrontare è il modello, in quanto i dati non persistono per tutta l'applicazione, e, per natura, le modelle sembrano cambiare sul lato client piuttosto coerente.Si potrebbe standardizzare le modalità di passaggio e la ricezione di dati dal server, ma a quel punto che il modello non è in realtà appartengono a JavaScript -- appartiene alla vostra applicazione lato server.

Ho avuto modo di vedere un tentativo un po ' indietro, dove qualcuno ha creato un quadro di riferimento per la modellazione dei dati in JavaScript, come SQLite appartiene all'applicazione.Era come Modello.selezionare( "Prodotto" ) e il Modello.aggiornamento( "Prodotto", "Alcuni dati..." ).Si trattava in sostanza di un oggetto di notazione, che ha tenuto un po ' di dati per gestire lo stato della pagina corrente.Tuttavia, il minuto di aggiornamento, di tutti i dati persi.Probabilmente sono off sulla sintassi, ma si ottiene il punto.

Se si utilizza jQuery, quindi Ben approccio è davvero il migliore.Estendere l'oggetto jQuery con le funzioni e proprietà, e quindi distinguere il "controller".Io di solito fare questo mettendo in diversi file di origine, e di caricarli su una sezione per sezione base.Per esempio, se si trattasse di un sito di e-commerce, potrei avere un file JS completa di controller per gestire la funzionalità per il processo di checkout.Questo tende a mantenere le cose leggero e facile da gestire.

Answer 6

Basta un rapido chiarimento.

E ' perfettamente possibile scrivere GWT applicazioni che non sono server-oriented.Io parto dal presupposto che da Server-Oriented significa GWT RPC che ha bisogno di java back-end.

Ho scritto GWT le applicazioni che sono molto "MVC-ish" sul lato client da solo.

• Il modello è stato di un oggetto grafico.Anche se il codice in Java, in fase di esecuzione gli oggetti in javascript senza la necessità di qualsiasi JVM nel client o lato server.GWT supporta anche JSON con completa analisi e la manipolazione di supporto.È possibile connettersi a JSON webservices facilmente, vedere 2 per un JSON mashup esempio.
• Vista era composto di standard GWT widget (più di un widget composito)
• Controller di livello nettamente separati da Visualizzare tramite il pattern Observer.

Se il tuo "tipizzata" sfondo è con Java o simili lingua, penso che si dovrebbe considerare seriamente di GWT per progetti di grandi dimensioni.Per i piccoli progetti, io di solito preferisco jQuery.Prossima GWTQuery che funziona con GWT 1.5 può cambiare, che anche se non nel prossimo futuro a causa della abbondanza di plugin per jQuery.

Answer 7

Non sono sicuro al 100% di quello che intendi, ma devo dire che dopo aver fatto ASP.NET per gli ultimi 6 anni, le mie pagine web sono ora in gran parte guidato da JavaScript una volta che la base di rendering della pagina viene eseguito dal server.Io uso JSON per tutto (sono stato per circa 3 anni) e l'uso MochiKit per il mio lato client esigenze.

A proposito, JavaScript è OO, ma in quanto utilizza il prototipo di eredità, la gente non dare credito a quel modo.Vorrei anche dire che è funzionale, tutto dipende da come lo si scrive.Se siete veramente interessati nella programmazione funzionale stili, check-out MochiKit - può piacere;si sporge un po ' verso la programmazione funzionale lato di JavaScript.