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

时间:2011-09-24 04:48:18

标签: javascript underscore.js separation-of-concerns client-side-templating

客户端模板应该如下(使用下划线的模板引擎):

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

仅从分离关注的角度来看,模板存储属于哪里?

4 个答案:

答案 0 :(得分:4)

我通常会使用一个资产管理系统来连接和缩小javascripts和css,并将客户端模板文件转换为挂起全局变量的JS字符串。这种事情取决于您的平台,但在rails世界中,您希望查看jammitsprockets(现在是rails的一部分)

如果我没有合适的资产管理,我通常会最终使用脚本标记方法,模板在服务器上拆分为部分,并包含在页面底部。使用它有点痛苦,但是IMO不仅仅是你的简单示例字符串模板真的不应该存在于你的javascript文件中。

答案 1 :(得分:4)

如果您使用的是无逻辑的客户端模板引擎,例如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字符串上很难看,如果可能的话应该避免使用。它不是语法高亮的,你很容易错过错误。

答案 2 :(得分:3)

我非常喜欢第二种选择,原因如下:

  • 使用字符串意味着处理转义引号等。
  • 多行模板是Javascript的一个难点,因为你不能没有连接的多行字符串。任何长度的模板在多行上都更清晰。
  • JS字符串中没有语法高亮显示。

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

答案 3 :(得分:0)

您可以使用jQuery's templating engine并在外部js文件中加载所有模板。