HTML语义化:HTML5新标签——template
一、前言
当我们使用String-base的模板引擎(如Handlebars.js等)时,要么就通过外部文件存放模板文本,需要时再通过XHR或script标签加载进来;要么通过<script type="text/x-template"></script>等标签直接写在当前页面上。现在HTML5为我们提供了一个全新的template标签,以更统一、有效的方式存放String-base模板引擎的模板文本了!
目录一坨:
二、那些年我们存放模板文本的方式
1. script标签
2. textarea标签
3. xmp标签
三、template标签的新视觉
1. 不一样的childNodes
2. 伪文档片段入口——content属性
二、那些年我们存放模板文本的方式
首先要明确模板文档具有以下2个要求:
1. <> "' 不被转成字符实体;
2. 含src特性的img标签不触发资源请求。
下面是常用的存放方式:
1. script标签
// 模板文本 <script id="tpl" type="text/x-template"> <img src="dummy.png" title="{{title}}"/> </script>// 获取模板 <script type="text/javascript"> // 不能通过innerText获取,因为innerText无法获取<img/>等标签字符 var tpl = document.getElementById('tpl').innerHTML tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
注意:
1. 若模板中包含</script>标签会造成标签结束符混乱的问题,因此通过该方式存放模板时,不能包含</script>结束标签;
2. script标签位置较随意,可以作为head或body的子元素。
2. textarea标签
// 模板文本 <textarea id="tpl" style="display:none;"> <img src="dummy.png" title="{{title}}"/> </textarea>// 获取模板 <script type="text/javascript"> var tplEl = document.getElementById('tpl') var tpl = tplEl.value // 通过tplEl.innerText获取也可以。但不能通过tplEl.innerHTML获取,因为它会对<>"'等转换为字符实体 tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
注意:
1. 若模板中包含</textarea>标签会造成标签结束符混乱的问题,因此通过该方式存放模板时,不能包含</textarea>结束标签;
2. textarea元素必须作为body的子孙元素。
3. xmp标签(语义为标识内容用作示例,现已被标准废除了,但各大浏览器依然支持该标签)
// 模板文本 <xmp id="tpl" style="display:none;"> <img src="dummy.png" title="{{title}}"/> </xmp>// 获取模板 <script type="text/javascript"> var tplEl = document.getElementById('tpl') var tpl = tplEl.innerHTML // 通过tplEl.innerText获取也可以 tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
注意:
1. 若模板中包含</xmp>标签会造成标签结束符混乱的问题,因此通过该方式存放模板时,不能包含</xmp>结束标签;
2. xmp元素必须作为body的子孙元素。
由于模板文本中出现<script>标签的情况较少,而出现表单元素<textarea>标签的几率较大,而xmp标签已被废弃,因此还是通过script标签存放模板文本的方式较为常见。
三、template标签的新视觉
2013年定稿的template标签为我们提供一种更统一、功能更强大的模板文本存放方式。而它基本的使用方式与之前的3种方式无太大差别:
// 模板文本 <template id="tpl"> <img src="dummy.png" title="{{title}}"/> </template>// 获取模板 <script type="text/javascript"> var tplEl = document.getElementById('tpl') // 通过tplEl.innerText获取也可以 var tpl = tplEl.innerHTML tpl = tpl.replace(/^[\s\u3000]*|[\s\u3000]*$/, '') Handlebars.compile(tpl)({title: 'test'}) </script>
注意:
1. 若模板中包含</template>标签会造成标签结束符混乱的问题,因此通过该方式存放模板时,不能包含</template>结束标签;
2. script标签位置较随意,可以作为head或body的子元素。
到这里大家会觉得template标签除了作为W3C标准外,跟script标签没多大的差别。那是因为我们还没对其深入而已啦,下面我们将对其一一了解吧!
1. 不一样的childNodes
script、textarea和xmp方式存放模板文本时,通过 tplEl.childNodes.length 均返回1, tplEl.childNodes[0].nodeName 均返回#text。而template返回的是0。
2. 伪文档片段入口——content属性
通过innerHTML或innerText属性,template内部的模板文本将被视为普通文本来使用。但template元素为我们提供了另一种使用方式,那就是“文档片段”。
“文档片段”的[[Class]]为[object DocumentFragment],“文档片段”具有文档片段的所有功能API,不同的是设置img元素的src属性不会发出资源请求、不执行Script和CSS规则,而[object HTMLDocument]“文档”则会发送img请求并在当前browsing context(即window对象上下文)内执行Script和CSS规则。
而我们可以通过content属性获取“文档片段”。
var tplEl = document.getElementById('tpl') var x = tplEl.content var img = x.querySelector('img') console.log(img.src) // 显示空字符串 console.log(img.getAttribute('src')) // 显示dummy.png img.src = img.getAttribute('src') console.log(img.src) // 显示about:blank
当添加到当前文档中才会发起资源请求。
document.body.appendChild(img) // 发起资源请求 console.log(tplEl.innerHTML.replace(/^[\s\u3000]*|[\s\u3000]*$/,'')) // 显示空白字符串
由于appendChild方法实际上会对元素进行剪切操作,因此无法实现模板复用的效果。因此我们需要复制模板内的元素,然后再将元素副本添加到当前文档中。实现手段有很多种,大家可以自行了解一下。
那么怎样将整个template提供的DocumentFragment导出到当前document呢?答案就是采用IE9+才有的document.importNode方法了。
var tplEl = document.getElementById('tpl') var x = tplEl.content var clone = document.importNode(x, true) document.body.appendChild(x)
四、总结
本篇为拜读张鑫旭《HTML5 <template>标签元素简介》后的笔记+个人经验总结,就写到这里吧!
尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/4175711.html ^_^肥子John
五、参考
http://www.zhangxinxu.com/wordpress/2014/07/hello-html5-template-tag/
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template
如果您觉得本文的内容有趣就扫一下吧!捐赠互勉!
关注 - 85
粉丝 - 707
» 下一篇:JS魔法堂:元素克隆、剪切技术研究
http://pic.cnblogs.com/face/274849/20130911125125.png
【推荐】加入腾讯云自媒体扶持计划,免费领取域名&服务器
· 十年之后,区块链将重新定义“信任”
· 今日头条首次公布算法原理 称并非一切交给机器
· 全球第一款量产「屏下指纹」手机:全面屏时代最完美的解锁方式?
· 盘点CES上的电视黑科技: 模块化电视、激光电视、柔性屏幕
· 京东宣布成立三大事业群 打造积木型组织拥抱无界零售变革
» 更多新闻...
· 以操作系统的角度述说线程与进程
· 软件测试转型之路
· 门内门外看招聘
· 大道至简,职场上做人做事做管理
» 更多知识库文章...
公告
作品:
HTML语义化:HTML5新标签——template相关推荐
- HTML5 新标签总汇
HTML5 新标签总汇 2010-12-16 20:44 聂微东 阅读(5060) 评论(8) 编辑 收藏 HTML5新标签总汇: 有问题欢迎指出,有关于CSS3方面的知识点较多,下周一 ...
- html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?...
新特性: 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签(header,nav,footer,aside,article,section) 3. 音频.视频API(a ...
- 【Day05】Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5?
Html5 有哪些新特性?如何处理 Html5 新标签的浏览器兼容问题?如何区分 Html 和 Html5? 一.Html5 新特性 1. 拖拽释放(Drag and drop)API 2. 语义化更 ...
- HTML5新标签与特性
HTML5新标签与特性 1.兼容性问题(ie9以上的版本) [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8hkif4aQ-1647847660818)(C:\User ...
- HTML5新标签及特性
HTML5 html经过了第5次重大改版,增加了一些语义化的标签 高版本浏览器支持,ie9以下不支持, html5是向后兼容的,原来html4的 标签仍然可以用 1.新特性 新增语义化元素 新增表单相 ...
- HTML5新标签与特性(笔记)
HTML5新标签与特性 前言 新增语义化标签 新增标签属性 新增的input的type属性值 多媒体标签 embed audio video 字体图标 前言 HTML5 : HTML 标准的最新版 ...
- html5新特性 移除哪些,html5\CSS3有哪些新特性、移除了哪些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分HTML和HTML5?...
(1)HTML5现在已经不是SGML的子集,主要是关于图像,位置,存储,地理定位等功能的增加. 绘画canvas元素: 用于媒介回放的video和audio元素: 本地离线存储localStorage ...
- 下列不属于html5语义元素,HTML5 新的语义元素
HTML5 提供了新的语义元素来明确一个Web页面的不同部分: HTML5中新的语义元素 HTML5 元素 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 根据W ...
- 用HTML5新标签构建页面
HTML5新标签与传统DIV标签页面布局区别 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者 ...
最新文章
- 初级java开发学习路线_成为初级全栈Web开发人员的10分钟路线图
- mysql 5.7 marriadb_CentOS7下安装MySQL
- WebSocket连接里客户端和服务器端的Socket ID
- 如何调试PHP的Core之获取基本信息 --------风雪之隅 PHP7核心开发者
- 努力只是因为想去做想做的事
- 拷贝sys文件到另一个服务器,服务器文件拷贝到其他服务器
- SVN源码服务器搭建-详细教程(我的收藏)
- gg 修改器游戏被保护_GFX画质修改器120帧下载
- 斥资57亿美金,Facebook 入局印度 | 凌云时刻
- java虚拟机工作原理_java虚拟机原理及工作原理都是什么?java虚拟机如何运行?...
- Python周刊520期
- 使用GDAL实现坐标转换
- 20220724 三角函数系的正交性
- 【Excel绝技】之 快速数据填充
- 国内外著名黑客杂志 《转》
- ubuntu16.04编译obmc
- python如何实现电子邮件的发送
- Python优化算法02——遗传算法
- html xmlns=http://www.w3.org/1999/xhtml是啥
- Photoshop系列_02简单制作一份海报
热门文章
- 【JVM】StackOverflowError与OutOfMemoryError
- 操作系统 作业调度实验报告
- 【建站系列教程】5、谈一谈网站的静态化
- 快速多尺度人脸检测2--Multi-Scale Fully Convolutional Network for Face Detection in the Wild
- LeetCode 动态规划(Dynamic programming)系列题目--C++,Python解法
- 为什么要低温保存_渔之歌科普课堂:冷冻食品为什么要规定零下18摄氏度冷藏?...
- C++__堆,栈与内存管理
- 送你一份 Kubernetes 实用命令速查表
- 这一篇让你真正理解Mysql的四种隔离级别
- instancesRespondToSelector与respondsToSelector的区别