23

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

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

所以，问题是：这种情况有什么“最佳实践”吗？

4

6 回答 6

8

为什么不将模板加载到隐藏元素中然后使用$(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 分解冗长的可执行代码块。它创建一个新堆栈，并让浏览器在创建新堆栈之前绘制它已经处理的内容。这在处理作为性能问题一部分的视觉延迟时非常有帮助（通常是最常见的性能问题，尤其是非编码人员）。如果您想了解更多信息，请给我发消息，我会收集一些资源。现在时间有限，在工作中灭火。:)

于 2010-11-22T20:09:21.970 回答
4

我最近做了这个练习，虽然<script>标记方法看起来有点 hackish，但我接受了这个很好的解决方案并选择了我自己的版本（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 时，似乎只有内联样式有效

于 2010-11-18T20:57:02.267 回答
2

看看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 编写，因此需要转换为选择的服务器端语言。

于 2011-07-20T15:18:09.843 回答
1

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

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

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

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

于 2010-11-18T20:56:13.363 回答
1

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

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

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

于 2010-11-19T23:36:04.627 回答
0

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

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

于 2010-11-22T21:16:26.043 回答