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

客户端模板应如下所示（使用下划线的模板引擎）：

是放在单独的HTML文件中，还是放在单独的JavaScript文件中？我知道这是双向的

例如，JavaScript文件可能只包含字符串变量列表，如下所示：

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

var-cute='
；
var fb='
；

但我也看到了以下几点：

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

---

仅从关注点分离的角度来看，模板存储属于何处？

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

---

如果我没有像样的资产管理，我通常会使用script-tag方法，在服务器上将模板拆分成部分，并包含在页面底部。这是一种痛苦的工作，但我认为，除了简单的示例字符串模板之外，其他任何东西都不应该在javascript文件中内联存在。

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

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

---

但是使用第二个选项需要以某种方式加载模板文件，或者将其包含在HTML中，或者在构建时将其粘贴到HTML中。另外，由于

脚本

标记，还有更多的数据开销，您必须使用jQuery的

.html（）

或类似的方法从DOM获取字符串。因此，在性能方面，字符串选项可能更好-这就是为什么@Matt建议在构建时将其放入字符串中可能是最好的。

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

如果您使用的是无逻辑客户端模板引擎，则类模板可以嵌入到主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>

//资料
var hello={
问候语：“你好”，
名字：“世界！”
};
你好
世界！

对于以类似小部件的方式使用的模板，隐藏的

容器就可以了

---

把HTML的代码放到Javascript代码块和Javascript字符串中是很难看的，如果可能的话应该避免。它的语法不可高亮显示，您很容易错过错误。

感谢您的优点和缺点，brah。不幸的是jquery.tmpl已经停止使用。

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