Gestione della complessità JavaScript in un grande progetto

Question

Cosa devo usare per gestire un numero crescente di file JavaScript nella mia applicazione?

Stiamo costruendo un'applicazione django con diverse app. Ogni app ha diverse funzionalità e deve essere resa in tre diverse modalità (pc, tablet, mobile). C'è un sacco di cose che accadono in JavaScript: gestione dei dati ricevuti dal server, gestione degli eventi utente, iniezione di snippet HTML e caricamento di sottocomponenti. Alcune delle funzionalità sono condivise tra app e modalità di visualizzazione, ma spesso ha senso scrivere funzioni specifiche (ad esempio, gli eventi di hover e click potrebbero dover essere gestiti in modo diverso su un layout PC rispetto a un layout tablet) quindi stiamo raggruppando questo in file basati su app/layout/funzione.

Fino a un certo punto stavamo usando una struttura di file flat con la denominazione di differenziare i tipi di file:

ui.common.js 
ui.app1.pc.handlers.js 
ui.app1.pc.domManupulators.js 
ui.app1.tablet.js 
ui.app2.pc.js 
... 

In questo momento, tuttavia, come il numero di applicazioni (e casi d'angolo) cresce in questo modo è veloce diventando unusuable (stiamo avvicinando 20+ file e in attesa forse 40+ per il momento abbiamo finito), quindi stiamo mettendo tutto in directory in questo modo:

js/ 
    common/ 
    core1.js 
    ajax2.js 
    app1/ 
    tablet.js 
    pc.js 
    app2/ 
    mobile.js 
    ... 

sono stato a guardare JavaScriptMVC per aiutare con Questo. Sebbene offra strumenti utili, non sembra avere nulla che possa rendere la gestione della nostra gigantesca libreria JavaScript migliore. Stiamo espandendo presto il nostro team di sviluppo e la manutenibilità del codice è molto importante.

C'è qualcosa che potrebbe semplificarci la vita? Ci sono abitudini/regole empiriche che usi nel tuo lavoro che potrebbero alleviare questo?

Answer 1

In genere, è preferibile raggruppare le librerie per comune (come il secondo esempio). Tuttavia, la cosa più importante sarebbe assicurarsi di avere un namespace o renderli in modo univoco in modo tale che difficilmente si possano ottenere conflitti di denominazione con altri potenziali script.

Answer 2

Backbone.js viene utilizzato per organizzare applicazioni pesanti javascript in un modello in stile MVC. Ci vorrà un po 'di apprendimento, ma è sicuramente qualcosa che vorrete approfondire e imparare un po' anche se non si finisce per usarlo.

E 'utilizzato su quite a few pretty impressive projects

Ed, ecco un sito per learn more con tutorial.