组织Javascript库& CSS文件夹结构 [英] Best Practice to Organize Javascript Library & CSS Folder Structure
问题描述
如何组织您的js&
How do you organize your js & css folder in your web application?
我现在的项目结构是这样的：
My current project structure is like this one:
root/
assets/
js/
lib/
css/
img/
index.html
但是更复杂的是，当我使用许多javascript库& css插件。 Javascript插件有自己的.js文件，有时带有自己的.css文件。
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.
例如，当我使用JQuery和JQueryUI插件时，我把jquery.js和jquery-ui.js里面的js / lib目录。但JQueryUI自带了自己的css文件。
在哪里应该放置css从javascript插件的最佳实践？我应该把它们放在lib文件夹，以区分我的css和javascript 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?
我知道这是一个个人喜好，但我只想知道你们如何组织你的项目文件夹。
I know it's a personal preferences, but I just wanna know how you guys organize your project folder.
提前感谢：）
推荐答案
我将概述在HTML5应用程序中组织文件的推荐结构。这不是尝试创建任何类型的标准。
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应用程序。在某些情况下，您可以使用服务器的根作为主容器，但为了本文的目的，我假设您的HTML5应用程序包含在一个文件夹中。在此文件夹中，您必须创建应用程序索引文件或主入口点。
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.
- appcropolis- >
- my-index.html
- appcropolis-project
-
- my-index.html
- appcropolis-project
- resources
- vendors
- my-index.html
- appcropolis- strong> css
- js b $ b
- 数据
- appcropolis-project
- resources
- css
- js
- images
- data
- appcropolis-project
- b
- css
- >
- background.png
- appcropolis-project
- resources
- css
- blue-theme
- background.png
- background.png
- my-index.js
- my-contact-info.js
- 产品
- computer.jpg
- cellphone.png
- printer.jpg
- products
- computer.jpg
- cellphone.png
- printer.jpg
- some-data.json
- more-data.xml
- table-data.csv
- extra-data.txt
- some-data.json
- more-data.xml
- table-data.csv
- extra-data.txt
- jquery
- strong>
- ajax-loader.gif
- icons-18-white.png
- jquery
- images
- ajax-loader.gif
- icons-18-white.png
上一个示例显示了 css 文件夹的内容。注意，有一个名为default.css的文件，应该用作您的主要CSS文件。默认样式表使用的图片应放置在图片文件夹中。如果要创建替代样式表，或者如果要覆盖默认样式表中定义的规则，则可以创建其他CSS文件和对应文件夹。例如，您可以创建一个blue-theme.css样式表，并将所有相关图片放置在蓝色主题文件夹中。如果您有只由一个页面使用的CSS或Javascript代码（在本例中为my-index.html），则可以将.css和.js文件中的页面特定代码与页面的相同名称（ei my-index .css和my-index.js）。您的CSS和Javascript代码应尽可能是通用的，但您可以通过将异常放在单独的文件中来跟踪异常。
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.
有些文件夹和文件名最后建议。作为一般规则，请确保在所有文件夹和文件名中使用小写字母。当使用多个字来命名文件或文件夹时，用连字符分隔它们（即my-company-logo-small.png）。如果你遵循这篇文章中的建议，你应该能够组合多个页面，同时保持共同的资源和自定义代码很好地分开。
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.
最后，即使你不选择使用本文中推荐的结构，重要的是坚持约定。它将提高你的生产力，更重要的是，它将使你做的工作很容易被别人理解。
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.
这篇关于组织Javascript库& CSS文件夹结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
一般来说，您的应用程序将包含HTML，CSS，图像和Javascript文件。其中一些文件将特定于您的应用程序，其他一些可以在多个应用程序中使用。这是一个非常重要的区别。要对文件进行有效的分组，您必须首先将通用文件与应用程序特定的资源分开。
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.
这种简单的分离使得在文件中导航更容易。将供应商文件夹中的库和通用文件放置在资源文件夹中后，您将要编辑的文件就会清楚显示。
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.
除了你的HTML代码，你的应用程序中的其余文件大多是CSS，Javascript和图像。很可能您已经将应用程序文件分组到与这些资产对应的文件夹中。
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.
js 文件夹将保存您的Javascript代码。同样，图片文件夹也是您应该添加直接从index.html或应用程序中任何其他页面使用的图片的位置。此图片文件夹不应用于托管与样式表相关的文件。您的CSS代码和相关图片应位于 css 文件夹中。通过这样做，您可以构建可以轻松使用不同主题，并允许您的应用程序更便携的页面。
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.
