Javascript HTML 标签如何在脚本标签中工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5679220/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How does HTML tags work inside script tag?
提问by YOU
For example, view-source at Joel Spolsky's public career profile
例如，在Joel Spolsky 的公共职业简介中查看源代码
<script type="text/html" id="stackexchangeanswerswidget">
<h3>Top Answers</h3>
<div class="answers">
</div>
</script>
<script type="text/html" id="topanswer">
<div class="top-answer">
<div class="top-answer-stats">{{= shared.htmlEncode(Score) }}</div>
<span class="top-answer-title"><a href="{{=AnswerLink}}">{{= shared.htmlEncode(Title) }}</a></span>
<a class="add-answer">add</a>
<br class="clear" />
</div>
</script>
<script type="text/html" id="answer-view">
<div class="answer">
<div class="answer-stats {{= shared.htmlEncode(Site.toLowerCase().replace(/ /g, '')) }}">
<div class="score">
<strong>{{= shared.htmlEncode(Score) }}</strong>
<div class="votecount">votes</div>
</div>
<img class="answer-logo" src="{{= shared.htmlEncode(FaviconUrl) }}" />
</div>
<div class="answer-content">
<span class="q">Q:</span>
<div class="answer-top">
<a class="answer-title" href="{{= shared.htmlEncode(AnswerLink) }}">{{= shared.htmlEncode(Title) }}</a><br />
</div>
<span class="a">A:</span><div class="answer-body">{{= Body }}</div>
<div class="more-button" style="text-align:center; clear:both; display:none;"><a class="more">More</a></div>
</div>
</div>
</script>
How does HTML tags work inside script tag? and/or What kind of technology used for those html tags, and template alike codes {{= .... }}inside script tags?
HTML 标签如何在脚本标签中工作？和/或那些 html 标签和{{= .... }}脚本标签内的类似模板的代码使用了什么样的技术？
采纳答案by Brian Campbell
You can put anything that you want in a <script>tag. If you specify a content type other than Javascript (or another scripting language that the browser understands), it will not be interpreted by the browser, and you can just access it as plain text. Since the contents of <script>tags are treated as CDATA, the contents are not parsed and you can store unquoted XML or HTML in the contents (as long as you don't ever put a </script>tag in the contents, since that will close your element).
您可以在<script>标签中放入任何您想要的内容。如果您指定除 Javascript（或浏览器理解的其他脚本语言）以外的内容类型，浏览器将不会对其进行解释，您只能以纯文本形式访问它。由于<script>标记的内容被视为 CDATA，因此不会解析内容，您可以在内容中存储不带引号的 XML 或 HTML（只要您从未</script>在内容中放置标记，因为这会关闭您的元素）。
This is used, for example, in SVG Web, a polyfill that allows you to use inline SVG in HTML and have that converted to native SVG in browsers that support it, or Flash in browsers that don't. It allows embedding of SVG in browsers that don't support it natively by wrapping it in a <script>tag, so the browser doesn't try and fail to parse it as HTML.
例如，这在SVG Web 中使用，它允许您在 HTML 中使用内联 SVG，并在支持它的浏览器中将其转换为原生 SVG，或在不支持它的浏览器中转换为 Flash。它允许将 SVG 嵌入到不支持它的浏览器中，方法是将其包装在<script>标签中，因此浏览器不会尝试将其解析为 HTML，也不会失败。
In the case of SO carreers, it looks like they storing templates for use with Backbone.jsand Underscore.jsin <script>tags, since that's a convenient place to stick templates in HTML. Here's a snippet of their code where they grab the template and provide it to the Underscore template engine:
在SO carreers的情况下，它看起来像他们存储的模板与使用Backbone.js的和Underscore.js的<script>标签，因为这是一个方便的地方贴模板HTML。这是他们获取模板并将其提供给 Underscore 模板引擎的代码片段：
TopAnswerView = Backbone.View.extend({
template: _.template($("#topanswer").html()),
events: {
"click .add-answer": "addAnswerToCV"
},
回答by Shawn
The key is in the script's typeattribute. By setting it to type="text/html"it doesn't get run by the browser's JavaScript engine. Instead it is used for other things, such as templating. This example appears to be using these tags for templates.
关键在于脚本的类型属性。通过将它设置为type="text/html"它不会被浏览器的 JavaScript 引擎运行。相反，它用于其他事情，例如模板。此示例似乎将这些标签用于模板。
Check out this MIX 2011 webcast that shows how something similar is used in Knockout.js:
看看这个 MIX 2011 网络广播，它展示了如何在 Knockout.js 中使用类似的东西：
