设计模式

1.外观模式
外观模式是指 对 多个同一操作的 方法/函数  进行封装 成一个函数统一去调用
它可以简化底层接口的复杂性 比较典型的例子就是处理 兼容性的问题
例如 在IE的内核 Chrome的Chromium内核 FF的Firefox内核  其监听事件的接口并不一样
IE使用attachEvent属性去监听事件 而Chrome等浏览器是通过addEventListener 属性去监听事件
因此 当我们要去对DOM节点去进行事件监听时 为避免进行多余的操作 可以封装一个函数而达到解决兼容性的问题
<!--例-1-->
/**
    dom  被监听的节点
    type 监听的事件类型 click 等
    fn   回调方法
*/

const addEvent = (dom, type, fn) =>{
    if(dom.addEventListener){
        //支持addEventListener的浏览器
        dom.addEventListener(type,fn,false)

    }else if(dom.attachEvent){
        //支持attachEvent的 浏览器
        dom.attachEvent('on' + type, fn);

    }else {
        dom['on'+type] = fn;

    }
}

<!--例-2-->
<!--解决阻值浏览器默认行为的兼容性-->

const preventDefault = (event) =>{
    var event = event || window.event;
    if(event.preventDefault){
        event.preventDefault()
    }else{
        //一般指IE浏览器
        event.returnValue = false;
    }
}

外观模式 是对接口方法的外层包装,方便外部调用,降低了底层代码的使用复杂性.
大部分时候外观模式不需要对接口的具体实现,只需要按照接口使用规则使用即可这也是系统与客户(使用者)的松散耦合,使得系统与客户之间不会因为结构的变化而相互影响


design     

本博客所有文章除特别声明外,均采用 CC BY-SA 3.0协议 。转载请注明出处!