Question

我一直想知道如何选择使用服务器端代码与客户端代码来构建HTML页面。我将使用一个非常简单的php vs javascript / jquery示例来进一步解释我的问题。非常感谢您的建议和意见。

假设我要向用户提供一个网页，以便在我的网页中选择一种报告。哪个更有意义？

对于服务器端创建，我会这样做：

<div id="reportChoices">

<?php
// filename: reportScreen.php
// just for the sake of simplicity, say a database returns the following rows 
// that indicates the type of reports that are available:

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"),
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"),
);

foreach ($results AS $data)
    echo "<input type='radio' name='reportType' value='{$data['htmlID']}'/>{$data['htmlLabel']}";
?>

</div>

使用客户端代码，我将获得构建页面的javascript，如下所示：

<!-- filename: reportScreen.html -->
<div id="reportChoices">
</div>

<!-- I could put this in the document.ready handler, of course -->
<script type="text/javascript">
$.getJSON("rt.php", {}, function(data) {
 var mainDiv = $("#reportChoices");
 $.each(data, function(idx, jsonData) {
  var newInput = $(document.createElement('input'));

  newInput
   .attr("type", "radio")
   .attr("name", "reportType")
   .attr("value", jsonData["htmlID"])

  mainDiv.append(newInput).append(jsonData["htmlLabel"]);
 });
};
</script>

我在服务器上需要的只是一个数据转储php脚本，例如：

<?php
// filename: rt.php
// again, let's assume something like this was returned from the db regarding available report types

$results = array(
    array("htmlID"=>"battingaverage", "htmlLabel"=>"Batting AVG report"),
    array("htmlID"=>"homeruntotals", "htmlLabel"=>"Home Run Totals report"),
);

echo json_encode($results);
?>

这是一个非常简单的例子，但是从这一点来看，我看到了不同领域的利弊。

1 - 服务器端解决方案的优势在于能够隐藏大部分实际编程逻辑，而不是构建所有内容。当用户查看页面源时，他们看到的只是已经构建的网页。换句话说，客户端解决方案会提供有关某些内容构建方式的所有源代码和编程逻辑。但你可以使用缩小器使你的源看起来更神秘。

2 - 客户端解决方案将“资源负载”转移到客户端系统上（即浏览器需要使用客户端的计算机资源来构建大部分页面）而服务器端解决方案陷入困境，那么服务器

3 - 在可维护性和可读性方面，客户端解决方案可能更加优雅。但话说回来，我本来可以使用模块化HTML模板化的HTML库，使其更具可读性。

有何评论？提前致谢。

Answer 1

Con（客户端解决方案）：客户端解决方案依赖客户端正确执行代码。由于您无法控制客户端系统将执行您的代码，因此要确保它始终能够提供与服务器端解决方案相同的结果。

这个特殊问题似乎并非需要客户端解决方案，是吗？我坚持使用服务器端解决方案。唯一的额外工作是foreach循环，其中一个echo并不是真的那么重要资源（除非你已经对它进行了分析并知道它是）？结果代码全部集中在一个地方且更简单。

Answer 2

通常，最好不要依赖于在客户端上启用Javascript。此外，大多数搜索引擎都不会抓取您的网页。您还公开了有关服务器/服务器端代码的信息（除非您明确地抽象它）。

如果要将数据转换为视图，可能需要查看XSLT。如果您尚未阅读，另一件事就是逐步增强。

http://alistapart.com/articles/understandingprogressiveenhancement/

在您提供的第一个客户端解决方案中，它实际上效率较低，因为有额外的HTTP请求。第二个也可能效率不高，因为必须使用json_encode处理所有数据。

但是，如果您正在处理的是依赖在Javascript上的富Web应用程序，我认为如果您愿意，可以使用Javascript完成所有操作。

Answer 3

我怀疑将报告生成移动到客户端确实节省了所有资源 - 请记住它仍在向您的（？）服务器发送HTTP请求，因此数据库处理仍然完成。

此外，在客户端放弃数据库架构可能是数据库攻击的一种方法。

也许你应该使用模型 - 视图 - 控制器模式将业务逻辑与服务器上的表示分开？至少这可以将所有代码保存在一个地方，但仍然允许您在逻辑上分离组件。如果这听起来对您有用，请查看Zend Framework之类的内容。

Answer 4

您可以通过在客户端构建它来保持更好的关注点分离，但如果有很多要加载的话，这可能会以用户体验为代价（另外您必须考虑FrustratedWithForms提到的内容）。对我而言，在服务器端构建它更容易，这意味着如果你在严格的时间线上，这将成为一个更理想的选择，但是根据你的技能组合决定。

在服务器端或客户端构建网页？

4 个答案: