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

Question

我正在为我正在构建的网站开发一个相当繁重的JavaScript接口,我决定使用(最近制作的官方)jQuery模板插件从我的查询生成我的元素到JSON API.现在,我目前遇到的问题是:

我很容易有一堆这些模板.一种用于每种对象,一种用于列表,一些用于页面的部分,等等.是否有任何存储这些模板的首选方式？我已经阅读过使用模板名称定义<script>标签id,然后从那里检索文本(正如John Resig在" JavaScript Micro-Templating "中描述的那样),但是<script>每个页面中都有一堆标签看起来有点像的hackish.

所以,问题是:对于这种情况,有没有"最佳实践"？

Answer 1

为什么不将模板加载到隐藏元素中然后使用$(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),等等.

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

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

Answer 2

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

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

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

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