何时使用JavaScript模板引擎？

Question

以下是来自Ben Nadel的演示单页长期运行的AJAX应用程序中JavaScript模板的示例，来源于：[源代码]

<script id="contact-list-item-template" type="application/template">

    <li class="contact clear-fix">

            <div class="summary">
                    <a class="name">${name}</a>
            </div>

            <div class="actions">
                    <a href="javascript:void( 0 )" class="more">more</a> &nbsp;|&nbsp;
                    <a href="#/contacts/edit/${id}" class="edit">edit</a> &nbsp;|&nbsp;
                    <a href="#/contacts/delete/${id}" class="delete">delete</a>
            </div>

            <dl class="details clear-fix">
                    <dt>
                            name:
                    </dt>
                    <dd>
                            ${name}
                    </dd>
                    <dt>
                            phone:
                    </dt>
                    <dd>
                            ${phone}
                    </dd>
                    <dt>
                            email:
                    </dt>
                    <dd>
                            ${email}
                    </dd>
            </dl>

    </li>

我想问一下使用JavaScript模板引擎的目的是什么？ 它是为了节省带宽吗？这只是涉及到关注点分离吗？它是否有助于解决浏览器内存泄漏问题？

在什么情况下应该使用模板引擎，什么情况下使用原始HTML AJAX响应更容易些？

相关讨论：

JQuery模板引擎

- BinaryButterfly

---

我也想知道：我们什么时候使用客户端模板？ - jrharshath

@Jr：请参考我的回答。 - Tarik

Answer 1

模板化在以下几个场景中是一个不错的解决方案：

• 从服务器加载所有数据，特别是在丰富的列表显示中
• 添加或更新列表中的新项目
• 任何需要在页面上添加新复杂内容的地方
• 需要客户端HTML渲染的任何事物

来源： http://www.west-wind.com/Weblog/posts/509108.aspx

- Tarik

---

需要客户端HTML渲染的任何内容。几乎所有的HTML都需要渲染，您是指使用JavaScript动态渲染时吗？ - BVernon

Answer 2

一个 模板引擎 可以让我们在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送到客户端的 HTML 文件。这种方法使设计 HTML 页面更容易。

然而，我们有优点和缺点

优点：

• 鼓励良好的代码组织（数据生成与表示代码分离）。
• 输出生成更具表现力（模板语法不需要大量字符串拼接）
• 更高的生产力（常见问题如输出编码、迭代、条件等已得到处理）。
• 通常需要更少的代码（特别是jade具有非常简洁的语法）

缺点：

• 一些性能开销，即您可以动态生成比模板引擎更快的HTML。
• 又要学习另一件事情

- Muhammad Usama Rabani