javascript - 使用隐藏状态而不是注释或自定义脚本标签来模板化 HTML

Question

Javascript 最佳实践和约定，例如 John Resig 和《可维护的 JavaScript》一书的作者 Nicholas Zachas 强调的那些，建议使用 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>

脚本标签示例:

<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>

我非常不喜欢基于评论的模板，因为评论应该只是——评论，旨在被正常运行的应用程序忽略——因此我有点困惑它是如何实现的JS 专家建议。

脚本标签模板更有意义，我通常称其为最好的实践，因为它的目的和最初的非功能都得到了很好的描述。我唯一的问题是，在一些现代编辑器中，颜色突出显示、自动完成、自动标记验证等在脚本标签内工作时都会丢失。

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

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

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

那么我的问题是，我错过了什么？不鼓励使用第三种存储模板标记的方法(即将其作为 display:none 放入 DOM 中)的唯一原因是 DOM 解析器和渲染器无论如何都会处理它？还是有其他我还没有遇到的原因，也许是技术原因？我想知道，因为我想再次利用我的编辑器的能力来帮助我微调一个合适的 HTML 模板。

Answer 1

我认为最好的方法是使用 <script>标签。但是对于你的编辑来说，它必须有一个解决方案来将 HTML 支持添加到 <script>用 type="html/template-something" 标记也是。

例如我在 Sublime Text 中编写代码，当我想编写一个脚本模板标签时，我的编辑给我看了这样的东西:

如您所见，h1 script 内的标签标签，与真实的不同 h1在我的 HTML 中。所以我在网上搜索，找到了解决办法:找到一个名为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>

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

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

---

Visual Studio 2012

在 Visual Studio 2012 中，如果您使用这样的脚本:

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

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

---

显示:无；

你最后的解决方案，使用 display: none不好，因为搜索引擎会索引其中的内容，请看:

• Is hidden content (display: none;) -indexed- by search engines?