6

客户端模板应该像下面这样（使用下划线的模板引擎）：

<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

4 回答 4

4

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

如果我没有像样的资产管理，我通常会使用脚本标记方法，将模板拆分为服务器上的部分，并包含在页面底部。使用起来有点痛苦，但是 IMO 任何东西都比你的简单示例字符串模板真的不应该内嵌在你的 javascript 文件中。

于 2011-09-24T04:54:42.173 回答
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 字符串是丑陋的，应尽可能避免。它不是语法高亮的，你很容易错过错误。

于 2012-05-25T17:28:03.447 回答
3

我非常喜欢第二种选择，原因如下：

  • 使用字符串意味着处理转义引号等。
  • 多行模板在 Javascript 中很痛苦，因为没有连接就不能拥有多行字符串。任何长度的模板在多行上都会更清晰。
  • JS 字符串中没有语法高亮显示。

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

于 2011-09-24T04:55:18.773 回答
0

您可以使用jQuery 的模板引擎并将所有模板加载到外部 js 文件中。

于 2011-09-24T05:57:25.170 回答