来自 前端知识 2019-09-15 12:08 的文章
当前位置: 金沙澳门官网网址 > 前端知识 > 正文

自定义标签在IE6,最近学习JS的感悟

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

2015/07/20 · HTML5 · IE澳门金莎娱乐手机版 ,, 自定义标签

原来的文章出处: 司徒正美   

想必未来前端组件化之路都以自定义标签,但那东西早在20年前,JSTL已在搞了。今后Web Component还唯有webkit援助。但贰个组件库,还索要三个特殊的标志它们是一块的。不过那几个XML已经帮大家解决了,使用scopeName,如”<xxx:dialog>”。在自家继续往下想如何管理怎么样为这么些标签绑定数据,与另外零件通讯,处理生命周期,等等大事此前,笔者还会有一个不得不面前境遇的难题,就是何等包容IE6-8!

比方说以下多少个页面:

澳门金莎娱乐手机版 1

在chrome, firefox, IE11, IE11的IE6包容形式分别如下:

澳门金莎娱乐手机版 2
澳门金莎娱乐手机版 3
澳门金莎娱乐手机版 4
澳门金莎娱乐手机版 5

大家会开采IE6下实际是多出不知凡几标签,它是把闭标签也成为一个单身的要早秋点

澳门金莎娱乐手机版 6

其一AA:DIV标签被开膛破肚,里面子节点全部暴出来,成为其兄弟节点了。由此想包容它,将要费点劲。有个五个状态供给思虑,1是客户已经将它写在页面上,景况同上;2是客商是将它坐落字符串模版中,那一个用正则消除。可是正则若是冲击复杂的属性名,依旧会晕掉。由此笔者恐怕筹划选用原生的HTML parser。换言之,字符串,小编依旧会将它形成节点。这么办吧?!小编想了重重方法,后来或许利用VML的命名空间法消除!

大家将地点的页面改复杂点,再看看效果!

澳门金莎娱乐手机版 7
澳门金莎娱乐手机版 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
}

其一难题化解后,大家就可以开搞基于自定义标签的UI库了!

1 赞 1 收藏 评论

澳门金莎娱乐手机版 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),而别的的机件每一个组件三个文本,而组件之间只怕存在依赖关系,这种借助关系就由此英特尔解决。

      在未曾写这一个库从前,即便是自己使用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中没有看出,作者是看了Taobao的KISSY之后攻读到的,约等于所谓的英特尔(异步模块定义)。

      一时速龙的兑现格局是透过setInterval,不过将在被重构澳门金莎娱乐手机版 10

      作者在此之前写了一篇日记来落实AMD,当然,功能低下,反正我们看看就行了

      然后就是事件了,事件是多少个比较恼火的业务,东西相当多,笔者把它放在了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];
        };
    }

           那样,整个判别只供给奉行三次,后边调用的时候只须求使用_add伊芙ntListener即可,当然,由于选拔了闭包,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,所以如故须求写:

本文由金沙澳门官网网址发布于前端知识,转载请注明出处:自定义标签在IE6,最近学习JS的感悟

关键词: