Best practice per organizzare la libreria Javascript e la struttura delle cartelle CSS [chiuso]


110

Come organizzi la tua cartella js e css nella tua applicazione web?

La struttura del mio progetto attuale è simile a questa:

root/
├── assets/
   ├── js/
      └──lib/
   ├── css/
   └── img/
└── index.html

Ma è più complicato quando uso molte librerie javascript e plugin css. Il plugin Javascript viene fornito con il proprio file .js e talvolta con il proprio file .css.

Ad esempio, quando utilizzo JQuery con il plug-in JQueryUI, inserisco jquery.js e jquery-ui.js nella directory js / lib. Ma JQueryUI viene fornito con il proprio file css. Dove dovrei mettere il css dal plugin javascript per le migliori pratiche? Devo metterli nella cartella lib, per distinguere il mio plugin css e javascript css? O da qualche altra parte?

So che è una preferenza personale, ma voglio solo sapere come organizzate la cartella del progetto.

Grazie in anticipo :)


mantieni CSS nella stessa cartella di JS se il CSS è correlato al componente. Vale a dire. hai table.js, quindi table.css si trova accanto ad esso nella cartella. In questo modo non ti perderai cercando di trovare CSS
Oliver Watkins

Dipende dalla scala del progetto. in generale, IMHO, tutti i progetti dovrebbero usare task runner (NPM / GULP) quindi dovresti avere una buildcartella e una srccartella probabilmente.
vsync

Le cartelle CSS e Js sono stili e script di oggi
Yousha Aleayoub

Risposte:


140

Descriverò una struttura consigliata per organizzare i file nella tua applicazione HTML5. Questo non è un tentativo di creare alcun tipo di standard. Invece, darò suggerimenti su come raggruppare e denominare i file in modo logico e conveniente.

Il tuo progetto

Supponiamo che tu stia creando un'applicazione HTML5. In alcuni casi potresti utilizzare la radice del tuo server come contenitore principale, ma ai fini di questo articolo presumo che l'applicazione HTML5 sia contenuta in una cartella. All'interno di questa cartella è necessario creare il file di indice dell'applicazione o il punto di ingresso principale.

  • appcropolis-project
    • my-index.html

In generale, la tua applicazione sarà composta da file HTML, CSS, immagini e Javascript. Alcuni di questi file saranno specifici della tua applicazione e altri potranno essere utilizzati in più applicazioni. Questa è una distinzione molto importante. Per eseguire un raggruppamento efficace dei file, è necessario iniziare separando i file di uso generale dalle risorse specifiche dell'applicazione.

  • appcropolis-project
    • risorse
    • fornitori
    • my-index.html

Questa semplice separazione semplifica notevolmente la navigazione tra i file. Dopo aver posizionato le librerie e i file generici nella cartella dei fornitori , è chiaro che i file che verranno modificati si troveranno nella cartella delle risorse .

A parte il codice HTML, il resto dei file nella tua applicazione sono principalmente CSS, Javascript e immagini. È probabile che tu abbia già raggruppato i file dell'applicazione all'interno di cartelle che corrispondono a questo tipo di risorse.

  • appcropolis-project
    • risorse
      • css
      • js
      • immagini
      • dati
    • fornitori
    • my-index.html

La cartella js conterrà il tuo codice Javascript. Allo stesso modo, la cartella delle immagini è il luogo in cui è necessario aggiungere immagini che vengono utilizzate direttamente da index.html o da qualsiasi altra pagina dell'applicazione. Questa cartella di immagini non deve essere utilizzata per ospitare file relativi ai fogli di stile. Il tuo codice CSS e le immagini correlate dovrebbero trovarsi all'interno della cartella css . In questo modo, puoi creare pagine che possono facilmente utilizzare temi diversi e consentire alla tua applicazione di essere più portabile.

  • appcropolis-project
    • risorse
      • css
        • blue-tema
          • background.png
        • immagini
          • background.png
        • blue-theme.css
        • my-index.css
      • js
        • my-index.js
        • my-contatto-info.js
      • immagini
        • prodotti
          • computer.jpg
          • cellphone.png
          • printer.jpg
        • my-società-logo-small.png
        • my-società-logo-large.png
      • dati
        • some-data.json
        • più-data.xml
        • table-data.csv
        • Extra-data.txt
    • fornitori
      • jquery
        • immagini
          • ajax-loader.gif
          • icone-18-white.png
        • jquery.min.js
        • jquery.mobile-1.1.0.min.css
        • jquery.mobile-1.1.0.min.js
      • some-css-library
      • some-plugin.jquery
    • my-index.html
    • my-contatto-info.html
    • my-prodotti.html

L'esempio precedente mostra il contenuto della cartella css . Si noti che esiste un file denominato default.css che dovrebbe essere utilizzato come file CSS principale. Le immagini utilizzate dal foglio di stile predefinito dovrebbero essere inserite nella cartella delle immagini . Se desideri creare fogli di stile alternativi o se desideri sovrascrivere le regole definite nel tuo foglio di stile predefinito, puoi creare file CSS aggiuntivi e le cartelle corrispondenti. Ad esempio, puoi creare un foglio di stile blue-theme.css e inserire tutte le immagini correlate all'interno di un file tema blucartella. Se hai codice CSS o Javascript che viene utilizzato solo da una pagina (in questo caso my-index.html), puoi raggruppare il codice specifico della pagina all'interno di file .css e .js con lo stesso nome della pagina (ei my-index .css e my-index.js). Il tuo codice CSS e Javascript dovrebbe essere il più generico possibile, ma puoi tenere traccia delle eccezioni inserendole in file separati.

 

Raccomandazioni finali

Alcune raccomandazioni finali devono essere fatte sui nomi di cartelle e file. Come regola generale, assicurati di utilizzare lettere minuscole in tutti i nomi di cartelle e file. Quando si utilizzano più parole per denominare un file o una cartella, separarli con un trattino (ad esempio, my-company-logo-small.png). Se segui i consigli in questo articolo dovresti essere in grado di combinare più pagine mantenendo le risorse comuni insieme e il codice personalizzato ben separati.

Infine, anche se non scegli di utilizzare la struttura consigliata in questo articolo, è importante attenersi a una convenzione. Aumenterà la tua produttività e, cosa più importante, renderà il lavoro che svolgi facilmente comprensibile agli altri.

Fonte di credito: come organizzare i file HTML, CSS e Javascript


1
Ciao, Anant. Potresti aiutarmi con la prossima domanda: stackoverflow.com/questions/33837168/…
Maxim Zhukov

1
Dove metteresti i file video e audio? o file di caratteri personalizzati?
boblapointe

17
Plagio palese
OneCricketeer

1
Le cartelle CSS e Js sono stili e script di oggi
Yousha Aleayoub

14
 root/
   assets/
      lib/-------------------------libraries--------------------
          bootstrap/--------------Libraries can have js/css/images------------
              css/
              js/
              images/  
          jquery/
              js/
          font-awesome/
              css/
              images/
     common/--------------------common section will have application level resources             
          css/
          js/
          img/

 index.html

È così che ho organizzato le risorse statiche della mia applicazione.


ma dove metti i file sorgente JS e i file minimizzati?
Kokodoko

puoi tenerlo nella stessa directory.
Akhlesh

4
Penso che dovrebbero esserci directory separate per sorgente e distribuzione
Anoop D
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.