前端模板中，我们通常使用 script/textarea 来存放模板代码，然后使用 innerHTML/value 属性来获取模板内容进行解析和拼装。
<script type="text/x-template" id="tpl">
<h1><%=data.title%></h1>
<p><%=data.content%></p>
</script>
<script>
var htmlTpl = document.getElementById("tpl").innerHTML;
tplEngine(htmlTpl, {
title: "This is title",
content: "This is content"
});
</script>
关于 tplEngine 这个 Javascript 模板引擎，之前也写了篇 文章 介绍过，这里就不赘述了。除了使用 script 标签，textarea 也可以达到同样的效果，但是本文叙述的重点并不是如何去解析一个 JavaScript 模板。
W3C工作组在 HTML 中加入了一个新的标签 ——TEMPLATE。他提供了一个可以定义 HTML 代码片段的机制，下面就来详细说说这个 TEMPLATE 标签。
本文地址：http://www.cnblogs.com/hustskyking/p/javascript-template-tag.html，转载请注明源地址。
一、先看 DEMO
运行下面的 demo，或许你已经知道了一些东西了。
<ul id="list">
<!-- TEMPLATE 模板 -->
<template id="tpl">
<li><span></span> - <span></span></li>
</template>
</ul>
<button id="btn">见证奇迹的时刻→</button>
<script>
var datas = [
{name:"李靖", age:"21"},
{name:"Barret Lee", age:"21"}
];
btn.onclick = function(){
for(var i = 0, len = datas.length; i < len; i++){
var data = datas[i];
// 获取模板代码
var htmlTpl = tpl.content.cloneNode(true);
// 插入数据
var spans = htmlTpl.querySelectorAll("span");
spans[0].textContent = data.name;
spans[1].textContent = data.age;
// 插入到 DOM 中
list.appendChild(htmlTpl);
}
};
</script>
这里使用的 template 标签，标签的内容没有被解析，我们并没有也使用 innerHTML 这种暴力手段获取模板内容。
二、template 标签特性
- 这个标签可以被定义在任何位置：head 中、body中、甚至是一个 frame 中。
- 标签内容不会显示出来
- Template 标签不被当做 document 的一部分，你可以去试试弹出
document.getElementById("tpl").length, 或者看看他其他的属性，得到的结果都是 undefined。 - 标签内容在被应用之前，都是 inactive 状态，也就是说模板中的 img、audio、script 标签都不会执行（加载）
三、浏览器对 template 标签的解析
每一个 template 元素都会和一个 DocumentFragment 对象关联，当一个 template 元素被创建时，浏览器会运行如下操作：
- 让文档（doc）是模板元素的ownerDocument的相应的模板内容拥有者文档（owerDocument）。
- 创建一个 DocumentFragment 对象，这个对象的拥有者文档（owerDocument）为 doc
- 将模板文档的 content 内容放到上述新创建的 DocumentFragment 中
上面的过程我是翻译 w3c 的规范文档，读起来相当晦涩，如果你了解 shadowDOM,那理解起来就轻松了，template 在解析是，其内容被解析成一个 shadowDOM，我们只能使用 content 属性来获取到这个 shadowDOM 的内容。
四、兼容性与需要注意的地方
很可惜，这玩意儿虽然好用，但 IE 目前还不支持，当然 Chrome 32+ | Firefox 25+ 都提供了支持。
1. 克隆节点而不是直接使用
从上面的 demo 中，可以发现，获取 template 标签的内容，其方式是：
document.getElementById("tpl").content
但是我并不是直接将 content 赋值给 htmlTpl，而是：
htmlTpl = tpl.content.cloneNode(true);
为什么要这么做呢？如果你不是用 cloneNode，而是直接将内容 appendChild 到 DOM 树中，documentFragment 内的内容就会被清空，上面我们说了 template 标签内容就是一个 documentFragment 的 shadowDOM，所以应该使用 cloneNode 或者 importNode 方法将内容复制到 DOM 中，这样才能保证这个 shadowDOM 内容不被清空，从而可以复用（你可以把上面 demo 的 cloneNode 函数去掉，看看结果如何）。
2. 不支持 template 标签的降级处理
其实也没有比较好的降级处理方案，如果你在 template 中放了 script 或者 img 节点，这些内容都会被解析出来，你阻止不了，所以如果你的程序要兼容所有的浏览器，暂时就不要用了。当然，你可以做这样的判断：
if (!"content" in document.createElement("template")){ // code here.. return; }
3. 模板中嵌入模板
在 script 标签中嵌入一个 script 标签，这个几乎是不可能的事情吧，但是 template 可以：
<template id="ulList"> <li> <strong><%=content%></strong> <template> <div> <p><%=detail%></p> </div> </template> </li> </template>
至于插入之后是个什么效果，读者可以自己去浏览器中查看。这种插入方式是有使用场景的，很多时候我们都是给需要应用模板的元素设置一个 id 或者 class ，方便找到他们，而这种直接插入的方式，我们可以利用模板代码直接找到需要应用模板的元素，如：
var tpl = ulList.getElementsByTagName("template")[0]; // 获取模板 var toBox = tpl.parentNode; // 直接定位要插入的位置 toBox.appendChild(tpl.content.cloneNode(true)); // 插入
五、拓展 web components
Web Components 是一些规范，旨在以浏览器原生的方式向外提供组件，它的规范如下:
- 模板（Templates）可以将不必立即渲染的元素，不必立即执行的脚本放入这里。
- 装饰器（Decorators）
- Shadow DOM
- 自定义元素（Custom Elements），实现自定义html标签，及属性。拥有同原生组件一样的生命周期
- Imports, 指定引入的组件文档及类型
其实本文提到的内容就是 web components 的冰山一角，感兴趣的童鞋可以去读一读相关的内容。
- http://www.html5rocks.com/zh/tutorials/webcomponents/imports/ HTML Imports
- http://www.w3.org/TR/components-intro/ w3c components
- http://www.html5rocks.com/zh/search?q=web+components search
六、小结
本文稀里哗啦说了一大串，主要是简单介绍 web components 中的 template 标签，用以替换模板代码容器 script/textarea，web components 肯定是 web 发展的一个大头，尤其是移动开发上，很有必要深入研究。