Come organizzare le funzioni JS in più file

Question

Provenendo da uno sfondo OOP classico Recentemente ho iniziato a imparare di più su JavaScript. Tuttavia, c'è una cosa che non riesco a capire:

Nei linguaggi OOP classici di solito si crea un file separato per ogni classe, poiché ciò semplifica la manutenzione del codice. JS non ha classi reali e, per quanto ne so, non esiste anche un vero e proprio modo per includere un altro file JS da un file. Tuttavia, quando lavori con un team su un grande progetto JS, probabilmente vuoi dividere il progetto in più file. Come è fatto? Cosa inserisci in questi file e come li fai caricare correttamente?

Answer 1

Amo la tua domanda. Scrivo il mio JavaScript molto orientato agli oggetti e mantengo i miei costruttori di oggetti nei propri file. Lancio tutti i miei file .js in una directory che posso organizzare in sottodirectory in qualsiasi modo desideri. Quindi eseguo uno script "make". Quello che segue è uno script di Bash che ho scritto. Lavoro su una macchina Linux, quindi lo scripting di Bash è una soluzione naturale per chiunque lavori su Linux.

#!/bin/bash 

echo '' > temp0.js 
find ./bin/external -name \*.js -exec cat {} >> temp0.js \; 

echo ''> temp1.js 
echo '(function(){' > temp1.js 
find ./bin/prop -name \*.js -exec cat {} >> temp1.js \; 
echo '})();' >> temp1.js 

cat temp0.js temp1.js > script.js 
rm temp1.js temp0.js 

Perdonami se questo script di bash è amatoriale. Ammetterò prontamente in scripting bash. Ho appena messo insieme tutto ciò che funziona, ma mi piace che il mio JavaScript sia pulito e organizzato e Object Oriented.

Questo script di bash va in una directory accanto a una directory denominata "bin" che contiene tutti i file js JavaScript. Qui, la sottodirectory "external" contiene vari script presi in prestito come JQuery. Sto mettendo i miei script .js in una cartella chiamata "prop" nell'esempio sopra. Lo script bash acquisisce tutti questi script e li concatena. Inoltre, avvolge i miei file prop in una funzione anonima per assegnare loro uno spazio dei nomi privato (sortof).

Immagino sia chiaro che non è esattamente quello che volevi - Java - ma penso che questo tipo di opzione sia ciò che dobbiamo fare con JavaScript.

Answer 2

È possibile raggruppare i file in qualsiasi metodo logico che si desidera. Tipicamente è fatto per caratteristica - questo file anima il logo, questo file fa funzionare la presentazione della homepage, questo file gestisce i menu a discesa della barra di navigazione. Immagino che in genere avresti la tua squadra divisa in un'organizzazione simile, in cui ogni persona è responsabile di una particolare caratteristica. Oltre a ciò, la gestione del controllo del codice sorgente funziona come qualsiasi altro progetto, in cui gli utenti devono controllare o eseguire il commit del codice mentre lavorano su di esso.

Answer 3

Il modello di prototipo di JavaScripts è molto OOP e sei libero di suddividere il codice in tutti i file che vuoi. Esistono diversi modi per caricare le dipendenze, poiché RequireJS è molto popolare.

Answer 4

Dovrai segmentare il codice in qualsiasi modo abbia senso per il tuo progetto.

Per quanto riguarda come includere gli script, è più difficile. Il modo più semplice è quello di includere solo più file JavaScript, sia in modo sequenziale chiamato dal codice HTML (<script src="..."></script><script src="..."></script>) oppure con un gestore dipendenza o script di caricamento come Yepnope o RequireJS ..

Tuttavia, se si desidera includere un solo script dal tuo HTML, puoi concatenare i file (usando uno script di build con Ant o qualcosa di simile) o modificare Javascript per includere altri script come descritto qui: How do I include a JavaScript file in another JavaScript file?