JavaScript设计模式——外观模式

外观模式

接下来，开始学习结构性设计模式

为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更加容易。

小试牛刀

还是通过一个最简单的例子来呈现外观模式：

function a(paramA) {
    // do anything
}

function b(paramB) {
    // do anything
}

function ab(paramA, paramB) {
    a(paramA);
    b(paramB);
}

通过上面的例子可以直观的感受到，外观模式的作用：
1、简化复杂接口；
2、解耦合，屏蔽使用者对子系统的直接访问。

兼容并蓄

通过外观模式来简化复杂需求，统一功能接口方法，即提供一个更简单的高级接口，简化我们对复杂的底层接口不同意的使用需求。

兼容浏览器事件绑定

const addEvent = function(dom, type, fn) {
    // 支持 addEventListener 方法的浏览器
    if(dom.addEventListener) {
        dom.addEventListener(type, fn, false)
        
        // 不支持 addEventListener 方法，但支持 attachEvent 的浏览器
    } else if (dom.attachEvent) {
        dom.attachEvent(`on${type}`, fn)
        // 两者都不支持的浏览器
    } else {
        dom[`on${type}`] = fn  
    }
}

使用外观模式通过检测浏览器特性的方式来创建一个跨浏览器的使用方法。

兼容浏览器阻止冒泡、默认事件

let N = window.N || {};
N.tools = {
    stopPropagation(e) {
        if (e.stopPropagation) {
            e.stopPropagation();
        } else {
            e.cancelBubble = true;
        }
    },
    // 阻止默认事件
    preventDefault(e) {
       // 标准浏览器
        if (e.preventDefault) {
            e.preventDefault();
        } else {  // IE 浏览器
            e.returnValue = false;
        }
    },
    stopEvent (e) {
        this.stopPropagation(e);
        this.preventDefault(e);
    }
};

总结

当一个复杂的系统提供一系列复杂的接口方法时，为系统的管理方便会造成接口方法的使用极其复杂。这在团队的多人开发中，撰写成本是很大的。
外观模式是对接口方法的外层包装，以供上层代码调用。因此，有时外观模式封装的接口方法不需要接口的具体实现，只需要按照接口使用规则使用即可。

结束语

焦虑。