关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

web组件的模板是怎么用的

作者:佚名   时间:2014-07-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)
  一旦获得了这个片段,就可以适当操纵它了.



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/help/20151126/n1831.html

上海联楷网络新闻