it-swarm.com.de

Bewährte Methode zum Organisieren der Struktur von Javascript-Bibliotheken und CSS-Ordnern

Wie organisieren Sie Ihren Ordner "js & css" in Ihrer Webanwendung?

Meine aktuelle Projektstruktur sieht so aus:

root/
  assets/
    js/
      lib/
    css/
    img/
  index.html

Aber es ist komplizierter, wenn ich viele Javascript-Bibliotheken und CSS-Plugins verwende. Das Javascript-Plugin wird mit einer eigenen .js-Datei und manchmal mit einer eigenen .css-Datei geliefert.

Wenn ich beispielsweise JQuery mit dem JQueryUI-Plugin verwende, lege ich die Dateien jquery.js und jquery-ui.js in das Verzeichnis js/lib. Aber JQueryUI kommt mit einer eigenen CSS-Datei. Wo soll ich die CSS von Javascript-Plugin für die beste Praxis setzen? Sollte ich sie in den lib-Ordner legen, um mein CSS- und Javascript-CSS-Plugin zu unterscheiden? Oder irgendwo anders?

Ich weiß, dass es persönliche Vorlieben sind, aber ich möchte nur wissen, wie ihr euren Projektordner organisiert.

Danke im Voraus :)

89
Willy Lazuardi

So organisieren Sie Ihre HTML-, CSS- und Javascript-Dateien

Ich werde eine empfohlene Struktur zum Organisieren von Dateien in Ihrer HTML5-Anwendung skizzieren. Dies ist kein Versuch, irgendeine Art von Standard zu schaffen. Stattdessen mache ich Vorschläge, wie Sie Dateien logisch und bequem gruppieren und benennen können.

Dein Projekt

Angenommen, Sie erstellen eine HTML5-Anwendung. In einigen Fällen können Sie das Stammverzeichnis Ihres Servers als Hauptcontainer verwenden. Für den Zweck dieses Artikels gehe ich jedoch davon aus, dass sich die HTML5-Anwendung in einem Ordner befindet. In diesem Ordner müssen Sie Ihre Anwendungsindexdatei oder Ihren Haupteinstiegspunkt erstellen.

  • Appcropolis-Projekt
    • my-index.html

Im Allgemeinen besteht Ihre Anwendung aus HTML-, CSS-, Bild- und Javascript-Dateien. Einige dieser Dateien sind spezifisch für Ihre Anwendung, andere können für mehrere Anwendungen verwendet werden. Dies ist eine sehr wichtige Unterscheidung. Um eine effektive Gruppierung Ihrer Dateien zu erreichen, müssen Sie zunächst die Allzweckdateien von den anwendungsspezifischen Ressourcen trennen.

voll ">
  • Appcropolis-Projekt
    • Ressourcen
    • Anbieter
    • my-index.html

Diese einfache Trennung erleichtert das Navigieren in Ihren Dateien erheblich. Sobald Sie Bibliotheken und Allzweckdateien in den Ordner vendors gelegt haben, ist klar, dass sich die zu bearbeitenden Dateien im Ordner resources befinden.

Abgesehen von Ihrem HTML-Code sind die restlichen Dateien in Ihrer Anwendung hauptsächlich CSS, Javascript und Bilder. Möglicherweise gruppieren Sie Ihre Anwendungsdateien bereits in Ordnern, die diesen Assets entsprechen.

  • Appcropolis-Projekt
    • Ressourcen
      • css
      • js
      • Bilder
      • Daten
    • Anbieter
    • my-index.html

Der Ordner js enthält Ihren Javascript-Code. Ebenso ist der Ordner images der Ort, an dem Sie Bilder hinzufügen sollten, die direkt aus der index.html oder einer anderen Seite in Ihrer Anwendung verwendet werden. Dieser Ordner images sollte nicht zum Hosten von Stylesheet-bezogenen Dateien verwendet werden. Ihr CSS-Code und die zugehörigen Bilder sollten sich im Ordner css befinden. Auf diese Weise können Sie Seiten erstellen, die problemlos unterschiedliche Designs verwenden können, und Ihre Anwendung kann portabler sein.

  • Appcropolis-Projekt
    • Ressourcen
      • css
        • blue-theme
          • background.png
        • Bilder
          • background.png
        • blue-theme.css
        • my-index.css
      • js
        • my-index.js
        • my-contact-info.js
      • Bilder
        • Produkte
          • computer.jpg
          • cellphone.png
          • printer.jpg
        • mein-firmenlogo-klein.png
        • mein-firmenlogo-gross.png
      • Daten
        • some-data.json
        • more-data.xml
        • table-data.csv
        • extra-data.txt
    • Anbieter
      • jquery
        • Bilder
          • ajax-loader.gif
          • icons-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
    • meine-kontakt-info.html
    • my-products.html

Das vorherige Beispiel zeigt den Inhalt des Ordners css. Beachten Sie, dass es eine Datei mit dem Namen default.css gibt, die als Haupt-CSS-Datei verwendet werden sollte. Vom Standard-Stylesheet verwendete Bilder sollten im Ordner images abgelegt werden. Wenn Sie alternative Stylesheets erstellen oder in Ihrem Standard-Stylesheet definierte Regeln überschreiben möchten, können Sie zusätzliche CSS-Dateien und die entsprechenden Ordner erstellen. Beispielsweise können Sie ein Stylesheet blue-theme.css erstellen und alle zugehörigen Bilder in einem Ordner blue-theme ablegen. Wenn Sie über CSS- oder Javascript-Code verfügen, der nur von einer Seite verwendet wird (in diesem Fall my-index.html), können Sie seitenbezogenen Code in CSS- und JS-Dateien mit demselben Seitennamen (z. B. my-index) gruppieren .css und my-index.js). Ihr CSS- und Javascript-Code sollte so allgemein wie möglich sein, aber Sie können Ausnahmen nachverfolgen, indem Sie sie in separaten Dateien ablegen.

Abschließende Empfehlungen

Einige abschließende Empfehlungen müssen in Bezug auf Ordner- und Dateinamen gegeben werden. Stellen Sie in der Regel sicher, dass Sie in allen Ordner- und Dateinamen Kleinbuchstaben verwenden. Wenn Sie mehrere Wörter zum Benennen einer Datei oder eines Ordners verwenden, trennen Sie diese mit einem Bindestrich (d. H. My-company-logo-small.png). Wenn Sie den Ratschlägen in diesem Artikel folgen, sollten Sie in der Lage sein, mehrere Seiten zu kombinieren, während Sie gemeinsame Ressourcen zusammenhalten und benutzerdefinierten Code gut voneinander trennen.

Selbst wenn Sie sich nicht für die in diesem Artikel empfohlene Struktur entscheiden, ist es wichtig, sich an eine Konvention zu halten. Dies erhöht Ihre Produktivität und macht die Arbeit, die Sie erledigen, für andere leichter verständlich.

125
Anant Dabhi
 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

Auf diese Weise habe ich die statischen Ressourcen meiner Anwendung organisiert.

9
Akhlesh