Js设计模式之结构型设计模式(六)、外观模式
goJhou 发布于2018-03 浏览:2322 回复:7
0
收藏

为一组接口提供一个一个的界面,或更高级的接口

或者说 将多个接口封装成一个接口,多用于兼容

这种设计模式在我们的代码中极其常见。现在终于知道它的术语名字了

 很简单,直接上代码,扫一遍就知道干嘛用的了~

收藏
点赞
0
个赞
共7条回复 最后由用户已被禁言回复于2022-04
#8goJhou回复于2019-03
#7 zt_926回复
想问下大神, el.addEventListener(ev, fn, false)如果option 为once,又该如何修改呢 比如在https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener 里有 outer .addEventListener('click', onceHandler, once); outer .addEventListener('click', noneOnceHandler, noneOnce); middle.addEventListener('click', captureHandler, capture); middle.addEventListener('click', noneCaptureHandler, noneCapture); inner1.addEventListener('click', passiveHandler, passive); inner2.addEventListener('click', nonePassiveHandler, nonePassive); 你看这样如何, var addMyEvent = function (option) { let el=option.el,      ev=option.ev,      options=option.options; if (el.addEventListener) { el.addEventListener(ev,fn,!options?false:options) } else if (el.attachEvent) { el.attachEvent("on" + ev,fn) } else { el["on" + ev] = fn; } }; let option={ el:dom, ev:event, options:? } addMyEvent(option);  
展开

你这改法相当好呀,可以按这种改法完善其他浏览器内核的兼容问题~

0
#7zt_926回复于2019-03

想问下大神, el.addEventListener(ev, fn, false)如果option 为once,又该如何修改呢

比如在https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener 里有

outer .addEventListener('click', onceHandler, once);
outer .addEventListener('click', noneOnceHandler, noneOnce);
middle.addEventListener('click', captureHandler, capture);
middle.addEventListener('click', noneCaptureHandler, noneCapture);
inner1.addEventListener('click', passiveHandler, passive);
inner2.addEventListener('click', nonePassiveHandler, nonePassive);

你看这样如何,

var addMyEvent = function (option) {

let el=option.el,

     ev=option.ev,

     options=option.options;

if (el.addEventListener) {
el.addEventListener(ev,fn,!options?false:options)
} else if (el.attachEvent) {
el.attachEvent("on" + ev,fn)
} else {
el["on" + ev] = fn;
}
};

let option={

el:dom,

ev:event,

options:?

}

addMyEvent(option);

 

0
#6zt_926回复于2018-10

感谢大神回答

0
#5goJhou回复于2018-08
#4 zt_926回复
go神,我能问个问题,我看js里addEventListener的语法里面没有 if (el.addEventListener) {的方法,地址在https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener,希望您能帮我解答下, 而且直接使用您的的代码会抛异常的,调用方法如下 addMyEvent(document.getElementById("xx"),"click",function(){ alert(2); })
展开

如果你看的是mozilla的话 那就要对应火狐了

浏览器内核不同 函数就会有微妙区别

我这么多个if就是为了判断内核 来确定具体用哪一种注册事件的函数

这是一种针对浏览器内核的兼容性写法

1
#4zt_926回复于2018-08

go神,我能问个问题,我看js里addEventListener的语法里面没有 if (el.addEventListener) {的方法,地址在https://developer.mozilla.org/zh-CN/docs/Web/API/EventTarget/addEventListener,希望您能帮我解答下,

而且直接使用您的的代码会抛异常的,调用方法如下

addMyEvent(document.getElementById("xx"),"click",function(){
alert(2);
})

0
#3goJhou回复于2018-07
#2 choleraa回复
设计模式还有叫这个的...

世界之大,无奇不有哇

0
#2choleraa回复于2018-07

设计模式还有叫这个的...

0
TOP
切换版块