微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

自定义标签在IE6-8的困境

2015-07-30 20:00 前端大全

(点击上方,可快速关注)


作者:司徒正美

网址:http://www.cnblogs.com/rubylouvre/p/4659431.html

点击“阅读原文”可查看本文网页版


或许未来前端组件化之路都是自定义标签,但这东西早在20年前,JSTL已在搞了。现在Web Component还只有webkit支持。但一个组件库,还需要一个特殊的标识它们是一块的。不过这个XML已经帮我们搞定了,使用scopeName,如”<xxx:dialog>”。在我继续往下想如何处理如何为这个标签绑定数据,与其他组件通信,管理生命周期,等等大事之前,我还有一个不得不面对的问题,就是如何兼容IE6-8!


比如以下一个页面:



在chrome, firefox, IE11, IE11的IE6兼容模式分别如下:



我们会发现IE6下实际是多出许多标签,它是把闭标签也变成一个独立的元素节点



这个AA:DIV标签被开膛破肚,里面子节点全部暴出来,成为其兄弟节点了。因此想兼容它,就要费点劲。有个两个情况需要考虑,1是用户已经将它写在页面上,情况同上;2是用户是将它放在字符串模版中,这个用正则搞定。不过正则要是碰上复杂的属性名,还是会晕掉。因此我还是打算使用原生的HTML parser。换言之,字符串,我还是会将它变成节点。这么办呢?!我想了许多办法,后来还是使用VML的命名空间法搞定!


我们将上面的页面改复杂点,再看看效果!



可以看到其套嵌关系现在完全正确,并且标签名不会大写化,也不会生成多余节点!


好了,我们再判定一下是否为自定义标签,或者准确地说,这个节点是否我们组件库中定义的自定义标签。某些情况下,一个页面可以存在多套组件库,包括avalon的,ploymer的,或者是直接用Web Component写的。


avalon的组件库将使用命名空间,这样就好区别开。在IE6-9中,判定element.scopeName是否为aa(这是组件库的命名空间,你可以改个更高大上的名字),在其他浏览器判定此元素的localName是否以aa:开头就行了!


function isWidget(el, uiName){

return el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+":") === 0

}


这个难题解决后,我们就可以开搞基于自定义标签的UI库了!



前端大全

微信号:FrontDev

打造东半球最好的 前端技术 微信号

--------------------------------------

商务合作QQ:2302462408

招聘和猎头服务QQ:2302462408

投稿网址:top.jobbole.com

 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 微信自研生产级paxos类库PhxPaxos实现原理介绍 干货:教你真正学会写邮件,让你的邮件每封必回 最方便的查看ASCII表的方法 OpenStack集群支持多虚拟化技术的实现方法 我们是如何一步一步谈到机器人的