组织Javascript库和CSS文件夹结构的最佳实践

Question

您如何在Web应用程序中组织js和css文件夹？

我当前的项目结构如下：

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

但是，当我使用许多JavaScript库和CSS插件时，情况会更加复杂。Javascript插件附带其自己的.js文件，有时还附带其自己的.css文件。

例如，当我将JQuery和JQueryUI插件一起使用时，我将jquery.js和jquery-ui.js放在js/lib目录中。但是JQueryUI带有自己的css文件。我应该将javascript插件中的CSS放在哪里，以获得最佳实践？我是否应该将它们放在lib文件夹中，以区分我的CSS和javascriptCSS插件？或者别的地方？

我知道这是个人喜好，但我只想知道你们是如何组织项目文件夹的。

提前致谢 ：）

Answer 1

我将概述一个推荐的结构，以组织HTML5应用程序中的文件。这不是创建任何标准的尝试。相反，我将就如何以合乎逻辑的便捷方式对文件进行分组和命名提出建议。

您的专案

假设您正在构建HTML5应用程序。在某些情况下，您可以使用服务器的根作为主要容器，但是出于本文的目的，我将假定HTML5应用程序包含在文件夹中。在此文件夹中，您必须创建应用程序索引文件或主入口点。

• Acropolis project
  • my-index.html

通常，您的应用程序将由HTML，CSS，图像和Javascript文件组成。这些文件中的某些文件将特定于您的应用程序，而另一些文件可以在多个应用程序中使用。这是非常重要的区别。为了对文件进行有效的分组，必须首先将通用文件与特定于应用程序的资源分开。

• Acropolis project
  • resources
  • supplier
  • my-index.html

这种简单的分隔使浏览文件变得更加容易。将库和通用文件放置在 vendors 文件夹中后，很明显，将要编辑的文件将位于 resources
文件夹中。

除了HTML代码外，应用程序中的其余文件主要是CSS，Javascript和图像。很有可能您已经将应用程序文件分组到与这些资产相对应的文件夹中。

• Acropolis project
  • resources
  • CSS
  • js
  • picture
  • data
  • supplier
  • my-index.html

该 JS 文件夹将持有你的JavaScript代码。同样， images
文件夹是您应在其中添加直接从index.html或应用程序中任何其他页面使用的 图像 的地方。此 图像
文件夹不应用于承载与样式表相关的文件。您的CSS代码和相关图像应位于 css
文件夹内。通过这样做，您可以构建可以轻松使用不同主题的页面，并使您的应用程序更具可移植性。

• Acropolis project
  • 资源
  • 的CSS
    • 蓝色主题
    • background.png
    • 图片
    • background.png
    • 蓝色主题.css
    • my-index.css
  • js
    • my-index.js
    • my-contact-info.js
  • 图片
    • 产品展示
    • computer.jpg
    • 手机.png
    • printer.jpg
    • my-company-logo-small.png
    • my-company-logo-large.png
  • 数据
    • some-data.json
    • more-data.xml
    • table-data.csv
    • extra-data.txt
  • 供应商
  • jQuery的
    • 图片
    • ajax-loader.gif
    • icons-18-white.png
    • jquery.min.js
    • jquery.mobile-1.1.0.min.css
    • jquery.mobile-1.1.0.min.js
  • 一些CSS图书馆
  • some-plugin.jquery
  • my-index.html
  • my-contact-info.html
  • my-products.html

前面的示例显示了 css 文件夹的内容。注意，有一个名为default.css的文件应该用作您的主CSS文件。默认样式表使用的图像应放置在
images 文件夹内。如果要创建替代样式表，或者希望覆盖默认样式表中定义的规则，则可以创建其他CSS文件和相应的文件夹。例如，您可以创建blue-
theme.css样式表，并将所有相关图像放置在 blue-theme内
夹。如果您具有仅一页使用的CSS或Javascript代码（在本例中为my-
index.html），则可以将.css和.js文件内的页面特定代码与该页面的名称分组在一起（ei my-index .css和my-
index.js）。您的CSS和Javascript代码应尽可能通用，但可以通过将异常放在单独的文件中来跟踪异常。

最终建议

必须围绕文件夹和文件名提出一些最终建议。通常，请确保在所有文件夹和文件名中使用小写字母。当使用多个单词命名文件或文件夹时，请使用连字符（即，my-
company-logo-small.png）将其分开。如果您遵循本文中的建议，您应该能够合并多个页面，同时将公共资源和自定义代码很好地分开。

最后，即使您不选择使用本文推荐的结构，也必须遵守约定，这一点很重要。这将提高您的生产率，更重要的是它将使您所做的工作容易被他人理解。