实现渐进增强时如何防止重复代码？答案

【问题标题】：How to prevent duplicate code when implementing progressive enhancement?实现渐进增强时如何防止重复代码？
【发布时间】：2013-02-18 10:50:01
【问题描述】：

我正在运行一个允许用户查看项目列表的 PHP 网络应用程序。

基础站点使用 PHP 编写 HTML 来显示搜索结果：

<body>
   <?php
      foreach($results as $item) {
         echo "<div class='item'>".
                 "<img src='images/items/".$item['imageName'].".png' />".
                 "<span class='itemDescription'>".$item['text']."</span>".
              "</div>";
      }
    ?>
 </body>

但是，当启用 Javascript 时，我使用 AJAX 来显示结果：

function fireSearch(query) {
   $.post("ajax/search.php", {q: query}, function(items) {
      for (var i in items) {
         $("body").append(
             "<div class='item'>"+
                "<img src='images/items/"+items[i]['imageName']+".png' />"+
                "<span class='itemDescription'>"+items[i]['text']+"</span>"+
             "</div>";
      }
   }
}

我可以简单地编写一个名为 get_item_html($item) 的 PHP 函数并让 AJAX 请求返回干净的 HTML 并将其简单地放置在 DOM 中，但如果请求返回大量结果，那将是真正的带宽浪费真正需要构造HTML的是imageName和text。

这只是我必须处理的事情还是有一些优雅的解决方案？

这个问题有名称，所以我可以用谷歌搜索它吗？

【问题讨论】：

这叫做模板。一些模板格式可以在服务器端和客户端使用。

标签： php javascript code-duplication progressive-enhancement

【解决方案1】：

好的，明白了。

我找到的最佳解决方案是使用Mustache，编写一些模板并阅读 Javascript 和 PHP 中的模板。

Mustache 库提供了 PHP 和 Javascript 实现，所以不用担心：

创建一些.mustache 模板
在PHP中，使用the library提供的类和方法来创建HTML和echo它
在 Javascript 中，通过添加 mustache.js 脚本来使用模板，并为页面使用的每个模板添加一个脚本标签，其中包含模板文件 echoed 的内容：
<script id="arbitraryID" type="text/mustache">
<?php echo file_get_contents(__DIR__."/templates/myTmpl.mustache"); ?>
</script>
然后可以通过执行（jQuery 样式）获得模板：
var tmpl = $("#arbitraryID").html();

希望这可以帮助任何发现此问题的人...

【讨论】：

【解决方案2】：

我会让 ajax 函数返回一个 json 构建，然后我会将你的 .append() 变成一个自定义的最小化函数以减小大小，这样你就会有很多更简洁的代码。

【讨论】：

如何解决问题？我仍然会有一个 PHP 函数和一个 Javascript 函数做同样的事情
遗憾的是，我看错了帖子，不，我的回答根本没有帮助。〜责备写回复时没有喝咖啡〜

【解决方案3】：

正如Bergi所说，使用模板封装信息的显示，在ajax请求上只发送imageName和text。

有很多方法可以实现模板（我听说过很多关于handlebars.js的好东西，还没有尝试过），一个简单的方法是用ajax请求上收到的数据编写html标记并附加它到容器，也许使用一个简单的函数，以后可以用适当的模板方法替换。

function drawItem(item) {
    return "<div class='item'>" +
             "<img src='images/items/"+item.imageName+"' />" +
             "<span class='itemDescription'>"+item.text+"</span>" +
           "</div>";
}

function fireSearch(query) {
    $.post("ajax/search.php", {q: query}, function(items) {
        for (var i=0; i<items.length; i++) {
            $("body").append(drawItem(items[i]);
        }
    }, 'json');
}

ajax/search.php 会返回类似：[{"imageName":"blabla.png","text":"moomoo"},...]

由这样的 search.php 文件生成：

<?php 
echo json_encode(array(
    array("imageName"=>"blabla.png", "text"=>"moomoo"),
    array("imageName"=>"example2.png", "text"=>"second example")
));

?>

【讨论】：

谢谢，但我仍然无法从您的回答中理解如何在 PHP 脚本和 Javascript 脚本之间复制代码
您不要复制代码，在这种情况下，Javascript 用于向应返回 JSON 编码数据的服务器发送 AJAX 请求。在 php 脚本上使用 echo json_encode(yourarray)。生病用 php sn-p 编辑帖子。
但是对于渐进式增强，我需要 PHP 知道如何构建 HTML。知道如何构建一个与客户端脚本兼容的 JSON 字符串是不够的
我明白了。我能看到的唯一“优雅”解决方案是 Mustache (mustache.github.com)，但这是您添加到应用程序中的另一个库。如果你真的想减少带宽，你可以发送带有 JSON 结果的搜索结果项的模板，这样只有 PHP 需要知道如何绘制搜索项。我不确定带宽改进是否值得复杂性，这取决于您拥有的访问者数量和资源。