JavaScript设计模式：七、外观模式

序、设计模式分类
一、装饰者模式（原型链）
二、策略模式
三、代理模式
四、发布订阅模式
五、迭代器模式
六、工厂模式
七、外观模式
八、状态模式
九、单例模式
十、适配器模式

参考：https://blog.csdn.net/weixin_37064409/article/details/79073629

一、概述

为一组复杂的子系统接口提供一个更高级的同意接口，通过这个接口是的对子系统接口的访问更容易， 对底层结构兼容型做同意封装来简化用户使用。

1. 点击事件兼容例子

• 点击事件的兼容性封装
• 浏览器对点击事件存在兼容性问题，对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;
    }
}