it-swarm.com.de

Verzeichnisstruktur für eine Website (Ordner js / css / img)

Seit Jahren verwende ich für meine Websites die folgende Verzeichnisstruktur:

<root>
  ->js
    ->jquery.js
    ->tooltip.js
    ->someplugin.js
  ->css
    ->styles.css
    ->someplugin.css
  ->images
    -> all website images...

es schien mir vollkommen in Ordnung zu sein, bis ich anfing, andere Komponenten von Drittanbietern zu verwenden.
Zum Beispiel habe ich heute eine Datum/Uhrzeit-Auswahl-Javascript-Komponente heruntergeladen, die nach ihren Bildern in demselben Verzeichnis sucht, in dem sich ihre CSS-Datei befindet (CSS-Datei enthält URLs wie "url ('calendar.png')"). .

So, jetzt habe ich 3 Möglichkeiten:

1) füge datepicker.css in mein css-Verzeichnis ein und füge seine Bilder hinzu. Ich mag diese Option nicht wirklich, weil ich sowohl CSS- als auch Image-Dateien im CSS-Verzeichnis haben werde und es seltsam ist. Außerdem kann es sein, dass ich Dateien von verschiedenen Komponenten mit demselben Namen treffe, z. B. 2 verschiedene Komponenten, die von ihren CSS-Dateien aus auf background.png verweisen. Ich muss diese Namenskollisionen beheben (indem ich eine der Dateien umbenenne und die entsprechende Datei bearbeite, die den Link enthält).

2) Legen Sie datepicker.css in mein CSS-Verzeichnis, legen Sie die Bilder in das Images-Verzeichnis und bearbeiten Sie datepicker.css, um nach den Bildern im Images-Verzeichnis zu suchen. Diese Option ist in Ordnung, aber ich muss einige Zeit aufwenden, um Komponenten von Drittanbietern zu bearbeiten, um sie an meine Websitestruktur anzupassen. Auch hier können Namenskollisionen auftreten (wie in der vorherigen Option beschrieben), und ich muss sie beheben.

) lege datepicker.js, datepicker.css und seine Bilder in ein separates Verzeichnis, lass uns/3rdParty/datepicker/sagen und platziere die Dateien so, wie es vom Autor beabsichtigt war (zB/3rdParty/datepicker/css/datepicker.css, /3rdParty/datepicker/css/something.png usw.). Jetzt denke ich, dass diese Option die richtigste ist.

Erfahrene Webentwickler, was empfehlen Sie?

9
nightcoder

Ich erstelle immer ein lib-Verzeichnis für Komponenten von Drittanbietern. Sie möchten wirklich keine Bibliotheken von Drittanbietern ändern, es sei denn, dies ist unbedingt erforderlich.

Fahren Sie mit der dritten Option fort.

9
willvv

Anstatt Dinge nach Dateityp zu trennen, was für mich willkürlich ist, organisiere ich Dateien so, wie Entwickler sie verwenden und über sie nachdenken. Ich teile die Dinge in ein paar grundlegende Kategorien ein:

myapp/
  ui/ # or "www"
    lib/ # third-party
      jquery/
      sugarjs/
      backbone/
      underscore/
    app/ # application logic
      main.js
      router.js
      views.js
      models.js
    style/ # all presentation
      main.css
      buttons.css
      icons/
        add.svg
        log.png
      img/
        logo.png
        signup.png
    components/ # standalone bundles of html/css/js, if necessary
  server/ # or "api" (all server-side logic)
2
Chris Calo

Option 2 ist auch nicht praktisch und gefährlich, da Sie alle Änderungen erneut anwenden müssen (und daher möglicherweise einige vergessen), wenn Sie Ihre Bibliotheken von Drittanbietern aktualisieren. Dies ist sicherlich ein großes Nein, nein! Die Optionen 1 und 3 haben jeweils Vor- und Nachteile. Also mache ich normalerweise eine Kombination aus beidem.

Meine Lösung besteht darin, Option 1 für meine Dateien und Option 3 für Bibliotheken von Drittanbietern zu verwenden.

Beispiel:

<root>
  -> js
    -> jquery.js
    -> main.js
  -> css
    -> reset.css
    -> style.css
  -> img
    -> img1.jpg
    -> img2.jpg
  -> lib
    -> someplugin1
      -> original folder/file structure of this plugin
    -> someplugin2
      -> original folder/file structure of this plugin
0
Mario Awad