如何组织所有js、css、php和html代码？

现在我知道可以使用OOP和MVC进行组织，但这仅适用于PHP

比方说，我添加了一个新窗口，当用户单击链接时弹出，它显示一个带有JS验证的表单，并且是CSS样式的

这里我们有4个代码：JS、CSS、PHP和HTML（带有一些PHP代码片段）

您将如何组织所有这些代码？因为当我得到50个windows代码时，代码到处都是，为了改变删除窗口的行为，我不得不扮演侦探。每次我必须用JS、CSS等添加一个新窗口时，我都会抓紧时间

我已经考虑过结构。如果每个窗口都有一个单独的“模块”，不是更好吗。例如，每个窗口都有一个文件夹。在那张地图上你放了一个CSS-，一个JS-，一个PHP-和一个HTML文件？然后你得到了一个非常好的结构，不凌乱，你不会把所有的窗口混合在一个大的JS和CSS文件中

---

你觉得怎么样？我希望你能给我一些关于如何组织这4种代码的建议。

我通常把我的PHP页面放在一个文件夹中（如果是中等大小的站点，可能有10个文件），然后是一个叫做media的子文件夹，我在其中放了一个css文件夹、一个js文件夹、一个img文件夹、一个swf文件夹等等

我有两个css文件，一个是重置文件，另一个是整个网站的样式，都是以块的形式编写的。我在body标签上使用一个类来针对不同的页面布局

js文件夹有jquery，一个在每个页面上运行的文件，然后是各个页面的特定文件

---

这让事情变得非常直截了当。

如果您正在寻找有关如何设计应用程序的示例，那么了解许多框架是一个很好的开始。即使只是他们的文件结构也会给你一个想法。通常，他们将代码组织到模块中，PHP代码和HTML模板也驻留在模块中。没有一个特别值得一看，但可以尝试：CakePHP、Symfony、CodeIgniter或Agavi

然而，在建议如何组织JavaScript和CSS文件方面，他们不会做得很好。当我制作一个应用程序时，我通常只有少数CSS文件。我很惊讶，你似乎需要一个每一页，但如果你这样做：嵌入他们。如果外部样式表的样式没有可重用性，那么外部样式表的优势就完全丧失了。同样，如果JavaScript文件不可重用，您应该简单地嵌入它们。每页加载更少的HTTP请求使每个人都感到高兴

---

当您发现自己在搜索一个顽固地无法显示自己的特定文件时，

grep

是一个非常宝贵的工具。这说明了它的用法。

如果您可以/需要，我会为JS、CSS、PHP等创建顶级文件夹，其中包含可以跨不同窗口使用的代码。如果同一个CSS文件都是相同的，甚至大部分代码都是相同的，那么就不需要有50个副本

然后为每个“窗口”创建一个文件夹，其中包含单独的css、js等文件夹。在这里，您可以放置特定于该特定窗口的文件。这样，如果您只更改1个css规则或js函数，那么每个窗口都会使用它，您可以在1个位置更改它

---

如果您只需要更改一个窗口的规则，请将该规则放在该窗口的“本地css”文件夹中，它将覆盖您的默认设置。（也就是说，如果你的HTML链接在“全局css”之后。）

如果你希望同一个用户在一次访问中打开几个不同的弹出窗口，那么为了它们的缘故，你需要合并你的文件以便缓存它们，最终用户不需要在每个弹出窗口上再次加载所有css/JS

对于图像和JS来说，文件夹方法很好。除非每个弹出窗口都完全不同，否则我建议您使用一个CSS文件，以保持您的理智。因此，您的文件夹结构可能如下所示：

css/
* layout.css
popups/
* add_new
   - add_new.js
   - logo.png
   - add_new.php
* delete
   - delete.js
   - other_logo.png
   - delete.php

现在，在部署之前，您可以决定将JS编译成单个文件是否有意义，或者单独的文件是否最好。（例如，如果用户每次访问都打开50个窗口中的30个，则使用单个文件）

我喜欢使用的方法来组织文件夹。让我们试着想象一下，并使其适应您的php项目：

根文件夹是项目文件夹，比如说网站的名称。它包含

• 公共共享设置和值（即数据库访问值、路径等），可能是辅助函数（不是面向对象的），称之为settings.php和/或utils.php或其他
• 也有自己结构的媒体文件夹：
  • css文件夹，用于通用css（即reset.css和common.css，用于定义通用布局）
  • 图像文件夹，用于公共共享图像
  • js文件夹，用于公共共享javascript代码
• 一个模板文件夹，包含不属于网站特定类别的静态通用页面

每个根文件夹都是项目（即注册、新闻、公告、常见问题解答、联系人、论坛等）的应用程序的表达式，包含：

• 一个model文件夹，您可以在其中用PHP（MVC模式）放置模型
• 一个控制器文件夹，在其中以MVC模式实现控制器
• 一个视图文件夹，您可以在其中放置MVC模式的视图（即，只负责显示视图传递的结果的非常静态的php页面）
• 介质文件夹的结构与根文件夹的结构完全相同。在此文件夹中，您只放置属于正在开发的网站特定部分的元素

对于连接组件的，您可以根据其路径直接调用/包含它们，或者可以在根目录和负责映射URL和重定向请求的每个子文件夹中实现一个php文件。可以叫它index.php或url.php或connector.php，随便什么

似乎