Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

前端模板神器,TEMPLATE标签

  说到前端模板,我们通常会把HTML片段放在一个类型为非程序的SCRIPT标签中,使用时取出这个HTML片段,用innerHTML之类的方法来解析。但innerHTML之类的方法让人感觉太粗暴了,一点都不文艺!如果可以,我们应该用TEMPLATE标签来解决这类问题。
  TEMPLATE标签的性质有点像SCRIPT标签,有这么几个特点
    1. 自身在文档中不被渲染,只提供程序接口。
    2. 包含的内容不会被直接作为HTML解析。
    3. 可以出现在文档中的任何位置。
  它包含的内容会被作为一个当前文档之外的文档片段存储,程序可以访问这个文档片段。
  比如有一个这样的程序,它用传统的SCRIPT模板形式实现了点击按钮后实例化模板 <script type="text/x-template" id="tmp">
  <span>test</span>
</script>
<input type="button" id="btn" value="实例化模板" />
<script>
btn.onclick=function(){
  document.body.insertAdjacentHTML("beforeend",tmp.innerHTML);
};
</script>
  接着我们用TEMPLATE标签来实现同样的功能 <template id="tmp">
  <span>test</span>
</template>
<input type="button" id="btn" value="实例化模板" />
<script>
btn.onclick=function(){
  document.body.appendChild(document.importNode(tmp.content));
};
</script>
  没有了直接对HTML文本的操作,没有了type属性为非程序的SCRIPT标签,程序顿时变得文艺起来。
  传统的SCRIPT模板是无法嵌套的,因为SCRIPT标签本身无法嵌套,但TEMPLATE标签是允许嵌套的,而且TEMPLATE标签内也可以包含SCRIPT标签。它所包含的任何内容都不会被直接解析,只有把它的内容放入或复制入一个正常的文档中才会解析。也就是说,TEMPLATE标签内包含的SCRIPT标签是不会直接执行的;IMGAUDIO,等标签也不会去加载资源。只有当这些内容被放入正常的文档中使用时候才会工作,之后SCRIPT可以被执行、外部资源可以被加载。
  虽然TEMPLATE标签对于前端模板来说是一个神器,但IE目前尚未支持,目前的适用性还太狭窄。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^