<script type = "text/template"> ... </script>说明

Question

我只是偶然发现了一些我从未见过的东西。在Backbone.js的示例TODO应用程序(Backbone TODO Example)的源代码中，他们将他们的模板放在一个<script type = "text/template"></script>中，其中包含的代码看起来像PHP之外的东西，但带有JavaScript标记。

有人能给我解释一下吗？这是合法的吗？

Answer 1

这些脚本标记是在客户端实现模板功能的常用方法(就像在PHP中一样)。

通过将类型设置为"text/template"，它不是浏览器可以理解的脚本，因此浏览器将简单地忽略它。这允许您在其中放置任何内容，稍后可以提取这些内容并由模板库使用来生成HTML代码片段。

Backbone并不强制您使用任何特定的模板库-有相当多的模板库：Mustache、Haml、Eco、Google Closure template等等(您链接到的示例中使用的模板库是underscore.js)。它们将使用它们自己的语法在这些脚本标记中编写代码。

Answer 2

这是合法的，而且非常方便！

试试这个：

<script id="hello" type="text/template">
  Hello world
</script>
<script>
  alert($('#hello').html());
</script>

有几个Javascript模板库使用这种技术。Handlebars.js就是一个很好的例子。

Answer 3

通过设置text/javascript以外的脚本标签type，浏览器将不会执行脚本标签的内部代码。这就是所谓的微模板。这一概念被广泛应用于单页面应用程序(也称为SPA)。

<script type="text/template">I am a Micro template. 
  I am going to make your web page faster.</script>

对于微模板，脚本标签类型为text/template。Jquery的创建者John Resig http://ejohn.org/blog/javascript-micro-templating/很好地解释了这一点。