2

我需要将大量 PHP 生成的 HTML（5000 个 div 元素）附加到文档片段并将其附加到页面正文。

示例 HTML（这只是 StackOverflow 源代码的一部分，但类似）：

<div itemscope itemtype="http://schema.org/Article">
<link itemprop="image" href="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
<div id="question-header">
    <h1 itemprop="name"><a href="/questions/4287357/access-php-variable-in-javascript" class="question-hyperlink">Access PHP variable in JavaScript [duplicate]</a></h1>
</div>
<div id="mainbar">



<div class="question" data-questionid="4287357"  id="question">

            <div class="everyonelovesstackoverflow" id="adzerk1">
        </div>


    <table>
        <tr>
            <td class="votecell">


<div class="vote">
    <input type="hidden" value="4287357">
    <a class="vote-up-off" title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a>
    <span class="vote-count-post ">2</span>
    <a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)">down vote</a>

    <a class="star-off" href="#" title="This is a favorite question (click again to undo)">favorite</a>
    <div class="favoritecount"><b>1</b></div>   


</div>

我已将问题分解为 2 个较小的问题：

  1. 在 Javascript 中存储 PHP 变量：var tmp = "<?php Print($DOM); ?>";
  2. 将 HTML 附加到文档片段中（看过这个，但它是关于别的东西）

我怎样才能让它工作？

4

1 回答 1

1

我最近一直在使用jsrender来处理将大量 JSON/Javascript 数据格式化为 HTML。这让我可以将更多数据打包成更少的字节，然后让客户端使用模板创建大量 HTML。这是一个简单的例子：

<html><head>
    <script type="text/x-jsrender" id="historyTemplate">
        {{if orders}}
            <h1>Your Order History</h1>
            <table>
                <thead>
                    <tr><th>Order Name</th><th>Amount</th><th>Status</th><th>Tracking</th></tr>
                </thead>
                <tbody>
                    {{for orders}}<tr>
                        <td><a href="{{>orderId}}" class="orderDetailLink">{{>orderName}}</a></td>
                        <td>{{>total}}</td>
                        <td>{{>status}}</td>
                        <td>{{if trackingNumber}}
                            <a target="_new" href="{{:trackingURL}}">{{>trackingNumber}}</a>
                        {{/if}}</td>
                    </tr>{{/for}}
                </tbody>
            </table>
        {{else}}
            <h1>You have no prior webstore orders.</h1>
        {{/if}}
    </script>

    <script type="text/javascript">
        var customer = {
            name: 'Joe Bloe',
            orders: [
                {   orderName: 'Joe Bloe 2013/04/01 #595',
                    total: 59,
                    status: 'Not yet shipped',
                    trackingNumber: null,
                    trackingUrl: null
                },
                {   orderName: 'Joe Bloe 2013/04/15 #876',
                    total: 32.50,
                    status: 'Shipped',
                    trackingNumber: '55512345',
                    trackingUrl: 'http://www.shipper.com/track?55512345'
                },
            ]
        };
        $("#orderDiv").html( $('#historyTemplate').render(customer) );
    </script>
</head><body>
    <h1>Your Order History</h1>
    <div id="orderDiv"> </div>
</body></html>

数据在提供时可以是页面的一部分，也可以通过 AJAX 或 JSONP 到达，也可以由客户端自己动态生成。到目前为止，我从来没有遇到过性能问题。

于 2013-04-23T01:19:28.987 回答