在页面上存储 HTML 模板的最佳实践？

Question

我正在为我正在构建的网站开发一个相当重的 JavaScript 界面，并且我决定使用（最近正式发布的）jQuery 模板插件，用于从我的查询到 JSON API 生成我的元素。现在，我目前遇到的问题是：

我周围很容易有一堆这样的模板。一个用于每种类型的对象，一些用于列表，一些用于页面的各个部分，等等。是否有存储这些模板的首选方式？我读过有关使用模板名称定义带有 id 的

那么，问题是：对于这种情况有没有“最佳实践”？

Answer 1

为什么不直接将模板加载到隐藏元素中，然后使用 $(template).clone() 呢？这可以避免很多令人头痛的事情。我无法谈论 .clone() 与

为什么？

• 即使你有一个时髦的转义实用程序，错误仍然会发生，而且它们会更难阅读。另外，如果您必须在团队环境中工作，特别是当人们滚动/滚动项目时，这可能不容易理解。

• 您可以创建一个指针对象，例如 templates = {}，并使用指向可克隆元素的 jquery 对象指针加载它，如下所示：

  <前><代码>模板= {};
  templates.message = $("#templates.message");
  templates.dialog = $("#templates.dialog");

现在您拥有的一切创建新模板的方法是：

var newDialog = templates.dialog.clone();

您可以创建一个包装函数来接受参数，然后使用 newDialog.find("title").html(title)、newDialog.find("message") 添加这些参数。 html(message)， 等。

同样，从性能角度来看，我不知道哪个更快，因为我现在没有时间测试。但我知道，当处理足够大、需要模板的代码库时，使用认可的方法通常会更好……最终不可避免的是其他人会参与其中，而且你需要解释的事情越多，你的时间就越少做你自己的糟糕编码。

性能的另一个重要方面是计时...如果您遇到性能延迟，您应该确保使用 setTimeout 来分解冗长的可执行代码块。它创建一个新堆栈，并让浏览器绘制在创建新堆栈之前已经处理过的内容。当处理作为性能问题一部分的视觉延迟时（通常是最常见的性能问题，尤其是非编码人员），这非常有帮助。如果您想了解更多信息，请给我发消息，我会收集一些资源。现在时间有限，正在扑灭工作中的火灾。 :)

Answer 2

我最近做了这个练习，虽然

我的版本是一个基本模板，并使用 form ##VALUE##

TEMPLATE 可替换值进行替换： （单个项目模板或行模板）

<script type="text/html" id="ItemTemplate">
<table>
  <tr>
    <td>##LABEL1##</td>
    <td>##VALUE1##</td>
  <tr>
</table>
</script>

内容构造函数：

function constructFromTemplate(content, values, appendTo) {
    var modifiedHtml = content;
    modifiedHtml = modifiedHtml.replace(new RegExp('__', 'g'), '##');

    $.each(values, function (n, v) {
        modifiedHtml = modifiedHtml.replace(new RegExp('##' + n + '##', 'g'), v);
    });

    if (appendTo != null) 
    {
        $(appendTo).append(modifiedHtml);
        //initializePageElements();
    }

    return modifiedHtml;
}

用法

内容将从函数返回和/或者您可以设置appendTo参数设置elementID 自动附加内容。 （将null 设置为不append）

可替换值仅作为动态对象添加，其中对象 名称是可替换项。

var theContent = constructFromTemplate(ItemTemplate, { LABEL1: 'The Label 1 content', LABEL2: 'The Label 2 content' }, null);

注意：
我已经注释掉了//initializePageElements();，这是用来初始化模板上的jQuery插件、样式的。

将内容插入 DOM 时似乎只有内联样式才有效

Answer 3

看看 https://github.com/inspiraller/STQuery

STQuery 使用与jquery，但它不是在 dom 上操作元素，而是直接在字符串上工作：

var strTemplate = '<div id="splog"><h1>lorem ipsum</h1><div class="content">lorem ipsum</div></div>';

var ST = STQuery(strTemplate);

ST.find('h1').html('Hello');
ST.find('.content').html('World!');

var strTemplateUpdated = ST.html();

这使逻辑与模板分开，即不引人注目的 html 模板。

相对于 jquery 的优点是 STQuery 不必首先写入 DOM，这意味着您可以使用 Web Worker 或在服务器上执行所有模板操作。注意：截至此消息，stquery 仅用 JavaScript 编写，因此需要转换为所选的服务器端语言。

Answer 4

在过去的一年里，我为此尝试了许多不同的技术，我同意 script 技巧感觉有点不对，但我认为这是我们拥有的最好的技术。

页面加载时需要出现的任何模板都必须是 DOM 的一部分。任何将它们存储在其他地方并加载它们的尝试都会产生明显的滞后。

我编写了一些模板帮助程序，允许我在页面上插入必要的模板，同时仍然可以在需要时通过 AJAX 延迟加载它们。我在页面加载时将页面上的所有模板加载到变量中，这使得引用更容易一些。

我当然想听听其他人是如何解决这个问题的。

Answer 5

我在我的框架中成功使用了脚本 jquery 纯 html 模板

关于最佳实践，请看一下 Twitter 的新界面，所有内容都使用一个页面，并且仅通过“#!/paths”进行内部路由。

使用单页网站接缝是 Web 应用程序的下一个重大步骤，我个人喜欢将其称为 web 3.0 :) 它还将消除每个页面上拥有所有相同模板的问题 - 您将拥有只有一页。

Answer 6

在 asp.net mvc 中，我经常将常用模板打包在部分视图中，我可以将其包含在需要的地方。这样我就不需要到处重复我的模板。

另一种方法是将模板放在单独的文件中。就像 newslist.tmpl.html 一样，它允许您使用 ajax 加载模板。考虑到这可以与数据加载并行完成，它不会减慢应用程序的速度，因为无论如何它很可能比数据调用更快。