HTML语义化：HTML5新标签——template

1、前言　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  当咱们使用String-base的模板引擎（如Handlebars.js等）时，要么就经过外部文件存放模板文本，须要时再经过XHR或script标签加载进来；要么经过<script type="text/x-template"></script>等标签直接写在当前页面上。如今HTML5为咱们提供了一个全新的template标签，以更统1、有效的方式存放String-base模板引擎的模板文本了！

  目录一坨：

  2、那些年咱们存放模板文本的方式

  　　1. script标签

        2. textarea标签

        3. xmp标签

  3、template标签的新视觉

　　   1. 不同的childNodes

　　　2. 伪文档片断入口——content属性

 

2、那些年咱们存放模板文本的方式　　　　　　　　　　　　　　　　　　

  首先要明确模板文档具备如下2个要求：

    1.  <> "' 不被转成字符实体；

    2. 含src特性的img标签不触发资源请求。

  下面是经常使用的存放方式：

    1. script标签

// 模板文本
<script id="tpl" type="text/x-template">
<img src="dummy.png" title="{{title}}"/>
</script>

// 获取模板
<script type="text/javascript">
// 不能经过innerText获取，由于innerText没法获取<img/>等标签字符
var tpl = document.getElementById('tpl').innerHTML
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>

   注意：

     1. 若模板中包含</script>标签会形成标签结束符混乱的问题，所以经过该方式存放模板时，不能包含</script>结束标签;

     2. script标签位置较随意，能够做为head或body的子元素。

　2. textarea标签

// 模板文本
<textarea id="tpl" style="display:none;">
<img src="dummy.png" title="{{title}}"/>
</textarea>

// 获取模板
<script type="text/javascript">
var tplEl = document.getElementById('tpl')
var tpl = tplEl.value
// 经过tplEl.innerText获取也能够。但不能经过tplEl.innerHTML获取，由于它会对<>"'等转换为字符实体
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>

    注意：

　　1. 若模板中包含</textarea>标签会形成标签结束符混乱的问题，所以经过该方式存放模板时，不能包含</textarea>结束标签；

　　2. textarea元素必须做为body的子孙元素。

    3. xmp标签（语义为标识内容用做示例，现已被标准废除了，但各大浏览器依然支持该标签）

// 模板文本
<xmp id="tpl" style="display:none;">
<img src="dummy.png" title="{{title}}"/>
</xmp>

// 获取模板
<script type="text/javascript">
var tplEl = document.getElementById('tpl')
var tpl = tplEl.innerHTML
// 经过tplEl.innerText获取也能够
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>

    注意：

　　1. 若模板中包含</xmp>标签会形成标签结束符混乱的问题，所以经过该方式存放模板时，不能包含</xmp>结束标签；

　　2. xmp元素必须做为body的子孙元素。

  因为模板文本中出现<script>标签的状况较少，而出现表单元素<textarea>标签的概率较大，而xmp标签已被废弃，所以仍是经过script标签存放模板文本的方式较为常见。

 

3、template标签的新视觉　　　　　　　　　　　　　　　　　　　　　　

  2013年定稿的template标签为咱们提供一种更统1、功能更强大的模板文本存放方式。而它基本的使用方式与以前的3种方式无太大差异：

// 模板文本
<template id="tpl">
<img src="dummy.png" title="{{title}}"/>
</template>

// 获取模板
<script type="text/javascript">
var tplEl = document.getElementById('tpl')
// 经过tplEl.innerText获取也能够
var tpl = tplEl.innerHTML
tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '')
Handlebars.compile(tpl)({title: 'test'})
</script>

   注意：

     1. 若模板中包含</template>标签会形成标签结束符混乱的问题，所以经过该方式存放模板时，不能包含</template>结束标签;

     2. script标签位置较随意，能够做为head或body的子元素。

   到这里你们会以为template标签除了做为W3C标准外，跟script标签没多大的差异。那是由于咱们还没对其深刻而已啦，下面咱们将对其一一了解吧！

   1. 不同的childNodes

     script、textarea和xmp方式存放模板文本时，经过 tplEl.childNodes.length 均返回1， tplEl.childNodes[0].nodeName 均返回#text。而template返回的是0。

   2. 伪文档片断入口——content属性

     经过innerHTML或innerText属性，template内部的模板文本将被视为普通文原本使用。但template元素为咱们提供了另外一种使用方式，那就是“文档片断”。

     “文档片断”的[[Class]]为[object DocumentFragment]，“文档片断”具备文档片断的全部功能API，不一样的是设置img元素的src属性不会发出资源请求、不执行Script和CSS规则，而[object HTMLDocument]“文档”则会发送img请求并在当前browsing context(即window对象上下文)内执行Script和CSS规则。

而咱们能够经过content属性获取“文档片断”。

var tplEl = document.getElementById('tpl')
var x = tplEl.content
var img = x.querySelector('img')
console.log(img.src) // 显示空字符串
console.log(img.getAttribute('src')) // 显示dummy.png
img.src = img.getAttribute('src')
console.log(img.src) // 显示about:blank

    当添加到当前文档中才会发起资源请求。

document.body.appendChild(img)
// 发起资源请求
console.log(tplEl.innerHTML.replace(/^[\s\u3000]*|[\s\u3000]*$/,'')) // 显示空白字符串

    因为appendChild方法实际上会对元素进行剪切操做，所以没法实现模板复用的效果。所以咱们须要复制模板内的元素，而后再将元素副本添加到当前文档中。实现手段有不少种，你们能够自行了解一下。

    那么怎样将整个template提供的DocumentFragment导出到当前document呢？答案就是采用IE9+才有的document.importNode方法了。

var tplEl = document.getElementById('tpl')
var x = tplEl.content
var clone = document.importNode(x, true)
document.body.appendChild(x)

 

4、总结　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

  本篇为拜读张鑫旭《HTML5 <template>标签元素简介》后的笔记+我的经验总结，就写到这里吧！

  尊重原创，转载请注明来自：http://www.cnblogs.com/fsjohnhuang/p/4175711.html ^_^肥子John

 

5、参考　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template