在前端开发中，我们经常会使用到模板引擎来生成动态的 HTML 页面。而有时候，我们希望将模板放在 HTML 页面中，以便更好地组织和维护代码。这时候，就可以使用 <script type="text/template"> 标签。
什么是 <script> 标签</h2>
<p><code><script type="text/template"></code> 标签是 HTML5 中新增加的标签，用于定义一个模板。它的 type 属性通常设置为 "text/template" 或 "text/html"。</p>
<p>当浏览器解析到 <code><script></code> 标签时，如果 type 属性为 "text/template" 或 "text/html"，则不会执行其中的 JavaScript 代码，而是将其作为纯文本进行处理。这样，我们就可以将模板放在这个标签中，等待后续通过 JavaScript 进行渲染。</p>
<h2>如何使用 <script type="text/template"> 标签</h2>
<p>下面是一个简单的例子，展示了如何使用 <code><script type="text/template"></code> 标签：</p>
<pre class="prettyprint html">-- -------------------- ---- -------
--------- -----
------
------
----------------------
-------
------
---- ---------------
------- -------------------- --------------
---------- -- ---- --------
---------
--------
----- -------- - ----------------------------------------------
----- ---- - - ----- ------- --
----- -------- - ------------------------- ------
---------------------------------------- - ---------
---------
-------
-------</pre><p>在这个例子中，我们首先定义了一个模板，并将其放在 <code><script type="text/template"></code> 标签中。然后，在 JavaScript 中，我们通过 <code>document.querySelector('#template').innerHTML</code> 获取到模板内容，将数据渲染进去，最后将渲染结果插入到页面中。</p>
<h2><script type="text/template"> 的优点和缺点</h2>
<p>使用 <code><script type="text/template"></code> 标签的优点如下：</p>
<ul>
<li>将模板和 JS 代码分离，使代码更易维护</li>
<li>避免模板中的 HTML 和 JS 影响彼此</li>
<li>支持多种模板引擎，如 Handlebars、Mustache 等</li>
</ul>
<p>不过，<code><script type="text/template"></code> 标签也有一些缺点：</p>
<ul>
<li>对搜索引擎不友好，因为搜索引擎无法直接解析其中的内容</li>
<li>如果模板特别大，会影响页面的加载速度</li>
</ul>
<p>因此，在使用 <code><script type="text/template"></code> 标签时，需要根据具体情况进行权衡。</p>
<h2>结论</h2>
<p>使用 <code><script type="text/template"></code> 标签可以使代码更加可读、易于维护，同时避免模板中的 HTML 和 JS 影响彼此。虽然它也有一些缺点，但在实际开发中仍然有广泛的应用。</p>
<blockquote>
<p>来源：<a href="https://www.javascriptcn.com/post/8303">JavaScript中文网</a> ，转载请注明来源
<a href="https://www.javascriptcn.com/post/8303">https://www.javascriptcn.com/post/8303</a></p>
</blockquote>
