换个标签写前端模板
2014-04-13 14:21 Barret李靖 阅读(3307) 评论(1) 编辑 收藏 举报前端模板中,我们通常使用 script/textarea 来存放模板代码,然后使用 innerHTML/value 属性来获取模板内容进行解析和拼装。
<script type="text/x-template" id="tpl"> <h1><%=data.title%></h1> <p><%=data.content%></p> </script> <script> var htmlTpl = document.getElementById("tpl").innerHTML; tplEngine(htmlTpl, { title: "This is title", content: "This is content" }); </script>
关于 tplEngine 这个 Javascript 模板引擎,之前也写了篇 文章 介绍过,这里就不赘述了。除了使用 script 标签,textarea 也可以达到同样的效果,但是本文叙述的重点并不是如何去解析一个 JavaScript 模板。
W3C工作组在 HTML 中加入了一个新的标签 ——TEMPLATE。他提供了一个可以定义 HTML 代码片段的机制,下面就来详细说说这个 TEMPLATE 标签。
本文地址:http://www.cnblogs.com/hustskyking/p/javascript-template-tag.html,转载请注明源地址。
一、先看 DEMO
运行下面的 demo,或许你已经知道了一些东西了。
<ul id="list"> <!-- TEMPLATE 模板 --> <template id="tpl"> <li><span></span> - <span></span></li> </template> </ul> <button id="btn">见证奇迹的时刻→</button> <script> var datas = [ {name:"李靖", age:"21"}, {name:"Barret Lee", age:"21"} ]; btn.onclick = function(){ for(var i = 0, len = datas.length; i < len; i++){ var data = datas[i]; // 获取模板代码 var htmlTpl = tpl.content.cloneNode(true); // 插入数据 var spans = htmlTpl.querySelectorAll("span"); spans[0].textContent = data.name; spans[1].textContent = data.age; // 插入到 DOM 中 list.appendChild(htmlTpl); } }; </script>
这里使用的 template 标签,标签的内容没有被解析,我们并没有也使用 innerHTML 这种暴力手段获取模板内容。
二、template 标签特性
- 这个标签可以被定义在任何位置:head 中、body中、甚至是一个 frame 中。
- 标签内容不会显示出来
- Template 标签不被当做 document 的一部分,你可以去试试弹出
document.getElementById("tpl").length
, 或者看看他其他的属性,得到的结果都是 undefined。 - 标签内容在被应用之前,都是 inactive 状态,也就是说模板中的 img、audio、script 标签都不会执行(加载)
三、浏览器对 template 标签的解析
每一个 template 元素都会和一个 DocumentFragment 对象关联,当一个 template 元素被创建时,浏览器会运行如下操作:
- 让文档(doc)是模板元素的ownerDocument的相应的模板内容拥有者文档(owerDocument)。
- 创建一个 DocumentFragment 对象,这个对象的拥有者文档(owerDocument)为 doc
- 将模板文档的 content 内容放到上述新创建的 DocumentFragment 中
上面的过程我是翻译 w3c 的规范文档,读起来相当晦涩,如果你了解 shadowDOM,那理解起来就轻松了,template 在解析是,其内容被解析成一个 shadowDOM,我们只能使用 content 属性来获取到这个 shadowDOM 的内容。
四、兼容性与需要注意的地方
很可惜,这玩意儿虽然好用,但 IE 目前还不支持,当然 Chrome 32+ | Firefox 25+ 都提供了支持。
1. 克隆节点而不是直接使用
从上面的 demo 中,可以发现,获取 template 标签的内容,其方式是:
document.getElementById("tpl").content
但是我并不是直接将 content 赋值给 htmlTpl,而是:
htmlTpl = tpl.content.cloneNode(true);
为什么要这么做呢?如果你不是用 cloneNode,而是直接将内容 appendChild 到 DOM 树中,documentFragment 内的内容就会被清空,上面我们说了 template 标签内容就是一个 documentFragment 的 shadowDOM,所以应该使用 cloneNode 或者 importNode 方法将内容复制到 DOM 中,这样才能保证这个 shadowDOM 内容不被清空,从而可以复用(你可以把上面 demo 的 cloneNode 函数去掉,看看结果如何)。
2. 不支持 template 标签的降级处理
其实也没有比较好的降级处理方案,如果你在 template 中放了 script 或者 img 节点,这些内容都会被解析出来,你阻止不了,所以如果你的程序要兼容所有的浏览器,暂时就不要用了。当然,你可以做这样的判断:
if (!"content" in document.createElement("template")){ // code here.. return; }
3. 模板中嵌入模板
在 script 标签中嵌入一个 script 标签,这个几乎是不可能的事情吧,但是 template 可以:
<template id="ulList"> <li> <strong><%=content%></strong> <template> <div> <p><%=detail%></p> </div> </template> </li> </template>
至于插入之后是个什么效果,读者可以自己去浏览器中查看。这种插入方式是有使用场景的,很多时候我们都是给需要应用模板的元素设置一个 id 或者 class ,方便找到他们,而这种直接插入的方式,我们可以利用模板代码直接找到需要应用模板的元素,如:
var tpl = ulList.getElementsByTagName("template")[0]; // 获取模板 var toBox = tpl.parentNode; // 直接定位要插入的位置 toBox.appendChild(tpl.content.cloneNode(true)); // 插入
五、拓展 web components
Web Components 是一些规范,旨在以浏览器原生的方式向外提供组件,它的规范如下:
- 模板(Templates)可以将不必立即渲染的元素,不必立即执行的脚本放入这里。
- 装饰器(Decorators)
- Shadow DOM
- 自定义元素(Custom Elements),实现自定义html标签,及属性。拥有同原生组件一样的生命周期
- Imports, 指定引入的组件文档及类型
其实本文提到的内容就是 web components 的冰山一角,感兴趣的童鞋可以去读一读相关的内容。
- http://www.html5rocks.com/zh/tutorials/webcomponents/imports/ HTML Imports
- http://www.w3.org/TR/components-intro/ w3c components
- http://www.html5rocks.com/zh/search?q=web+components search
六、小结
本文稀里哗啦说了一大串,主要是简单介绍 web components 中的 template 标签,用以替换模板代码容器 script/textarea,web components 肯定是 web 发展的一个大头,尤其是移动开发上,很有必要深入研究。
七、参考资料
- http://www.whatwg.org/specs/web-apps/current-work/multipage//scripting-1.html#the-template-element W3C
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template MDN
- http://www.c-sharpcorner.com/UploadFile/370e35/template-tag-in-html5/ Sunny Kumar
版权声明: 署名-非商业性使用-禁止演绎 3.0 国际(CC BY-NC-ND 3.0)