Web组件的模板是怎么用的

时间：2014-7-16

  理解Web组件的最简单方式大概就是了解模板,开发可重复使用的代码块,或称为模板,在相当长一段时间内都是网络开发的主题,尽管HTML中从未出现过这方面的本地实现;若要使用模板,则需要使用服务器端语言或JavaScript.
  将Web组件模板视为DOM的一种惰性区块,这之所以十分重要,是因为浏览器对内容进行解析,而非实施,这意味着图像及其他外部元素不会被加载,被包含的脚本也不会运行,相比于使用CSS隐藏元素但资产仍然被加载的情况,这种方法才是性能方面的真正提升.
  声明模板需要使用tempate元素以及所有组成这个模板内容的子元素.下面的代码块使用id #foo显示了一个模板元素,这个元素具有两个子元素(h2和p).模板外是带有id #的div元素,这个元素含有一个h1子元素.
  <template id="foo">
   <h2>Gorilla Beringei</h2>
   <p>A species of the genus Gorilla...</p>
  </template>
  <div id ="har">
    <h1>Eastern Gorilla</h1>
  </div>
  如果读者使用自己的浏览器开发工具来查看这个网页,则不会在template元素内部观察到任何内容,这是因为这个元素的内容在DOM中不可见.
  可以通过使用content对象的脚本来访问模板,这个对象将模板的子元素作为HTML片段返回,例如,下面的代码片段将模板赋给变量tpl并将其content对象存录到控制器中.
  var tpl = document.getElementById('foo');
  console.log(tpl.content)
  一旦获得了这个片段,就可以适当操纵它了.