外观模式

外观模式：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统的访问更加容易。在JavaScript中又是也会对底层结构兼容性做统一封装来简化使用。

需求1：点击页面文档隐藏提示框

document.onclick = funcion(e){
   e.preventDefault()
   if(e.target !=== document.getElementById('myinput')){
       hidePageAlert()
   }
}
function hidePageAlert(){
//隐藏提示框
}

问题1：使用DOM2级事件处理程序提供的方法AddEventListener，
但是IE9以下不支持，所以要用attachEvent，
若不支持DOM2级事件，则只能用onclick事件方法绑定事件
优化1：统一功能接口方法不统一，可以通过外观模式提供一个简单高级的接口，简化对负责的底层接口不同意的使用需求

//外观模式实现
function AddEvent(dom,type,fn){
    //对于支持DOM2级事件处理程序使用addEventListener方法的浏览器
    if(dom.addEventListener){
        dom.addEventListener(type,fn,false)
    }else if(dom.attachEvent){//不支持addEventListener的浏览器
        dom.attachEvent('on'+type,fn)
    }else{//不支持DOM2级事件（addEventListener和attachEvent）
        dom['on'+type] = fn
    }
}

外观模式处理适用于简化底层接口的复杂性，还可以用于浏览器兼容性问题

//获取事件对象
const getEvent = funcion(event){
    //标准浏览器返回event，IE下window.event
    return event||window.event
}
//获取元素
const getTarget = funcion(event){
    const event = getEvent(event)
    //标准浏览器下event.target,IE下event.srcElement
    return event.target||event.srcElement
}
//阻止默认行为
const preventDefault = funcion(event){
    const event = getEvent(event)
    // 标准浏览器
    if(event.preventDefault){
        event.preventDefault()
    }else{// IE浏览器
        event.returnValue = false
    }
}

代码库通过外观模式来分钟多个功能，简化底层操作方法

//简约版属性样式方法库
const A = {
    //通过IE获取元素
    g(id){return document.getElementById(id)},
    // 设置元素css属性
    css(id,key,value){
        document.getElementById(id).style[key] = value
    },
    // 设置元素属性
    attr(id,key,value){
        document.getElementById(id)[key] = value
    },
    html(id,html){
        document.getElementById(id).innerHTML = html
    },
    //为元素绑定事件
    on(id,type,fn){
        document.getElementById(id)['on'+type] = fn
    }

}
A.g('id')

当一个负复杂系统提供一系列复杂的接口方法时，为系统的管理方便会造成接口方法的使用极其复杂，
通过外观模式，对接口的二次封装隐藏其复杂性，简化使用。
但是这种设计增加了一些资源开销以及程序的复杂度。

外观模式是对接口方法的外层包装，以供上层代码调用。
因此有时外观模式封装接口方法不需要接口的具体实现，只需按照接口的使用规则使用即可。
这也是对系统与客户（使用者）之间的一种松散耦合。
使系统与客户之间不会因结构的变化而相互影响。