模版的几种表示方式
- 模版元素，HTML5 中的新玩意儿，template :
<template id="template">
<p>This is a template</p>
</template>
在支持 template 标签的浏览器中是看不到任何信息的，不支持此标签的会显示： This is a template
- 在 template 标签诞生之前一般都是利用 script 标签来实现模版功能的：
<script type="text/template" id="template">
<p>This is the second type template</p>
</script>
这是利用了 script 标签中的内容天生不显示的特性来达到目的的，另外，text/template 这个 type 是不存在的，只是为了凸显其作用，而另行与标准之外的设定。
- 模版，模版，见名知意，网页中的模版，就是不需要显示出来，只要为需要显示的页面部分做出规范。
可以看出主要就是不需要其显示，而又能取出需要的内容：
<div style="display:none" id="template">
<p>This is the third type template</p>
</div>
innerHTML、outerHTML
简述其区别就是：
innerHTML：从对象起始位置到终止位置的全部内容，不包括 html 标签。
outerHTML：除了包含 innerHTML 的全部内容外，还包含 html 标签本身。
<div id="div">This is a div</div>
// 'This is a div'
console.log(div.innerHTML);
// '<div id="div">This is a div</div>'
console.log(div.outerHTML);
取出模版元素
// template tag
template.content
// script
template.innerHTML
// hidden tag
template.outerHTML
template-parser
当然，解析模版是少不了 fragment 的帮忙的。
var toFragment = require('./fragment');
/**
* 将模版解析为文档碎片
* 可以传入如下几种模式的参数：
* id 选择器: '#some-template-id'
* 模版字符串: '<div><span>my template</span></div>'
* DocumentFragment 对象
* 模版节点
*/
module.exports = function(template) {
var templateNode;
// 如果是 DocumentFragment 对象，直接返回
if(template instanceof window.DocumentFragment) {
return template;
}
if(typeof template === 'string') {
// '#' 开头的字符串当作 id 选择器处理
if(template.charAt(0) === '#') {
templateNode = document.getElementById(template.slice(1));
if(!templateNode) return;
// 不是 '#' 开头的，作为模版字符串，直接处理
} else {
return toFragment(template);
}
// 模版节点，后续继续处理
} else if(template.nodeType) {
templateNode = template;
} else {
return;
}
// 浏览器支持 template 标签，其 content 已经是一个文档碎片
if(templateNode.tagName === 'TEMPLATE' && templateNode.content) {
return templateNode.content;
}
// script 标签中的内容会被当作字符串处理
if(templateNode.tagName === 'SCRIPT') {
return toFragment(templateNode.innerHTML);
}
// 普通节点，连同其标签本身一起作为字符串去处理
return toFragment(templateNode.outerHTML);
}
