Come strutturare un progetto JavaScript usando RequireJS

Question

Attualmente sto lavorando su un grande progetto JavaScript per il quale vogliamo definire la nostra API. Sto usando RequireJS come caricatore delle dipendenze e mi sta benissimo, permettendomi di definire i moduli nei rispettivi file. Non faccio uso del mio proprio spazio dei nomi, un modulo restituisce un esempio, che può essere utilizzato in altri moduli, vale a dire:

define(
    ['imported_module'], 
    function(module){ 
     module.doSomething(); 
    } 
) 

Tuttavia, come il numero di file cresce, mi piacerebbe decidere come strutturare questi file in cartelle. Attualmente io uso il seguente schema per nominare i miei file:

[projectname].[packagename].[ModuleName] 

Un esempio potrebbe essere stackoverflow.util.HashMap.js. Vorrei introdurre una cartella di progetto, una cartella per ogni pacchetto e rinominare i file per il nome del modulo, come:

stackoverflow/util/HashMap.js 

Questo strutture il mio codice abbastanza ordinatamente in cartelle, tuttavia il nome del file riflette solo il modulo ora. Mi piacerebbe definire una sorta di routing per poter definire come RequireJS dovrebbe cercare i file. Esempio:

Il file

stackoverflow/util/stackoverflow.util.HashMap.js 

dovrebbe essere importabile dalla dichiarazione

define(['stackoverflow.util.HashMap'],function(HashMap){}); 

Qualcuno ha esperienza con grandi progetti strutturanti JavaScript e in caso affermativo, potrebbe condividere il tuo approccio?

Answer 1

Non specificare le informazioni di instradamento sui nomi file js, questi sono i lavori dei percorsi dei nomi e dei percorsi delle cartelle. Quindi stackoverflow/util/HashMap.js va bene. E puoi usare define ("stackoverflow/util/HashMap", ....) per dire la dipendenza.

Se è necessario inserire i moduli in cartelle diverse, è possibile configurare percorsi per il caricatore, vedere this manual dall'API RequireJS.

Non esiste il modo migliore per strutturare i file js. Ma mettere lo spazio dei nomi di root in una cartella src è sempre una buona pratica. Puoi vedere lo dojo source code e lo YUI source code e utilizzare metodi simili per il tuo progetto. Entrambi sono progetti Javascript su larga scala.

Answer 2

in realtà è meglio ottenere il routing della js lib per caricare tutti i js usando l'interfaccia standard: "js.yoursite.com/lib-0.2.js" ci dovrebbe essere un router (php o altro, capace di memorizzare le query nella cache). Quindi lì puoi determinare e controllare interi percorsi che usi. Perché il comune plugin jquery dovrebbe rimanere in una dir, con jquery e i tuoi plugin personalizzati no.

E il gioco è controllare ogni progetto con un proprio disciplinare:

jquery/ 
    plugins/ 
    jquery.prettyPhoto.js 
    jquery.min.js 

mySuperJS/ 
    stable.0/ -- there your production version for 1.0 branch 
    module.js 
    0.1/ 
    module.js 
    0.2/ 
    module.js 
    0.3/ 
    module.js 

myOtherlib/ 
    stable.0/ -- production version for all 0.* versions 
    stable.1/ -- production version for all 1.0 versions 
    0.1/ 
    0.2/ 
    0.3/ 
    0.4/ 
    0.4.1/ 
    0.4.1.18/ 

Stiamo utilizzando tale struttura circa un anno ed è il meglio per noi. Ma a volte utilizziamo soluzioni più complesse e separiamo tutti i moduli per lib, plug-in, strumenti, componenti e app.