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

How do you organize your js & css folder in your web application?

如何在web应用程序中组织js & css文件夹?

My current project structure is like this one:

我目前的项目结构是这样的:

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

But it's more complicated when I use many javascript library & css plugin. Javascript plugin comes with its own .js file and sometimes with its own .css file.

但当我使用许多javascript库和css插件时，事情就复杂多了。Javascript插件有自己的.js文件，有时也有自己的.css文件。

For example, when I use JQuery with JQueryUI plugin, I put the jquery.js and jquery-ui.js inside js/lib directory. But JQueryUI comes with its own css file. Where should I put the css from javascript plugin for best practice? Should I put them inside lib folder, to distinguish my css and javascript css plugin? Or somewhere else?

例如，当我使用JQuery和JQueryUI插件时，我使用了JQuery。js和jquery ui。js在js / lib目录中。但是JQueryUI有自己的css文件。为了获得最佳实践，我应该将css从javascript插件放在哪里?我应该把它们放在lib文件夹中，以区分css和javascript css插件吗?还是别的地方?

I know it's a personal preferences, but I just wanna know how you guys organize your project folder.

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

Thanks in advance :)

提前谢谢:)

2 个解决方案

#1

How to organize your HTML, CSS, and Javascript files

如何组织HTML、CSS和Javascript文件

I will outline a recommended structure to organize files in your HTML5 application. This is not an attempt to create any kind of standard. Instead, I will make suggestions on how to group and name files in a logical convenient way.

我将概述一个建议的结构，以在您的HTML5应用程序中组织文件。这并不是试图创建任何类型的标准。相反，我将对如何以一种逻辑方便的方式对文件进行分组和命名提出建议。

Your Project

Let’s assume you are building an HTML5 application. In some cases you may use the root of your server as the main container but for the purpose of this article I will assume you HTML5 application is contained in a folder. Inside this folder you must create your application index file or main entry point.

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

• appcropolis-project
• appcropolis-project
• my-index.html
• my-index.html

Generally, your application will be comprised of HTML, CSS, Images, and Javascript files. Some of those files will be specific to your application and some others can be used across multiple applications. This is a very important distinction. To do an effective grouping of your files you must start by separating general-purpose files from application-specific resources.

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

full">

• appcropolis-project
• appcropolis-project
• resources
• 资源
• vendors
• 供应商
• my-index.html
• my-index.html

This simple separation makes navigating through your files a lot easier. Once you place libraries and general-purpose files inside the vendors folder it is clear that the files you will be editing will be located in the resources folder.

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

Aside from your HTML code the rest of the files in your application are mostly CSS, Javascript, and images. Chances are that you already group your application files inside folders that correspond to these kind of assets.

除了HTML代码之外，应用程序中的其他文件主要是CSS、Javascript和图像。您可能已经将应用程序文件分组到与此类资产对应的文件夹中。

• appcropolis-project
• appcropolis-project
• resources
• 资源
• css
• css
• js
• js
• images
• 图片
• data
• 数据
• vendors
• 供应商
• my-index.html
• my-index.html

The js folder will hold your Javascript code. Similarly, the images folder is the place where you should add images that are used directly from the index.html or any other page in your application. This images folder should not be used to host stylesheet-related files. Your CSS code and related images should be located inside the css folder. By doing this, you can build pages that can easily use different themes and you allow your application to be more portable.

js文件夹将保存您的Javascript代码。类似地，images文件夹是您应该添加直接从索引中使用的图像的地方。html或应用程序中的任何其他页面。此图像文件夹不应用于托管与样式表相关的文件。您的CSS代码和相关图像应该位于CSS文件夹中。通过这样做，您可以构建可以轻松使用不同主题的页面，并允许您的应用程序更具可移植性。

• appcropolis-project
• appcropolis-project
• resources
• 资源
• css
• css
• blue-theme
• 蓝色主题
• background.png
• background.png
• images
• 图片
• background.png
• background.png
• blue-theme.css
• blue-theme.css
• my-index.css
• my-index.css
• js
• js
• my-index.js
• my-index.js
• my-contact-info.js
• my-contact-info.js
• images
• 图片
• products
• 产品
• computer.jpg
• computer.jpg
• cellphone.png
• cellphone.png
• printer.jpg
• printer.jpg
• my-company-logo-small.png
• my-company-logo-small.png
• my-company-logo-large.png
• my-company-logo-large.png
• data
• 数据
• some-data.json
• some-data.json
• more-data.xml
• more-data.xml
• table-data.csv
• table-data.csv
• extra-data.txt
• extra-data.txt
• vendors
• 供应商
• jquery
• jquery
• images
• 图片
• ajax-loader.gif
• ajax-loader.gif
• icons-18-white.png
• icons-18-white.png
• jquery.min.js
• jquery.min.js
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.css
• jquery.mobile-1.1.0.min.js
• jquery.mobile-1.1.0.min.js
• some-css-library
• some-css-library
• some-plugin.jquery
• some-plugin.jquery
• my-index.html
• my-index.html
• my-contact-info.html
• my-contact-info.html
• my-products.html
• my-products.html

The previous example shows the content of the css folder. Notice that there is a file named default.css which should be used as your main CSS file. Images used by the default stylesheet should be place inside the images folder. If you want to create alternative stylesheets or if you wish to override rules defined in your default stylesheet, you can create additional CSS files and the correspondent folders. For example, you can create a blue-theme.css stylesheet and place all related images inside a blue-theme folder. If you have CSS or Javascript code that is only used by one page (in this case my-index.html), you can group page specific code inside .css and .js files with the same name of the page (e.i. my-index.css and my-index.js). Your CSS and Javascript code should be a generic as possible but you can keep track of exceptions by placing them in separate files.

前面的示例显示了css文件夹的内容。注意，这里有一个名为default的文件。css应该作为你的主css文件。默认样式表使用的图像应该放在Images文件夹中。如果您希望创建替代样式表，或者希望重写默认样式表中定义的规则，可以创建其他CSS文件和相应文件夹。例如，您可以创建一个蓝色主题。css样式表，并将所有相关图片放在一个蓝色主题文件夹中。如果您有CSS或Javascript代码，而这些代码只被一个页面使用(在这里是my-index.html)，那么您可以在. CSS和.js文件中使用相同的页面名称(例如，my-index)对页面特定的代码进行分组。css和my-index.js)。您的CSS和Javascript代码应该尽可能是通用的，但是您可以通过将它们放在单独的文件中来跟踪异常。

 

 

Final Recommendations

Some final recommendations have to be made around folder and file names. As a general rule make sure that you use lower case letters in all folder and file names. When using multiple words to name a file or a folder separate them with a hyphen (i.e. my-company-logo-small.png). If you follow the advice in this article you should be able to combine multiple pages while keeping common resources together and custom code nicely separated.

最后的一些建议是关于文件夹和文件名的。一般情况下，确保在所有文件夹和文件名中使用小写字母。当使用多个单词来命名文件或文件夹时，用连字符(即my-company-logo-small.png)将它们分开。如果您遵循本文中的建议，您应该能够组合多个页面，同时将公共资源和自定义代码很好地分隔开。

Finally, even if you do not choose to use the structure recommended in this article, it is important to stick to a convention. It will increase your productivity and more important it will make the work that you do easy to understand by others.

最后，即使您不选择使用本文推荐的结构，也要坚持使用约定。它会提高你的效率，更重要的是它会让你做的工作更容易被别人理解。

#2

 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

This is how I organized my application's static resources.

这就是我组织应用程序静态资源的方式。