Javascript 使用隐藏状态（而不是注释或自定义脚本标记）模板化HTML

Javascript最佳实践和约定，如johnresig和nicholaszachas（可维护Javascript一书的作者）所强调的，建议使用带有自定义类型的HTML注释或脚本标记来存储HTML模板

注释示例：

<div id="myTemplate">
<!-- <ul><li>$item</li></ul> -->
</div>
<script>
   var myTemplate = document.getElementById('myTemplate').childNodes[0].data;
   var myHtml = myTemplate.replace(/\$item/g, itemValue);
</script>

var myTemplate=document.getElementById（'myTemplate'）.childNodes[0]。数据；
var myHtml=myTemplate.replace（/\$item/g，itemValue）；

脚本标记示例：

<script id="myTemplate" type="text/x-html-template">
    <ul><li>$item</li></ul>
</script>
<script>
   var myTemplate = document.getElementById('myTemplate').innerHTML;
   var myHtml = myTemplate.replace(/\$item/g, itemValue);
</script>

$item

var myTemplate=document.getElementById（'myTemplate'）.innerHTML；
var myHtml=myTemplate.replace（/\$item/g，itemValue）；

我非常不喜欢基于注释的模板，因为注释应该是这样的——注释，被正常运行的应用程序忽略——因此我对JS专家如何建议它感到有点困惑

脚本标记模板化更有意义，我通常称之为最好的（如果不是很好的话）实践，因为目的和最初的非功能都被很好地描述了。我唯一的问题是，在一些现代编辑器中，在使用脚本标记时，颜色高亮显示、自动完成、自动标记验证等都会丢失

我过去采用的一种模板化方法是将其全部放在容器div中，然后将容器div分类为class=“template”，然后在CSS中将其标记为“.template{display:none；}”

$item

var myTemplate=document.getElementById（'myTemplate'）.innerHTML；
var myHtml=myTemplate.replace（/\$item/g，itemValue）；

这对我来说很好，虽然DOM解析器和渲染器显然不必要地预先处理数据，但我不确定这是否真的是一个大问题，只要模板构造不破坏HTML有效性规则

---

那么，我的问题是，我遗漏了什么？第三种存储模板标记的方法（即，将其作为display:none放入DOM中）之所以不受欢迎，是因为DOM解析器和渲染器无论如何都会处理它，这是唯一的原因吗？或者还有其他原因，也许是技术原因，我还没有遇到？我想知道，因为我想再次利用编辑器的功能来帮助我微调适当的HTML模板。

不必要的解析就是使用脚本标记方法的原因

声明JS以外的其他类型会使浏览器完全忽略该块。因此，您可以节省处理时间和内存。但你可能会认为“用户肯定有强大的机器”。不一定

移动设备上的页面性能比桌面上的页面性能慢得多。移动设备的内存和处理能力有限。因此，解析隐藏的HTML块是不必要的

而且，您永远不会知道模板中有什么。它可以包含10k行的表。脚本在这些隐藏块中运行。它可能包含大量脚本，其中可能包含阻塞元素，如同步XHR或运行10万次的循环。谁知道呢

此外，您将创建DOM元素并将它们作为字符串获取。为什么不先把它们做成弦呢？跳过DOM构建部分

---

它们是模板，您应该根据需要运行它们，而不是不必要的。除非你知道你那些隐藏的标签里面有什么，那么当然，为什么不呢？但是向公众发布或将其作为一般指南，我会坚持使用更安全的方法。

我认为最好的方法是使用

标签。但对于你的编辑来说， 它必须有一个解决方案，将HTML支持添加到带有

type=“HTML/template something”

的

标记中

例如，我在Sublime Text中编码，当我想编写脚本模板标记时， 我的编辑向我展示了如下内容：

<script id="myTemplate" type="text/html">

如您所见，

script

标记中的

h1

标记与我的HTML中的real

h1

不同。 所以我在互联网上搜索，找到了一个解决方案：找到一个名为

HTML.tmLanguage

的文件名，并进行以下更改：

// change this line
<string>(?:^\s+)?(&lt;)((?i:script))\b(?![^&gt;]*/&gt;)</string>

// to this line
<string>(?:^\s+)?(&lt;)((?i:script))\b(?!([^&gt;]*text/template[^&gt;]*|[^&gt;]*/>))</string>

//更改此行
（？：^\s+）（（？：脚本））\b（？！[^]*/）
//这条线
（？：^\s+）（（？：脚本））\b（？（[^]*文本/模板[^]*.[^]*/>）

之后，我在我的编辑器中得到了这个结果：

我相信您的编辑一定有解决方案。

---

Visual Studio 2012 在Visual Studio 2012中，如果使用以下脚本：

<script id="myTemplate" type="text/html">

它将把其中的内容解析为HTML

---

显示：无；

---

使用

display:none

的上一个解决方案是不好的，因为搜索引擎将索引其中的内容，请参见以下内容：

---

上一个解决方案，使用

display:none

是不好的，因为搜索引擎会索引其中的内容（）。您是否考虑过使用require.js？基本上你可以用文本注入随机文本！插件并避免您所说的内容，在html页面上乱扔垃圾并将所有内容保留在内存中。NOX您需要回答这一问题，因为这是对我实际问题的实际回答（“为什么是其他原因或是它？”），我使用的编辑器是Visual Studio 2012（有时在我查看指导他人的工具时使用WebMatrix）。VS是高度可扩展的，但恐怕我不得不用编译的加载项来破解它。@stimpy77我认为在VS 12中，如果您使用这样的脚本：

它会将其中的内容解析为HTML。试试看：）