換個标簽寫前端模闆

前端模闆中，我們通常使用 script/textarea 來存放模闆代碼，然後使用 innerHTML/value 屬性來擷取模闆内容進行解析和拼裝。

W3C工作組在 HTML 中加入了一個新的标簽 ——TEMPLATE。他提供了一個可以定義 HTML 代碼片段的機制，下面就來詳細說說這個 TEMPLATE 标簽。

本文位址：http://www.cnblogs.com/hustskyking/p/javascript-template-tag.html，轉載請注明源位址。

運作下面的 demo，或許你已經知道了一些東西了。

運作代碼

這裡使用的 template 标簽，标簽的内容沒有被解析，我們并沒有也使用 innerHTML 這種暴力手段擷取模闆内容。

這個标簽可以被定義在任何位置：head 中、body中、甚至是一個 frame 中。

标簽内容不會顯示出來

Template 标簽不被當做 document 的一部分，你可以去試試彈出 <code>document.getElementById("tpl").length</code>, 或者看看他其他的屬性，得到的結果都是 undefined。

标簽内容在被應用之前，都是 inactive 狀态，也就是說模闆中的 img、audio、script 标簽都不會執行（加載）

每一個 template 元素都會和一個 DocumentFragment 對象關聯，當一個 template 元素被建立時，浏覽器會運作如下操作：

讓文檔（doc）是模闆元素的ownerDocument的相應的模闆内容擁有者文檔（owerDocument）。

建立一個 DocumentFragment 對象，這個對象的擁有者文檔（owerDocument）為 doc

将模闆文檔的 content 内容放到上述新建立的 DocumentFragment 中

很可惜，這玩意兒雖然好用，但 IE 目前還不支援，當然 Chrome 32+ | Firefox 25+ 都提供了支援。

從上面的 demo 中，可以發現，擷取 template 标簽的内容，其方式是：

但是我并不是直接将 content 指派給 htmlTpl，而是：

為什麼要這麼做呢？如果你不是用 cloneNode，而是直接将内容 appendChild 到 DOM 樹中，documentFragment 内的内容就會被清空，上面我們說了 template 标簽内容就是一個 documentFragment 的 shadowDOM，是以應該使用 cloneNode 或者 importNode 方法将内容複制到 DOM 中，這樣才能保證這個 shadowDOM 内容不被清空，進而可以複用（你可以把上面 demo 的 cloneNode 函數去掉，看看結果如何）。

其實也沒有比較好的降級處理方案，如果你在 template 中放了 script 或者 img 節點，這些内容都會被解析出來，你阻止不了，是以如果你的程式要相容所有的浏覽器，暫時就不要用了。當然，你可以做這樣的判斷：

在 script 标簽中嵌入一個 script 标簽，這個幾乎是不可能的事情吧，但是 template 可以：

至于插入之後是個什麼效果，讀者可以自己去浏覽器中檢視。這種插入方式是有使用場景的，很多時候我們都是給需要應用模闆的元素設定一個 id 或者 class ，友善找到他們，而這種直接插入的方式，我們可以利用模闆代碼直接找到需要應用模闆的元素，如：

Web Components 是一些規範，旨在以浏覽器原生的方式向外提供元件，它的規範如下:

模闆（Templates）可以将不必立即渲染的元素，不必立即執行的腳本放入這裡。

裝飾器（Decorators）

Shadow DOM

自定義元素（Custom Elements），實作自定義html标簽，及屬性。擁有同原生元件一樣的生命周期

Imports, 指定引入的元件文檔及類型

其實本文提到的内容就是 web components 的冰山一角，感興趣的童鞋可以去讀一讀相關的内容。

本文稀裡嘩啦說了一大串，主要是簡單介紹 web components 中的 template 标簽，用以替換模闆代碼容器 script/textarea，web components 肯定是 web 發展的一個大頭，尤其是移動開發上，很有必要深入研究。

本文轉自Barret Lee部落格園部落格，原文連結：http://www.cnblogs.com/hustskyking/p/javascript-template-tag.html，如需轉載請自行聯系原作者