自定义标签在IE6-8的困境mgm娱乐场

发表于由

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

2015/07/20 · HTML5 ·
IE,
自定义标签

原文出处：
司徒正美   

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

比如以下一个页面：

mgm娱乐场 1

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

mgm娱乐场 2
mgm娱乐场 3
mgm娱乐场 4
mgm娱乐场 5

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

mgm娱乐场 6

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

我们将上面的页面改复杂点，再看看效果！

mgm娱乐场 7
mgm娱乐场 8

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

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

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

JavaScript

function isWidget(el, uiName){ return el.scopeName ? el.scopeName ===
uiName: el.localName.indexOf(uiName+”:”) === 0 }

1
2
3
function isWidget(el, uiName){
  return   el.scopeName ? el.scopeName === uiName: el.localName.indexOf(uiName+":") === 0
}

mgm娱乐场，这个难题解决后，我们就可以开搞基于自定义标签的UI库了！

1 赞 1 收藏
评论

mgm娱乐场 9

     
 还记得我大二的时候开始接触JS，那个时候从图书馆借了N多的书籍，然后边看边用editplus写，然后遇到问题，各种DEBUG，在做项目的时候，各种兼容性问题，真是痛苦啊。由于项目需要尽快写完，所以就开始接触了jquery，还是从图书馆抱了几本书，然后下载了jquery源码，然后边看书籍边写代码，看了几章之后，觉得貌似不难，然后就从网上下载了jquery的文档，对照着文档，对其调用搞得算是比较清楚了。

       
现在看来，我觉得学习jquery反而使我走了弯路，用jquery是比较方便，也不用考虑兼容性问题了，而且调用非常简单优雅，但是，反而我对原生js感觉越来越陌生了，也导致了后面感觉完全离不开jquery了，想去写一个XXX组件，想了一下，思路有了，然后写的时候遇到各种问题，然后就又回到jquery了。

       
 从去年暑假的时候，我决定离开jquery了，jquery是一把双刃剑，开发的时候是方便，但是，作为一个初学者，我觉得这是很不利的。

       
 然后就开始下载JS的电子书，可能是自己比较浮躁吧，看书真心看不进去，我还是喜欢边看边写代码这种。写了一段时间，渐渐的觉得最开始的感觉慢慢回来了，当然，也遇到了N多的问题。

       
到寒假的时候，决定自己的毕设不使用现在成熟的JS库，反而自己来写一个不完善的库，这样学习的更多，当然，也比较费时间。

       
开始写的感觉真是痛苦啊，什么都不懂，所以就去看了看tangram的源码，为什么看tangram呢，其实原因比较搞笑，当时校招的时候我面试百度前端，被刷掉了，当时面试官让我看看它们百度使用的JS库tangram，我就想看看它们那个库到底有什么了不起的。。。

       
写这个库，首先使用了命名空间，我比较喜欢toper，所以我首先定义了一个变量：

var tp = tp || {};

       
这种方式也是借鉴了tangram的写法，采用对象字面量的形式。这样所有toper定义的方法都放在了tp这个私有空间内了，比如对DOM的操作就放在tp.dom中。

     
 由于这个库完全是为毕设做的，所以这里面的很多文件都是为实现毕设的某些功能而写的。

     
我采用的结构是core+组件的方式，tp.core.js（压缩后为tp.core-min.js），而其他的组件每个组件一个文件，而组件之间可能存在依赖关系，这种依赖关系就通过AMD解决。

     
在没有写这个库之前，即使是我使用jquery，每一个JS文件我都是直接在HTML文件中使用script标签写进去的，而现在需要采用这种异步模块加载的方式，如果要使用非核心模块，那么需要：

tp.use(["tp.a","tp.b"],function(a,b) {

})

     
使用use方式，它会自动去下载tp.a.js和tp.b.js，下载完成之后，执行回调函数。

      同样，在tp.a.js中，也不能使用普通的JS的写法了，而要使用:

 

define("tp.a",["tp.c","tp.d"],function(c,d) {
   tp.modules.add("tp.a",function() {

    });
});

   
 define的第一个参数是该组件的名字（需要唯一，所以我还是按照命名空间的方式写的），第二个参数是这个组件所依赖的组件，第三个参数是回调函数，也就是当依赖的组件下载完成之后，回调执行，而tp.modules.add就可以将这个模块加载到整个库中，这样的话才能使用tp.use调用。

     
这种方式我在tangram中没有看到，我是看了淘宝的KISSY之后学习到的，也就是所谓的AMD（异步模块定义）。

     
暂时AMD的实现方式是通过setInterval，但是即将被重构mgm娱乐场 10。

     
我之前写了一篇日志来实现AMD，当然，效率低下，反正大家看看就行了http://my.oschina.net/mingtingling/blog/113815

     
然后就是事件了，事件是一个比较恼火的事情，东西比较多，我把它放在了tp.event这个空间中。

     
首先是添加和移除事件监听器，由于IE和非IE采用的方式不一样，IE采用attachEvent和detechEvent，非IE采用addEventListener和removeEventListener,而且IE只支持冒泡（从当前元素冒泡到根元素），而非IE支持冒泡和捕获（从根元素捕获到当前元素）。最开始我是这样做的：

tp.event.on = function(element,event,fn) {
        if (window.attachEvent) {
            //IE
            //第三个参数_realFn是为了修正this
            var realFn = function(e{fn.call(element,e);};
            _realEventCallbackFns[fn] = realFn;
            element.attachEvent("on" + event,realFn);
        } else if (window.addEventListener) {
            element.addEventListener(event, fn,false);
        } else {
            element["on" + event] = fn;
        }
};

   
 也就是在一个函数内部去判定是否是IE，然后相应的执行相应的函数，但是这样，如果添加的事件监听器很多，每次都if什么的，我个人感觉很不好，所以我后面添加了一个辅助函数：

var _listeners = {},
        _addEventListener,
        _removeEventListener;
    if (window.attachEvent) {

        var _realEventCallbackFns = {};
        _addEventListener = function(element,event,fn) {
            //第三个参数_realFn是为了修正this
            var realFn = function(e) {fn.call(element,e);};
            _realEventCallbackFns[fn] = realFn;
            element.attachEvent("on" + event,realFn);
        };
        _removeEventListener = function(element,event,fn) {
            element.detachEvent("on" + event,_realEventCallbackFns[fn]);
        };
    } else if (window.addEventListener) {
        _addEventListener = function(element,event,fn,capture) {
            element.addEventListener(event, fn,capture);
        };
        _removeEventListener = function (element,event,fn,capture) {
            element.removeEventListener(event,fn,capture);
        };
    } else {
        _addEventListener = function(element,event,fn) {
            element["on" + event] = fn;
        };
        _removeEventListener = function(element,event) {
            delete element["on" + event];
        };
    }

         
 这样，整个判定只需要执行一次，后面调用的时候只需要使用_addEventListener即可，当然，由于采用了闭包，tp.event命名空间之外是不可访问这几个函数的。

           那这样，tp.event.on就变得非常简单了：

tp.event.on = function(element,event,fn) {
        _addEventListener(element,event,fn,false);
         };

         
而且这样还有一个好处，之前的方式只能采用冒泡方式，但现在，可以使用捕获，当然，只能非IE才能使用，这样在后面使用事件代理一些非冒泡的事件的时候非常有用，比如blur和focus事件。

         
 除了事件监听器，还需要事件事件的添加，删除等，也就是add,fire,remove等，这里就不说了。

         
在使用事件代理的时候，我们经常要获取到事件的目标元素，而IE和非IE又是不一样的，所以需要单独写一个函数：

tp.event.getTarget = function(event) {
        return event.target || event.srcElement;
    };

         
常用的功能当然还是阻止事件冒泡以及阻止默认事件的发生，很遗憾，IE和非IE处理方式还是不一样的，比如阻止冒泡IE采用的是cancelBubble，而其他浏览器采用的是stopPropagation，所以还是需要写：

相关文章