何时使用JavaScript模板引擎?

时间:2010-01-16 10:40:32

标签: javascript html templates memory-leaks separation-of-concerns

以下是来自Ben Nadel的演示单页长期存在的AJAX应用程序的JavaScript模板示例:[source]

<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模板引擎的目的是什么? 它是为了节省带宽吗?这只是Separation of concerns的问题吗?它有助于解决浏览器内存泄漏问题吗?

什么时候应该使用模板引擎?什么时候更容易使用原始HTML AJAX响应?

相关讨论:

JQuery templating engines

2 个答案:

答案 0 :(得分:40)

在几种情况下,模板是一个很好的解决方案:

  • 从服务器加载所有数据,尤其是在富名单显示中
  • 在列表中添加或更新新项目
  • 您需要向页面添加新的复杂内容的任何地方
  • 任何需要客户端HTML呈现的内容

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

答案 1 :(得分:0)

StandardDataset使我们能够在应用程序中使用静态模板文件。在运行时,模板引擎用实际值替换模板文件中的变量,然后将模板转换为发送给客户端的HTML文件。这种方法使设计HTML页面更加容易。

但是,我们各有利弊

优点:

  • 鼓励良好的代码组织(数据生成与 演示代码)。
  • 输出生成更具表现力(模板语法不 需要字符串串联)
  • 更高的生产率(常见的问题,例如输出编码, 迭代,条件处理等)。
  • 通常总体上需要较少的代码(尤其是玉器具有非常简洁的语法)

缺点:

  • 一些性能开销,即您可以动态生成HTML 那比模板引擎要快。
  • 还有另一件事要学习