<script>标签内的HTML标签如何工作？</script>

Question

例如，查看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>

在 script 标签内，HTML 标签是如何工作的？还有那些类似于代码 {{= .... }} 的 HTML 标签和模板一样的代码所使用的技术是什么？

- YOU

---

可能类似于Mustache - http://mustache.github.com/ - Kai

Answer 1

您可以在<script>标签中放置任何想要的内容。如果指定的内容类型不是Javascript（或其他浏览器理解的脚本语言），则浏览器不会对其进行解释，您只能将其视为纯文本访问。由于<script>标记的内容被视为CDATA，因此内容不会被解析，您可以在其中存储未引用的XML或HTML内容（只要您永远不要在内容中放置</script>标记，因为这将关闭您的元素）。

例如，在SVG Web中使用了这种方法，它是一种polyfill，允许您在HTML中使用内联SVG，并在支持它的浏览器中将其转换为本机SVG，或者在不支持它的浏览器中使用Flash。它允许在不支持它的浏览器中嵌入SVG，方法是将它包装在<script>标记中，这样浏览器就不会尝试并失败地将其解析为HTML。

在SO职业中，他们似乎在<script>标记中存储与Backbone.js和Underscore.js一起使用的模板，因为那是将模板粘贴到HTML中的便捷位置。以下是他们抓取模板并将其提供给Underscore模板引擎的代码片段：

    TopAnswerView = Backbone.View.extend({
        template: _.template($("#topanswer").html()),
        events: {
            "click .add-answer": "addAnswerToCV"
        },

- Brian Campbell

Answer 2

关键在于脚本的type属性。将其设置为type="text/html"，它就不会被浏览器的JavaScript引擎运行。相反，它用于其他事情，例如模板制作。此示例似乎正在使用这些标记来制作模板。

请查看此MIX 2011网络研讨会，了解类似内容如何在Knockout.js中使用： http://channel9.msdn.com/events/mix/mix11/FRM08

- Shawn

---

以下是一些其他的例子：http://blog.reybango.com/2010/07/09/not-using-jquery-javascript-templates-youre-really-missing-out/。 - Shawn

...和https://dev59.com/nXA75IYBdhLWcg3wipmH - Shawn