结构型设计模式之外观模式

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情

结构型模式所描述的是如何将类和对象结合在一起来形成一个更大的结构，它描述两种不同的事物：类和对象，根据这一点，可分为类结构型和对象结构型模式。

楔子

日常业务开发过程中，我们会经常碰到这样一个场景：给页面添加一个监听事件，监听用户的行为。今天我们就围绕这样的场景来展开外观模式的讨论。

我们接到了一个需求，用户在个人信息编辑页面除了通过点击表单的保存按钮提交用户信息之后，通过Ctrl+S快捷键也可以进行信息的快速提交。

事件添加

收到这个需求之后，我们脑海中立马浮现的解决方案就是通过addEventListener来进行键盘事件的监听。没错，对于大多数浏览器来说，这个方案就可以完美的实现这个需求了。但是，我们这里想要更全面的实现这个需求，所以要考虑一下兼容性问题。

addEventListener是DOM2级应用事件，只支持IE9及以上版本，IE8或者更低的版本是不支持。

对于IE8及以下版本来说，我们可以通过attachEvent事件来绑定监听事件，对于addEventListener和attachEvent都不支持的浏览器来说，可以通过target + keyup事件来监听了。

if (window.addEventListener) {
    window.addEventListener('keyup', function(event) {
        ...
    });
} else if (window.attachEvent) {
    window.attachEvent('onkeyup', function(event) {
        ...
    });
} else {
    document.onkeyup = function(event) {
        ...
    }
}

提炼抽取

虽然上面的代码成功的解决掉了兼容性问题，但是，也引入了一个新的问题：使用起来繁琐。对于绑定事件来说，虽说使用不是特别高频，但是肯定是多处使用。如果多处使用的代码就很繁琐，就需要我们对代码封装提取。这种封装方式其实就是我们要聊的外观模式，我们通过提供一个统一的接口方法，内部对复杂的兼容性问题进行统一的处理。

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

下面我们就使用外观模式对上述代码进行封装：

    function addEvent(dom, type, callback) {
        if (window.addEventListener) {
            window.addEventListener(type, callback, false);
        } else if (window.attachEvent) {
            window.attachEvent('on' + type, callback);
        } else {
            dom['on'+ type] = callback;
        }
    }

这样封装之后，我们就可以轻松的使用事件绑定了。

总结

当我们碰到一系列的可复用的复杂操作的时候，为了上层更加容易的使用而简化使用成本，我们就可以通过外观模式对业务进行二次封装，将复杂的操作放到底层。

好了有关外观模式的话题我们就聊到这里了，欢迎大家在下方留言交流。