原生模板的上风
- 延迟了资本加载
延迟了加载和处置惩罚模板所援用的资本的机遇,如许,用户就能够在模板中运用恣意多的资本,却不障碍页面的衬着。
- 延迟了衬着内容
不管模板在什么位置,浏览器不会把模板中的内容直接衬着出来。开发者能够将模板放在页面中的恣意位置,然后依据详细的情况挑选模板去衬着,而没必要切换模板的display属性,或许忧郁因为剖析不需要的模板内容而带来的开支。
- 从DOM中隐蔽内容
模板中的内容并不能视为DOM的一部分,当我们查询DOM节点时,相对不会返回模板的节点。如许,模板就不会拖慢DOM节点的查询速率。模板尽头内容在激活之前都能够视为隐蔽的。
原生模板的用法
在<template>标签中编写模板,编写好的模板能够被插进去到head body frameset等标签中,或许他们的恣意子女标签中。
<head>
<template id="actq">
<p class="response"></p>
<script type="text/javascript">
(function() {
var p=confirm("tip?")
var responseEl = document.querySelector('.response')
if(p){
responseEl.innerHTML = 'success'
}
else{
responseEl.innerHTML = 'fail'
}
})();
</script>
</template>
</head>
<body>
<div id="atcq-root"></div>
</body>
运用模板时,将模板内容插进去到DOM中即可。
起首取得对模板节点的援用
var template = document.querySelector("#atcq")
然后建立Shadow DOM,以后将模板中的内容填充到根元素中
var root = document.querySelector("#atcq-root").createShadowRoot()
root.appendChild(template.content)
Shadow DOM简介
shadow-dom 实际上是浏览器的一种才能,它许可在浏览器衬着文档的时刻向个中的 Dom 构造中插进去一棵 DOM 元素子树,然则特别的是,shadow DOM 子树并不在主 DOM树中。这颗子树形成了本身的『闭合空间』,比方shadow DOM子树能够包括与父文档中反复的ID和款式,而不会相冲突。