Best Practice zum Organisieren der Struktur der Javascript-Bibliothek und des CSS-Ordners [geschlossen]

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

Meine aktuelle Projektstruktur sieht folgendermaßen 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. JQueryUI wird jedoch mit einer eigenen CSS-Datei geliefert. Wo soll ich das CSS vom Javascript-Plugin für Best Practice ablegen? Sollte ich sie in den lib-Ordner legen, um mein CSS- und Javascript-CSS-Plugin zu unterscheiden? Oder irgendwo anders?

Ich weiß, dass es eine persönliche Präferenz ist, aber ich möchte nur wissen, wie ihr euren Projektordner organisiert.

Danke im Voraus :)

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 werde ich Vorschläge machen, wie Dateien auf logisch bequeme Weise gruppiert und benannt werden 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 Ihre HTML5-Anwendung in einem Ordner enthalten ist. In diesem Ordner müssen Sie Ihre Anwendungsindexdatei oder den Haupteinstiegspunkt erstellen.

• Appcropolis-Projekt
• my-index.html

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

• Appcropolis-Projekt
• Ressourcen
• Anbieter
• my-index.html

Diese einfache Trennung erleichtert das Navigieren durch Ihre Dateien erheblich. Sobald Sie Bibliotheken und Allzweckdateien im Ordner des Anbieters abgelegt haben, befindet sich die zu bearbeitende Datei eindeutig im Ressourcenordner .

Abgesehen von Ihrem HTML-Code bestehen die restlichen Dateien in Ihrer Anwendung hauptsächlich aus CSS, Javascript und Bildern. Möglicherweise gruppieren Sie Ihre Anwendungsdateien bereits in Ordnern, die dieser Art von Assets entsprechen.

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

Der Ordner js enthält Ihren Javascript-Code. Auch die Bilder ist Ordner der Ort , wo Sie Bilder hinzufügen sollen , die direkt aus den index.html oder einer anderen Seite in der Anwendung verwendet werden. Diese Bilder - Ordner sollte nicht auf Host Sheet-bezogene Dateien verwendet werden. Ihr CSS - Code und die damit verbundenen Bilder sollten in der Lage sein CSS - Ordner. Auf diese Weise können Sie Seiten erstellen, die problemlos verschiedene Themen verwenden können, und Ihre Anwendung portabler gestalten.

• Appcropolis-Projekt
• Ressourcen
• CSS
• blaues Thema
• 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
• Drucker.jpg
• my-company-logo-small.png
• my-company-logo-large.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
• my-contact-info.html
• my-products.html

Das vorherige Beispiel zeigt den Inhalt des CSS- Ordners. Beachten Sie, dass es eine Datei mit dem Namen default.css gibt, die als Haupt-CSS-Datei verwendet werden sollte. Bilder, die vom Standard-Stylesheet verwendet werden, sollten im Bilderordner 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. Sie können beispielsweise ein Stylesheet für blue-theme.css erstellen und alle zugehörigen Bilder in einem blauen Theme platzierenOrdner. 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 seitenspezifischen Code in CSS- und JS-Dateien mit demselben Seitennamen (ei 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 verfolgen, 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 verwenden, um eine Datei oder einen Ordner zu benennen, trennen Sie diese mit einem Bindestrich (dh my-company-logo-small.png). Wenn Sie den Ratschlägen in diesem Artikel folgen, sollten Sie in der Lage sein, mehrere Seiten zu kombinieren und gleichzeitig gemeinsame Ressourcen und benutzerdefinierten Code zu trennen.

Auch 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.

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

 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

So habe ich die statischen Ressourcen meiner Anwendung organisiert.