版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/weixin_37064409/article/details/79073629
外观模式 :
- 为一组复杂的子系统接口提供一个更高级的同意接口,通过这个接口是的对子系统接口的访问更容易,
- 对底层结构兼容型做同意封装来简化用户使用
Example
点击事件的兼容性封装
浏览器对点击事件存在兼容性问题,对DOM绑定onclick事件为DOM0级事件,相当与为元素绑定了一个事件方法,重复定义会覆盖。
<div id="dom"></div>
var oDom = document.getElementById("dom");
//DOM0 级事件绑定方法会将方法覆盖
oDom.onclick = function(){
console.log("111111");
}
oDom.onclick = function(){
console.log("222222");
}
//结果只会输出222222
- 所以应该使用DOM2级事件绑定方法addEventListener(),然而低于IE9是不支持addEventListener(),所以需要使用attachEvent()
// DOM2级 可以反复为元素绑定事件,不会覆盖
// addEventListener 兼容 firefox chrome IE9+
// attachEvent 兼容 IE9-
oDom.addEventListener("click",function(params) {
console.log("addEventListener__111111");
})
oDom.addEventListener("click",function(params) {
console.log("addEventListener__222222");
})
//每次点击,两个绑定事件都会触发,不会覆盖
- 如果有些不支持DOM2级事件处理程序的浏览器只能使用 onclick方法绑定事件。
兼容性统一封装 外观模式实现
//外观模式
function addEvent(dom,type,fn){
//对于支持DOM2级事件处理程序addEventListener方法的浏览器
if(dom.addEventListener){
dom.addEventListener(type,fn,false); //false 阻止事件冒泡
//对于不支持addEventListener方法但支持attachEvent方法的浏览器
}else if(dom.attachEvent){
dom.addEvent("on"+type,fn);
//对于不支持addEventListener和attachEvent但支持on+type的浏览器
}else{
dom["on"+type] = fn;
}
}
- 调用
addEvent(oDom,”click”,function(){
console.log(“addEvent()”);
});