深入理解JavaScript系列（30）：设计模式之外观模式详解

外观模式概述

介绍

外观模式（Facade）的核心作用是为子系统中的一组接口提供一个统一且一致的界面。该模式定义了一个高层接口，使得整个子系统的使用变得更加简便。

正文

外观模式不仅简化了类中接口的使用方式，还实现了接口与调用者之间的解耦。在开发实践中，外观模式被视为开发者必备技能之一，它能够将复杂的内部操作进行封装，并对外暴露一个简单直观的调用接口。

在JavaScript类库的开发中，外观模式应用广泛，常用于封装接口以兼容多种浏览器。通过外观模式，开发者可以间接调用子系统，从而避免因直接访问底层子系统而引发的潜在错误。

外观模式的优点在于使用简单且本身轻量级。然而，其缺点也不容忽视：当开发者连续频繁调用时，可能会产生一定的性能问题，因为每次调用都需要检测功能的可用性。

外观模式代码示例

接下来通过一段未优化的代码示例，展示如何利用外观模式，通过检测浏览器特性来创建跨浏览器的统一使用方法。

var addMyEvent = function (el, ev, fn) {
if (el.addEventListener) {
el.addEventListener(ev, fn, false);
} else if (el.attachEvent) {
el.attachEvent('on' + ev, fn);
} else {
el['on' + ev] = fn;
    }
}; 

再来一个简单的例子，其核心逻辑是用一个接口封装其他多个接口：

var mobileEvent = {
    // ...
stop: function (e) {
e.preventDefault();
e.stopPropagation();
    }
    // ...
};

总结

外观模式的应用场景

那么何时使用外观模式呢？一般来说可以分为以下三个阶段：

首先，在设计初期，应有意识地将不同的两个层进行分离。例如在经典的三层架构中，应在数据访问层与业务逻辑层、以及业务逻辑层与表示层之间建立外观（Facade）。

其次，在开发阶段，子系统往往因不断的重构演化而变得日益复杂。此时增加外观（Facade）可以提供一个简单的接口，从而减少各子系统之间的依赖关系。

第三，在维护一个遗留的大型系统时，该系统可能已难以维护。此时使用外观（Facade）非常合适，通过为系统开发一个外观类，为设计粗糙且高度复杂的遗留代码提供清晰的接口。新系统只需与Facade对象交互，而Facade负责处理与遗留代码的所有复杂工作。

参考：大话设计模式