兼容性檢測(cè)
function supportsTemplate() {
return 'content' in document.createElement('template');
}
if (supportsTemplate()) {
// 檢測(cè)通過(guò)！
} else {
// 使用舊的模板技術(shù)或庫(kù)。
}
HTML4 hidden DOM
DOM 并使用 hidden 特性或 display:none 來(lái)將其從視圖中隱藏
- 使用
DOM——瀏覽器了解DOM。它們擅長(zhǎng)處理它。我們可以輕易的復(fù)制這些DOM。 - 沒有內(nèi)容渲染——增加
hidden來(lái)阻止區(qū)塊的顯示。 - 非惰性——即便內(nèi)容是隱藏的，當(dāng)仍然會(huì)發(fā)起圖片請(qǐng)求。
- 難以設(shè)置樣式和主題——嵌入頁(yè)面需要為所有
CSS規(guī)則增加#id前綴，以此來(lái)將樣式限定在模板范圍內(nèi)。這種做法無(wú)法確保未來(lái)可能出現(xiàn)的命名沖突-
HTML4 重載腳本
重載 <script> 并將它的內(nèi)容作為字符串來(lái)操作。
<script id="mytemplate" type="text/x-handlebars-template">
<img src="logo.png">
<div class="comment"></div>
</script>
- 沒有內(nèi)容渲染——瀏覽器不會(huì)渲染該塊，因?yàn)?
<script>默認(rèn)為display:none。 - 惰性——若腳本的類型不為
"text/javascript"，那么瀏覽器就不會(huì)將它的內(nèi)容當(dāng)作 JS 來(lái)解析。 - 安全問(wèn)題——鼓勵(lì)使用
.innerHTML。對(duì)戶提供的數(shù)據(jù)進(jìn)行運(yùn)行時(shí)字符串解析很容易導(dǎo)致 XSS 漏洞。
聲明模板內(nèi)容
<template id="mytemplate">
<img src="" alt="great image">
<div class="comment"></div>
</template>
激活模板
模板深拷貝: document.importNode(template.content, true)
var t = document.querySelector('#mytemplate');
// 在運(yùn)行時(shí)填充 src。
t.content.querySelector('img').src = 'logo.png';
var clone = document.importNode(t.content, true);
document.body.appendChild(clone);
模板特性
- 內(nèi)容惰性激活, 激活前不會(huì)被渲染
- 模板內(nèi)容無(wú)副作用, 腳本不會(huì)運(yùn)行, 圖片不會(huì)加載, 音頻不會(huì)播放... 直到模板被使用
- 內(nèi)容不在文檔中,
document.getElementById()document.querySelector()均不會(huì)返回模板的節(jié)點(diǎn) - 模板能夠被放置在任何位置, 包括
<head><body><frameset>
模板應(yīng)用
惰性腳本(Element綁定事件激活模板)
<button onclick="useIt()">Use me</button>
<div id="container"></div>
<script>
function useIt() {
var content = document.querySelector('template').content;
// 更新 template DOM 中的內(nèi)容。
var span = content.querySelector('span');
span.textContent = parseInt(span.textContent) + 1;
document.querySelector('#container').appendChild(
document.importNode(content, true));
}
</script>
<template>
<div>Template used: <span>0</span></div>
<script>alert('Thanks!')</script>
</template>
從模板中生成 Shadow DOM
<template>
<style>
……
</style>
<div>
<header>
<h3>Add a Comment</h3>
</header>
<content select="p"></content>
<textarea></textarea>
<footer>
<button>Post</button>
</footer>
</div>
</template>
<div id="host">
<p>Instructions go here</p>
</div>
<script>
var shadow = document.querySelector('#host').createShadowRoot();
shadow.appendChild(document.querySelector('template').content);
</script>
注意事項(xiàng)
- 注意嵌套模板, 激活外層模板不會(huì)激活內(nèi)層模板, 內(nèi)層模板需要手動(dòng)激活
- 模板無(wú)法預(yù)渲染, 無(wú)法預(yù)加載, 只能在激活后被渲染
