Question

现在我知道你可以使用OOP和MVC来组织，但这只适用于PHP。

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

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

您如何组织所有这些代码？因为当我得到50个Windows代码到处传播并且让我改变删除窗口的行为时，我必须扮演侦探。每次我都要用JS，CSS等添加一个新窗口时，我会紧张。

我考虑过这个结构。如果你为每个窗口都有一个单独的“模块”，那会不会更好。例如。每个窗口的文件夹。在该地图中，您可以放置一个CSS，一个JS，一个PHP和一个HTML文件？然后你得到了一个非常好的结构，它不会混乱，你不要在一个大的JS和CSS文件中混合所有窗口。

你怎么看？我很感激如何组织这4种代码的建议。

Answer 1

我喜欢Django组织文件夹的方式。让我们试着想象并使其适应您的php项目：

根文件夹是Project文件夹，比方说网站的名称。它包含

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

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

模型文件夹，其中您将模型放入PHP（MVC模式）
controller 文件夹，您可以在其中实现MVC模式下的控制器
一个 view 文件夹，其中放置了MVC模式的视图（即相当静态php页面负责呈现视图传递的结果）
媒体文件夹的结构与您为根文件夹构建一个文件夹的方式完全相同。在此文件夹中，您只放置属于您正在开发的网站的特定部分的元素。

对于连接组件，您可以根据路径直接调用/包含它们，或者您可以在根目录中实现php文件，并且每个子文件夹负责映射URL并重定向要求。称之为index.php或urls.php或connector.php，无论如何。

这可能看似多余，但事实并非如此，并且提供了高质量的关注点分离。

Answer 2

我通常将我的PHP页面放在一个文件夹中（如果它是一个中等大小的站点，可能是10个文件）然后是一个名为media的子文件夹，其中我放了一个css文件夹，一个js文件夹和一个img文件夹，一个swf文件夹等

我有2个css文件，一个是重置，另一个是整块网站的样式。我在body标签上使用一个类来定位不同的页面布局。

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

这确实让事情变得非常直接。

Answer 3

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

但是，他们不会在建议如何组织JavaScript和CSS文件方面做得很好。当我创建一个应用程序时，我通常只有一些CSS文件。我很惊讶你似乎每页需要一个，但如果你这样做：嵌入它们。如果没有任何可重复使用的样式，外部样式表的优势就完全丧失了。 JavaScript文件，如果它们不可重用，您应该只是嵌入它们。每页加载较少的HTTP请求让每个人都满意。

当你发现自己正在寻找一个固执不会浮现的特定文件时，grep是一个非常宝贵的工具。 Here is a random article说明了它的用法。

Answer 4

如果你能/我需要为JS，CSS，PHP等创建顶级文件夹，其中包含可以在不同窗口中使用的代码。如果它们完全相同或甚至大致相同的代码，则无需拥有相同CSS文件的50个副本。

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

如果您只需要更改1个窗口的规则，请将规则放在该窗口的“local css”文件夹中，它将覆盖您的默认值。（即如果您的HTML链接在“global css”之后）

Answer 5

如果您希望同一个用户在一次访问期间打开其中一些不同的弹出窗口，那么为了您的利益，您需要整合文件以便缓存它们并且最终用户不需要加载所有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个，请使用单个文件）

Answer 6

如果你只处理上面提到的文件类型，我最好的经验是让文件夹和文件分开所有内容，它还可以保持整齐有序超级易于查找，因为您的网站增长和放大扩展<！/强>

好的，对于文件夹，您希望所有的主要 HTML ， PHP 文件位于：

/的public_html / （或者不管它是什么叫你主持人。也就是说。里面有cgi-bin的主要区域可以看作是你的主要网络文件夹。）

例如 - ：

的public_html / index.html中

的public_html /接触我们逐email.php

的public_html / main.html中

的public_html / archives.php

NEXT是 CSS 和 Javascript（JS），它们在/ public_html /文件夹中有自己的文件夹。并且以.css或.js结尾的每个文件显然都在这些特定文件夹中...

例如 - ：

的public_html / CSS / style.css中

的public_html / CSS / dark.css

的public_html / CSS / mobile.css

的public_html / JS / colorpicker.js

的public_html / JS /接触外形tips.js

的public_html / JS / main.js

那就是那个！尽管它很容易记住，一旦你在编码方面足够先进，这是最好的做事方式。您获得的越高级，文件类型越多，而且越多越好。你想要使它看起来有组织，你可能想在/ css / / js / / templates / / images /＆amp;之前添加/ includes /文件夹。就这样吧！

我希望这对你或其中一个有用！

这是我的第一个问题答案，所以我和我自己的骄傲＆amp;希望海报让我的解决方案更好，祝你好运！

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

6 个答案: