Question

我正在运行一个PHP webapp，允许用户查看项目列表。

裸机网站使用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。

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

此问题是否有名称所以我可以谷歌吗？

Answer 1

好的，明白了。

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

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

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

希望这有助于任何发现此问题的人...

Answer 2

我会让ajax函数返回一个json构建，然后我会将你的.append（）变成一个自定义的最小化函数来保持大小，然后你会得到更多更清晰的代码。

Answer 3

正如Bergi所提到的，使用模板来封装信息的显示，并仅在ajax请求上发送imageName和文本。

有许多方法可以实现模板化（我已经听过很多关于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")
));

?>

如何在实施渐进增强时防止重复代码？

3 个答案: