外观模式 - 简书

外观模式

为一组复杂的子接口提供一个更高级的统一接口. 以便更方便的去实现子接口的功能.

外观模式的使用场景

为复杂的模块或子系统提供外界访问的模块.
子系统相对独立.
预防低水平人员带来的风险

为什么使用外观模式?

减少系统相互依赖
提高灵活性
提高了安全性

JavaScript最常见的外观模式就是对各种API的统一兼容处理

-场景一为dom元素绑定事件
以添加DOM元素为例,我们是不直接推荐使用on+事件的复制形式绑定事件的, 因为这是DOM0级事件, 下次再添加事件就直接覆盖了上一次的, 所以我们推荐使用DOM2级事件,addEventlistener, 而IE是不兼容的,需要使用addachEvent, 从而添加一个click事件的写法如下

function click(){
    // code...
}
if( document.addEventListener ){
    oDiv.addEventListener("click" , click, false);
}else if(document.attachEvent){
    oDiv.attachEvent("onclick" , click);
}else{
    oDiv.onclick = click;
}
// 这张写法很麻烦,极大得提高了开发成本 所以我们可以简单封装一下

function addEvent(dom , eName , fn){
    if( document.addEventListener ){
        dom.addaddEventListener(eName,fn,false);
    }else if( document.attachEvent ){
        dom.attachEvent("on"+eName,fn);
    }else{
        dom["on"+eName] = fn;
    }
}
// 上面的
// 使用
addEvent(div,"click",ev =>  {
    console.log(ev)
})

上面的addEvent函数就是一个很简答的外观模式,我们通过在内部处理了各种兼容,给外部提供了一个更高级更统一的接口,方便我们调用.

我们每次使用addEvent这个方法绑定都会重新一遍判断条件,这样显然是不太合理的,因为当第一次判断当前浏览器是支持这个方法时,完全没必要重复判断一次,所以我们可以稍微优化一下

let Fn = (function () {
    // 保存最终返回的函数
    let result = null;
    if (document.addEventListener) {
        result = function(ele,ename,action){
            ele.addEventListener(ename, action, false);
        }
    } else if (document.attachEvent) {
        result = function(ele,ename,action){
            ele.addEventListener("on" + ename, action);
        }
    } else {
        result = function(ele,ename,action){
            ele["on"+ename] =action
        }
    }
    // 返回一个addEvent接口用来绑定事件
    return {
        addEvent:result
    }
})()

上面代码我们利用自执行函数形成闭包,用result变量保存返回的函数,并在内部进行判断并给result赋值对应的函数, 然后我们通过给外部暴露一个addEvent接口来方便调用.此时由于Fn函数只执行了一次,并将对应的结果给保存了下来,相当于我们进行了一步初始化的操作,后面当我们反复调用Fn暴露的接口addEvent就不会像之前一样重复判断了,提高了代码的合理性.

场景二:
js中兼容部分的的代码比较多,所以我们可以利用外观模式,将众多兼容操作综合起来, 这样就通过外观模式封装了一个小型的库

// @params selector => css选择器 
let $ = function(selector){
     // 获取dom元素
     let ele = document.querySelector(selector);
     return {
         //绑定事件 ename=>事件名 callback => 对应的执行函数
         on: function(ename,callback=ev=>{}){
             if (document.addEventListener) {
                 ele.addEventListener(ename, callback, false);
             } else if (document.attachEvent) {
                 ele.attachEvent("on" + eName, fn);
             } else {
                 ele["on" + eName] = fn;
             }
         },
         //返回dom元素的对应的css属性值 attr=> 属性名
         getStyle:function(attr){
              if (window.getComputedStyle) {
                 return getComputedStyle(ele)[attr];
             } else {
                 return ele.currentStyle[attr];
             }
         }
     }
 }

总结: 对外提供统一的接口,内部实现各种不同的差异处理,或是将各类子操作综合在一起,对外提供统一的接口这就是外观模式

最后编辑于：2020.11.18 13:40:32