PHP和JS如何共享HTML模板

How can PHP and JS share HTML templates?

本文关键字：共享 HTML 模板 JS 何共享 PHP      更新时间：2023-09-26

应用程序

在PHP中，我会输出一些初始视图，这样网络爬虫就可以抓取我的网站：

 ----------------
| cool view 1    |
 ----------------
| cool view 2    |
 ----------------
| cool view 3    |
 ----------------
| Load more      |
 ----------------

Javascript还需要动态生成相同的视图。当用户点击"加载更多"按钮时，它会对服务器进行AJAX操作，并将结果附加到页面上：

 ----------------
| cool view 1    |
 ----------------
| cool view 2    |
 ----------------
| cool view 3    |
 ----------------
| cool view 4    |
 ----------------
| cool view 5    |
 ----------------
| cool view 6    |
 ----------------
| Load more      |
 ----------------

当前实施

目前，我的PHP视图和JS视图是分开编写的。下面是一个使用CodeIgniter框架加载假设PHP视图的示例。

view.php

<?php
<div>
    <span>cool view</span>
    <span><?=$id?></span>
</div>
?>

controller.php

$this->load->view(
    'view', 
    array('id' => '999')
);

这里有一个AJAX的例子，用Prototype框架加载假设的视图。

ajax.php

echo json_encode(
    array('id' => random())
);

view.js

MyView = Class.create({
    initialize: function(id) {
        var div = new Element('div');
        var span0 = new Element('span').update('cool view');
        var span1 = new Element('span').update(id);
        div.appendChild(span0);
        div.appendChild(span1); 
        return div;
    }
});

controller.js

new Ajax.Request(
    '/index.php/someController/someMethod', {
        onSuccess: function(transport) {
            var response = transport.responseText.evalJSON();
            $('viewsContainer').appendChild(
                new MyView(response.id)
            )
        }
    }
);

需要更清洁的解决方案

我需要一种在PHP和JS之间共享HTML模板的方法，而无需重写所有内容。在我的实际项目中，我有几十种观点。在PHP和JS中复制视图代码似乎很难维护。我没有采用PHP直接将HTML打印到AJAX的廉价方法，因为1）包含HTML标记会有额外的大小开销，2）它与客户端无关——也就是说，非浏览器客户端无法理解输出，3）它不允许JS在视图中的子视图上干净地附加侦听器。

您可以直接向浏览器提供最终的html：

if(<request is from ajax>)
   echo $this->load->view('view', array('id' => '999'), false);

最后一个参数false将视图加载到一个变量中，在这种情况下返回它…

然后，在javascript方面，您只需创建一个新的div，并将其innerHTML设置为response.text

我认为你不需要老式的方式。为什么不使用一个模板引擎，如胡子1？这样一来，您就不会有大量的HTML开销，并且仍然可以发送只包含id的瘦json（10个字符对50个字符，您的情况甚至不需要标记）。

相关文章：