如何将 DOM 操作与 PHP 完全分离？ [关闭]答案

【问题标题】：How to completely separated DOM manipulation from PHP? [closed]如何将 DOM 操作与 PHP 完全分离？ [关闭]
【发布时间】：2014-01-19 03:18:04
【问题描述】：

我必须使用 PHP 为我的朋友创建一个网站。它基本上是一个在线商店。

我想使用 HTML5、CSS3、jQuery 和其他 JS 库的新功能。
并且我想将所有文档生成和操作与 PHP 分开。

我在 Google 上进行了大量搜索。人们提出了 MVC 架构。这一切都很好。
但问题在于我发现的所有示例或教程；人们从基于 SQL 的数据库中检索数据，然后将其echo 或print 生成 html，或者使用一些 ORM 类来显示它。我不太了解 ORM 或 PHP 框架。

我一直在做宠物项目，小型网站，没有像这个中型商店。

我对 MVC 架构的理解是这样的：

**Model:** Basic purpose is to save and retrieve data from the databases.
**Controller:** Do some operations on the data to either store them using Model, or do some operations on the retrieved data (again using the Model), to be passed to the View.
**View:** This is used to display the user the content.

我想做的是使用 PHP 生成几乎为零的 html。
相反，我正在考虑一种方法：
模型仅用于数据库处理.
Controller 用于将这些数据转换为 JSON 对象，并使这些 JSON 对象可用于相应的视图。
然后使用 JavaScript 我将根据 JSON 对象进行 DOM 操作。

这种方法有什么好处吗？如果是怎么做（尤其是从数据库检索到的数据转换为 JSON 对象的部分）。

如果您能给我提供一个更好的方法，我不必使用 PHP 生成 html，并尽可能少地使用 PHP 作为前端。

我正在做用户会看到的所有前端工作。我的朋友将负责所有的数据库处理。我不想参与 PHP 部分，如果它是强制性的（即没有出路），那么尽可能少。

请给我一些解决方案。这里急需。

编辑：我特别在谈论echo 和print 命令。我想有一个新的工作，而不是让 html 创建与 PHP 和 JavaScript 混合。
如果不使用这些命令，则基于用户可能在移动设备上或关闭 JavaScript 的事实不建议使用。如果关闭 JavaScript，是否有可能拥有一个外观简单的网站并显示所有数据？如果它没有关闭，则从 DOM 中删除所有这些元素并使用 JavaScript 制作一个新的 DOM。然而，这样做的主要障碍是将从数据库检索到的数据转换为 JSON 对象，以便 JavaScript 可以使用它。

我不认为这是可能的，但是有什么方法可以让 JavaScript 直接使用 PHP 变量吗？

【问题讨论】：

嗯...DOM 在客户端上（除非您使用专用的 DOM-on-server 库，但似乎并非如此）。 PHP 在服务器上。您究竟是如何不将 DOM 操作与 PHP 完全分开的？！
PHP 不操作 DOM。它只是定义了它的初始结构。你的方法会有很多很多问题。如果禁用了 javascript 或客户端是低规格的移动设备怎么办？如果您真的打算创建一个在线商店，请使用一些 FOSS 电子商务包并使用它。它会为您省去很多麻烦，并且您可能会在此过程中学到一两件事。
@Ishan，对，我实际上更喜欢通过 PHP 使用 DOM API，而不是尽可能多地这样做，但我猜这不是一种非常流行的方法。但是 print/echo 真的不是 DOM 操作，所以你的问题有点令人困惑。
@Ishan：那么你想将 PHP 与 HTML 生成 分开，而不是 DOM。
@Ishan 我认为如果您在问题中将“DOM”替换为“文档”会更准确。

标签： javascript php json dom model-view-controller

【解决方案1】：

我认为您正在寻找的是客户端 template engine，其中文档是使用 ajax 查询在客户端构建的。我听说过的好东西是 Handlebars 和 Mustache，但我确信还有其他可供选择。

但即使有这样的解决方案，我认为需要输出一些服务器端 HTML 以“启动泵”，在这种情况下，您可能需要考虑像 Smarty 之类的服务器端模板引擎或其他最新最好的等价物是。使用服务器端模板引擎，您可以将模板编写为独立文件（如 Smarty 的 .tpl），PHP 会将模板作为对象使用，然后通过模板引擎的方法传入模板的任何唯一变量，然后您将调用模板的显示方法。

在任何一种情况下（或两者的组合），您都在将最终的 HTML 输出与 PHP 分开，以便 PHP 与模板交互，而不是执行简单的 echo "<div>This looks so Web 1.0</div>";，我认为这是您试图避免的。

【讨论】：

【解决方案2】：

是的，完全可以按照您的描述进行操作。您将使用静态 HTML 文件进行基本页面设置、通常的 CSS 和图像等，并且您的 PHP 将仅用于生成 JSON 以返回客户端并供 JavaScript 使用。比如：

index.html:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Example</title>
</head>
<body>
  <table id="theTable">
    <tbody>
      <tr><em>Loading...</em></tr>
    </tbody>
  </table>
  <script src="yourscript.js"></script>
</body>
</html>

yourscript.js:

getDataViaAjax("data.php", function(data) {
    var table = document.getElementById("theTable");
    // ...fill in the table using the information from `data`...
});

data.php:

<?php
    // Get data from somewhere
    // ...

    // Output it
    echo json_encode($theData);
?>

显然该表只是一个示例。您可能会有更多的静态内容，以及一些您想要添加动态内容的地方。

这是一种完全可行的方法，随着团队的扩展，关注点分离会有所帮助。

但是，请注意，如果您这样做，任何包含数据库内容的页面都会向服务器发送两个 HTTP 请求（一个用于加载 HTML，另一个 - 这不会开始直到第一个至少部分完成 - 加载数据）而不是一个。一般来说，目标是最小化 HTTP 请求。所以有取舍。

我不认为这是可能的，但是有什么方法可以让 JavaScript 直接使用 PHP 变量吗？

正确，这是不可能的。不过，有像 Meteor（不是基于 PHP 的）这样的框架可以为您处理中间层，并让它看起来很像正在发生的事情。

您还可以查看 AngularJS 和 KnockoutJS 之类的工具，它们可以将您的 JavaScript 数据对象绑定到 DOM 元素，从而为您节省大量手动更新代码，或者甚至只是像 Handlebars 这样呈现模板化内容的工具给你。

【讨论】：

【解决方案3】：

PHP 从不操作 DOM，DOM 是纯粹的客户端，而 php 是纯粹的服务器端。 PHP 可以生成 HTML，将其发送给客户端，并由客户端浏览器处理为 DOM。

如果您想（几乎）将其完全拆分为两部分，您可以将其拆分为一个提供 RESTful JSON-API 的 API 服务器（php 和数据库）和一个提供静态 HTML 的内容服务器， CSS 和 Javascript 文件。

内容服务器上的 Javascript 将使用 AJAX 获取和发布请求连接到 API 服务器，以检索数据并将数据发送到数据库。

【讨论】：

这不是真的。 PHP 具有所有常见的 DOM 操作功能，并且可以在将文档发送到客户端之前使用 DOM 处理文档。
它可以处理html代码，但是DOM是由浏览器构建的，解析HTML，DOM操作完成，之后DOM被创建，所以PHP将无法操作DOM , 发送响应后
"发送响应后" != "从不。"问题在于“DOM 纯粹是客户端”的想法，这是不正确的。
@bbuecherl：有很多 DOM 库供服务器端使用。
@Ishan 只是在 google 上查找 AJAX 教程（第一个结果：html.net/tutorials/javascript/lesson21.php）但要澄清：API 将在 API 服务器 (php) 上实现，您只需要调用正确的路由用阿贾克斯。带有 PHP 的 RESTful API：coreymaynard.com/blog/creating-a-restful-api-with-php