将客户端JavaScript模板放在HTML或JavaScript中？

像下面列出的客户端模板（使用下划线的模板引擎）：将客户端JavaScript模板放在HTML或JavaScript中？

<p class="foo"><%= bar %></p>

被放置在一个单独的HTML文件，或者一个单独的JavaScript文件？我知道这可以同时工作。

例如，JavaScript文件可以只包含字符串变量的列表，像这样：

var cute = '<p class="the"><%= unicorn %></p>'; 
var fb = '<p class="new-design"><%= sucks %></p>';

但我也看到了以下内容：

<script type="text/template" id="omg-template"> 
    <span id="swag-name"><%= name %></span> 
</script>

刚刚从关注角度出发的分离，模板存储属于哪里？

来源

2011-09-24 Qcom

我通常会使用级联资产管理系统和缩小JavaScript和CSS和客户端模板文件翻译成JS串挂在全局变量。这样的事情取决于您的平台，但在轨道世界里，你想看看jammit或sprockets（也就是现在的轨道的一部分）

如果我没有像样的资产管理，我通常会最终使用脚本标记方法，将模板拆分为服务器上的部分，并包含在页面的底部。这是一种痛苦的工作，但海事组织除了你的简单示例字符串模板真的不应该存在内嵌在你的JavaScript文件。

来源

2011-09-24 04:54:42

很好的答案，谢谢你。 – Qcom

我非常喜欢第二个选项，有以下原因：

使用字符串意味着要处理逃逸引号等。
多行模板是Javascript中的一个痛处，因为不能串联多行字符串。任何长度的模板将在多行上更清晰易读。
JS字符串中没有语法高亮显示。

但使用第二个选项需要以某种方式加载您的模板文件，或者将其包含在HTML中，或者在构建时将其粘贴到您的HTML中。另外由于script标签，还有更多的数据开销，并且您必须使用jQuery的.html()或类似的方法从DOM获取字符串。因此，性能方面，字符串选项可能会更好 - 这就是为什么@马特建议在构建时将其置入字符串的建议可能是最好的。

来源

2011-09-24 04:55:18 nrabinowitz

感谢您的优点和缺点，brah。 – Qcom

你可以使用jQuery's templating engine，并加载所有的模板在外部JS文件。

来源

2011-09-24 05:57:25

不幸的是jquery.tmpl已停产。 – Phluks

如果您正在使用logicless客户端模板引擎像Transparency模板可以嵌入HTML主，因为模板本身是有效的HTML。

实施例：

<!-- Template --> 
<div id="template"> 
    <span class="greeting"></span> 
    <span class="name"></span> 
</div> 


// Data 
var hello = { 
    greeting: 'Hello', 
    name:  'world!' 
}; 

<!-- Result --> 
<div id="template"> 
    <span class="greeting">Hello</span> 
    <span class="name">world!</span> 
</div>

对于模板在窗口小部件可以使用类似的方式隐藏<div>容器做的罚款。

把HTML'ish代码为Javascript代码块和JavaScript字符串是丑陋的，应尽可能避免。这不是语法高亮，你很容易错过错误。

来源

2012-05-25 17:28:03

回答

相关问题