jquery – 在页面上存储HTML模板的最佳做法？

我正在建立一个相当沉重的JavaScript界面​​，我决定使用(最近制作的官方) jQuery templates plugin来生成从我的查询到JSON API的元素。现在，我目前遇到的问题是：

我很容易有一堆这些模板。一种用于各种对象，一些用于列表，一些用于页面的部分等。是否有任何首选的存储这些模板的方法？我已经阅读了关于定义< script>使用模板名称使用id的标签，然后从那里检索文本(如“John001”在“JavaScript Micro-Templating”中所描述的那样)，但是包含一些< script>每个页面中的标签看起来有点黑客。

那么问题是：这种场景有什么“最佳实践”吗？

解决方法

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