Best practice per la gestione e la distribuzione di grandi applicazioni JavaScript

StackOverflow https://stackoverflow.com/questions/15390

Domanda

Quali sono le procedure standard per la gestione di una medio-grande applicazione JavaScript?Le mie preoccupazioni sono sia la velocità di download del browser, e la facilità e la semplicità di gestione di sviluppo.

Il nostro codice JavaScript è circa il "namespace" come:

var Client = {
   var1: '',
   var2: '',

   accounts: {
      /* 100's of functions and variables */
   },

   orders: {
      /* 100's of functions and variables and subsections */
   }

   /* etc, etc  for a couple hundred kb */
}

Al momento, abbiamo un (scompattato, i, altamente leggibile) file JavaScript per gestire tutta la logica di business dell'applicazione web.Inoltre, c'è jQuery e diversi jQuery estensioni.Il problema che abbiamo di fronte è che ci vuole per sempre per trovare qualcosa nel codice JavaScript e ancora il browser ha una dozzina di file per il download.

È comune avere una manciata di "origine" file JavaScript che viene "compilato" in una finale, compresso file JavaScript?Eventuali altri suggerimenti utili per le migliori prassi?

È stato utile?

Soluzione

L'approccio che ho trovato funziona per me è aver separata, JS file per ogni classe (come in Java, C# e altri).In alternativa, è possibile raggruppare i JS in applicazione aree funzionali se è più facile per voi di navigare.

Se si mettono tutti i vostri JS file in una directory, si può avere il vostro ambiente lato server (PHP, per esempio) loop attraverso ogni file nella directory di output e un <script src='/path/to/js/$file.js' type='text/javascript'> in alcuni file di intestazione che è incluso di tutti i tuoi UI pagine.Troverete questa auto-caricamento di un programma particolarmente utile se si sta regolarmente la creazione e la rimozione di JS.

Durante la distribuzione in produzione, si dovrebbe avere uno script che li unisce tutti in un unico file JS e "minifies" per mantenere le dimensioni in basso.

Altri suggerimenti

Inoltre, ti suggerisco di usare Google AJAX Librerie API per caricare le librerie esterne.

Si tratta di un Google developer tool che bundle maggiori librerie JavaScript e rendere più facile la distribuzione, l'aggiornamento e li rendono più leggeri utilizzando sempre le versioni compresse.

Inoltre, rendere il progetto più semplice e più leggero perché non c'è bisogno di scaricare, copiare e mantenere le tesi di librerie di file nel progetto.

Usarlo in questo modo :

google.load("jquery", "1.2.3");
google.load("jqueryui", "1.5.2");
google.load("prototype", "1.6");
google.load("scriptaculous", "1.8.1");
google.load("mootools", "1.11");
google.load("dojo", "1.1.1");

C'è un ottimo articolo sulla Vitamina da Cal Henderson di Flickr fama su come ottimizzare la consegna di CSS e JavaScript: http://www.iamcal.com/serving-javascript-fast/

Solo un sidenode - Steve già sottolineato, si dovrebbe davvero "minify" il tuo file JS.In JS, gli spazi sono veramente importanti.Se si dispone di migliaia di righe di JS e si striscia solo necessari a capo, hai già risparmiato circa 1K.Penso che si ottiene il punto.

Ci sono strumenti, per questo lavoro.E non si dovrebbe mai modificare la "ridotta"/spogliato/offuscato JS a mano!Mai!

Nel nostro grande applicazioni javascript, scriviamo tutti il nostro codice in piccoli file separati - un file per ogni "classe" o gruppo funzionale, utilizzando una sorta-di-come-Java sorta di spazio di nomi/struttura di directory.Quindi, abbiamo:

  • Un tempo di compilazione passo che si prende tutto il nostro codice e minifies (con una variante di JSMin) per ridurre la dimensione del download
  • Un tempo di compilazione passaggio che porta le classi che sono sempre o quasi sempre necessari e le concatena in un grande pacchetto per ridurre il numero di round trip al server
  • Un 'classloader' che carica i restanti classi a runtime su richiesta.

Per l'efficienza dei server amor, è meglio combinare tutti i javascript in una minified file.

Determinare l'ordine in cui è richiesto il codice e poi posto il minified codice nell'ordine è necessario in un unico file.

La chiave è quello di ridurre il numero di richieste per caricare la tua pagina, che è il motivo per cui si dovrebbe avere tutti i javascript in un unico file per la produzione.

Mi consiglia di mantenere i file divisi per lo sviluppo e quindi creare uno script di compilazione di combinare/compilare tutto.

Inoltre, come buona regola, assicurarsi di includere il vostro JavaScript, verso la fine della pagina.Se JavaScript è incluso nell'intestazione (o ovunque a inizio pagina), si fermerà tutte le altre richieste di essere fatto fino a quando non è caricato, anche se il pipelining è acceso.Se è alla fine della pagina, non hanno questo problema.

Leggere il codice di altri (buona) javascript app e vedere come gestire le cose.Ma io inizio con un file per ogni classe.Ma una volta che è pronto per la produzione, vorrei combinare i file in un unico file di grandi dimensioni e minify.

L'unica ragione, non vorrei combinare i file, se non ho bisogno di tutti i file presenti su tutte le pagine.

La mia strategia consiste in 2 principali tecniche di:AMD moduli (per evitare decine di tag di script) e il Modulo di modello (per evitare strettamente accoppiamento delle parti dell'applicazione)

AMD Moduli:molto dritto in avanti, vedi qui: http://requirejs.org/docs/api.html inoltre è in grado di comprimere tutte le parti della tua app in una minified JS file: http://requirejs.org/docs/optimization.html

Modulo Modello:ho usato questa Libreria: https://github.com/flosse/scaleApp si chiede ora che cosa è questo ?maggiori informazioni qui: http://www.youtube.com/watch?v=7BGvy-S-Iag

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top