图片 9

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

自定义标签在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的首先个参数是该零器件的名字(须求独一,所以自个儿照旧据守命名空间的法门写的卡塔尔国,第4个参数是那些组件所依赖的机件,第三个参数是回调函数,也正是当信任的组件下载实现今后,回调实践,而tp.modules.add就足以将以此模块加载到全部库中,那样的话能力接受tp.use调用。

     
这种措施本身在tangram中尚无看出,作者是看了天猫商城的KISSY之后求学到的,也正是所谓的英特尔(异步模块定义卡塔 尔(阿拉伯语:قطر‎。

     
近期英特尔的得以达成形式是因而setInterval,可是将要被重构图片 10

     
作者前边写了黄金年代篇日记来贯彻速龙,当然,功效低下,反正大家看看就行了

     
然后就是事件了,事件是二个相比较恼火的政工,东西超多,作者把它投身了tp.event这几个空间中。

     
首先是拉长和移除事件监听器,由于IE和非IE选择的章程不一致等,IE采纳attachEvent和detechEvent,非IE选用add伊夫ntListener和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,所以照旧需求写:

发表评论

电子邮件地址不会被公开。 必填项已用*标注