2

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 模板。

4

2 回答 2

2

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

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

在此处输入图像描述

如您所见，h1标签内的标签与我的 HTML 中script的真实标签不同。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>

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

在此处输入图像描述

我相信您的编辑器必须有一个解决方案。

视觉工作室 2012

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

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

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

显示：无；

您的最后一个解决方案使用display: none不好，因为搜索引擎会将其中的内容编入索引，请参见：

于 2013-06-08T03:26:35.837 回答
0

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

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

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

此外，您永远不会知道模板中的内容。它可以包含具有 10k 行的表。脚本在这些隐藏块中运行。它可能包含繁重的脚本，其中可能包含阻塞元素，例如同步 XHR 或运行 10 万次的循环。谁知道！

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

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

于 2013-06-08T02:32:37.677 回答