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

Question

我正在为我正在构建的网站开发一个相当繁重的 JavaScript 界面，我决定使用（最近成为官方的）jQuery templates plugin 将我的元素从我的查询生成到 JSON API。现在，我目前遇到的问题是：

我很容易拥有一堆这样的模板。一种用于每种对象，一些用于列表，一些用于页面的各个部分，等等。有存储这些模板的首选方式吗？我读过关于使用模板名称定义带有id 的<script> 标签，然后从那里检索文本（正如John Resig 在“JavaScript Micro-Templating”中描述的那样），但是有一堆<script>每个页面中的标签看起来都有些骇人听闻。

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

Answer 1

看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 2

我最近做了这个练习，虽然<script> 标签方法看起来有点老套，但我接受了这个很好的解决方案并选择了我自己的版本（John Resigs 版本显然非常好，但我很容易选择了我自己的版本我自己的大脑版本可以理解）

我的版本是一个基本模板和替换使用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 设置为自动append 内容。 （将null 设置为不append）

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

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

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

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

Answer 3

为什么不直接将模板加载到隐藏元素中，然后使用$(template).clone()？这样可以避免很多逃避的头痛。我无法谈论 .clone() 与 <script> 方法的性能，但我可以告诉你，额外的脚本标签会降低性能并且通常会使代码变得混乱。

为什么？

• 即使你有一个时髦的转义实用程序，仍然会犯错误，而且阅读起来会更加困难。另外，如果您必须在团队环境中工作，尤其是当人们启动/退出项目时，这可能不容易理解。

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

   templates = {};
   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 4

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

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

Answer 5

我的框架成功使用了脚本jquery pure html templates

关于最佳实践，请看推特的新界面，一页一页，只通过“#!/paths”进行内部路由。

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

Answer 6

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

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

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

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