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

我正在运行一个PHP Web应用程序，它允许用户查看项目列表。

裸骨网站使用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中，但如果请求返回大量结果，那将是真正的带宽浪费，而我真正需要构建的只是imageName和text。

这只是我必须面对的问题，还是有一些优雅的解决方案？

这个问题有名字可以用谷歌搜索吗？

好的，明白了。

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

Mustache库提供PHP和Javascript实现，因此无需担心：

创建一些.mustache模板
在PHP中，使用库提供的类和方法来创建HTML和echo it
在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();

希望这能帮助任何发现这个问题的人。。。

我会让ajax函数返回一个json构建，然后我会把你的.append（）变成一个自定义的最小化函数来降低大小，这样你就会有很多更干净的代码。

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

有很多方法可以实现模板化（我听说了很多关于handlers.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")
));
?>

相关内容

最新更新

热门标签：