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