组织Javascript库和CSS文件夹结构的最佳实践
你如何组织你的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和javascript css插件吗？ 或者别的地方？
我知道这是个人喜好，但我只是想知道你们如何组织你的项目文件夹。
提前致谢 ：）
如何组织您的HTML，CSS和Javascript文件
我将概述一个推荐的结构来组织HTML5应用程序中的文件。 这不是试图创造任何标准。 相反，我会build议如何以合理方便的方式对文件进行分组和命名。
你的项目
假设您正在构buildHTML5应用程序。 在某些情况下，您可以使用服务器的根目录作为主容器，但为了本文的目的，我将假定您的HTML5应用程序包含在一个文件夹中。 在这个文件夹中，你必须创build你的应用程序索引文件或主入口点。
- appcropolis项目
- 我-的index.html
通常，您的应用程序将由HTML，CSS，图像和Javascript文件组成。 其中一些文件将专门针对您的应用程序，其他一些文件可以在多个应用程序中使用。 这是一个非常重要的区别。 要对文件进行有效分组，您必须首先将通用文件与特定于应用程序的资源分开。
全“>
- appcropolis项目
- 资源
- 供应商
- 我-的index.html
这个简单的分离使得浏览你的文件变得容易很多。 一旦将库和通用文件放置在供应商文件夹中，显然您要编辑的文件将位于资源文件夹中。
除了HTML代码之外，应用程序中的其余文件大部分是CSS，Javascript和图像。 您可能已经将您的应用程序文件分组在与这些资产相对应的文件夹中。
- appcropolis项目
- 资源
- CSS
- JS
- 图片
- 数据
供应商 我-的index.html js文件夹将保存你的Javascript代码。 同样， 图像文件夹是您应该添加图像的地方，直接从index.html或应用程序中的任何其他页面使用。 这个图像文件夹不应该被用来托pipe样式表相关的文件。 您的CSS代码和相关图片应位于css文件夹内。 通过这样做，您可以构build可以轻松使用不同主题的页面，并允许您的应用程序更具可移植性。
- appcropolis项目
- 资源
- CSS
- 蓝色主题
- background.png
图片
- background.png
蓝theme.css 我-index.css JS
- 我-index.js
- 我接触，info.js
图片
- 制品
- computer.jpg
- cellphone.png
- printer.jpg
我-公司徽标small.png 我-公司徽标large.png 数据
- 一些-data.json
- 更data.xml中
- 表data.csv
- 额外的data.txt
供应商
- jQuery的
- 图片
- Ajax的loader.gif
- 图标-18 white.png
jquery.min.js jquery.mobile-1.1.0.min.css jquery.mobile-1.1.0.min.js 一些-CSS-库 一些-plugin.jquery 我-的index.html 我接触-info.html里 我-products.html放在 前面的例子显示了css文件夹的内容。 请注意，有一个名为default.css的文件应该被用作您的主要CSS文件。 默认样式表使用的图像应放置在images文件夹中。 如果您想创build替代样式表，或者如果您希望覆盖默认样式表中定义的规则，则可以创build其他CSS文件和对应的文件夹。 例如，您可以创build一个blue-theme.css样式表，并将所有相关图像放置在蓝色主题文件夹中。 如果您的CSS或Javascript代码仅由一个页面使用（在本例中为my-index.html），则可以将具有相同页面名称的.css和.js文件中的页面特定代码分组（如：my-index .css和my-index.js）。 您的CSS和Javascript代码应尽可能通用，但您可以通过将它们放在单独的文件中来跟踪exception。
最终build议
一些最后的build议必须围绕文件夹和文件名进行。 一般来说，请确保在所有文件夹和文件名中使用小写字母。 当使用多个单词来命名文件或文件夹时，用连字符（即my-company-logo-small.png）分隔它们。 如果按照本文中的build议，应该能够将多个页面合并在一起，并将常用资源保持在一起，并将自定义代码很好地分开。
最后，即使你不select使用本文推荐的结构，坚持一个惯例也很重要。 这会提高你的工作效率，更重要的是它会让你做的工作容易被别人理解。
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
这就是我组织应用程序的静态资源的方式。
