Question

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

我很容易就有很多这些模板。一种用于每种对象，一种用于列表，一些用于页面的部分，等等。是否有任何存储这些模板的首选方式？我已经阅读过使用模板名称定义带有<script>的{{1}}标记，然后从那里检索文本（正如John Resig在“JavaScript Micro-Templating”中所述），但是每一页中的那些id标签都看起来有些束缚。

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

Answer 1

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

为什么？

即使你有一个时髦的逃避实用程序，仍然会犯错误，并且它们将更难以阅读。此外，如果您必须在团队工作中工作，特别是如果人们启动/滚动项目，可能不容易理解。
你可以创建一个指针对象，比如说templates = {}，并用jquery对象指针加载它，你可以克隆这些元素，如下所示：
```
 templates = {};
 templates.message = $("#templates .message");
 templates.dialog = $("#templates .dialog");
```

现在，您需要做的就是创建一个新模板：

var newDialog = templates.dialog.clone();

你可以创建一个包装函数来接受params，然后用newDialog.find("title").html(title), newDialog.find("message").html(message),等添加它们。

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

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

Answer 2

我最近完成了这个练习，尽管<script>标签方法看起来有些过时，但我认为这是一个很好的解决方案并且选择了我自己的版本（John Resigs版本显然非常好，但我去了我的对我自己的大脑版本很容易理解）

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

中的可替换值替换

模板:(单项模板或行模板）

<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;
}

<强> USAGE

将从函数返回内容和/或您可以将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

查看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 pure html templates

中成功使用了脚本

关于最佳做法，请查看twitter的新界面，使用一个页面查看所有内容，并仅通过“＃！/ paths”在内部进行路由。

使用单页网站接口成为Web应用程序的下一个重要步骤，我个人称之为 web 3.0 :)它还可以消除每页上具有所有相同模板的问题 - 你将只有一页。

Answer 6

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

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

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

6 个答案: