如何使HTML 模板的标准化

作为“一个拥有预制格式的文档或文件，可作为特定应用的出发点，这样就避免在每次使用格式的时候都重复创建”的模板，在Web开发中并不陌生。Web中的模板使用是非常广泛，我们都知道HTML模板是标准化已经经历了一个漫长的过程。创建多年来，可重复使用的模板方法很多，下面将介绍两种常见的方法。

方法一 幕后DOM

已经使用了许多年的一种方法就是创建一个“幕后”的DOM，使用隐藏属性或者不显示功能：以此隐藏其在视图中的位置。

例如：

div id="mytemplate" hidden>

  <img src="logo.png">

  <div class="comment">

</div></div>


使用这种方法确实有很多简便之处，如：

◇使用DOM，浏览器可以识别DOM他们可以很容易复制；

◇没有内容渲染，可以隐藏区块的显示。

但是也存在一些弊端，如：

◇这将是自主行为，即使内容被隐藏，网络请求将在图片中显示；

◇风格主题很难设置，网页被嵌入，都必须在前面加一个CSS规则。

#mytemplate，这是一个非常脆弱的前缀，将样式限制在模板范围中，无法确定未来可能出现的命名冲突。例如，当嵌入的网页具有相同的ID，就会掉到另一个陷阱。

方法二 重载脚本

重载脚本，即将ript>重载，并将其内容作为字符串进行操作。

例如：

<script id="mytemplate" type="text/x-handlebars-template">

  <img src="logo.png">

  <div class="comment">

</div></script>

这种方法的优势就是：没有呈现，也就是ript>可以默认为display：none，所以浏览器不会渲染这一块；自主性，若脚本的类型不为 "text/javascript"，那么浏览器就不会将它的内容当作javascript来解析。

唯一的弊端就是存在 安全问题，这里建议使用.innerHTML，模板嵌入用户提供的数据进行运行时字符串很容易导致XSS漏洞。

总结

相信大家都还记得当jQuery使DOM操作变得更简单时，结果是querySelector（）/querySelectorAll（），就作为本机功能添加到到平台。这是显而易见的巨大成功，一个库图宣传了使用CSS选择器来获取DOM功能，使其被规范采纳。

学习资料分享：http://www.yuantuan.com/index/index/edu