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

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

我们常用外观模式来解决浏览器在JavaScript方面的兼容性问题。

比如说，我们要为页面上有一个ID为myInput的输入框，然后我们为页面文档document对象绑定一个点击事件click来实现隐藏提示框的交互功能，于是写下下面的代码。

上面的代码虽然能实现需求，但是却存在一些问题。

首先第一个问题就是 事件存在被覆盖的风险 ，onclick是DOM0级事件，也就是说相当于是给一个元素绑定了一个事件。如果后面再为document绑定click事件，后绑定的事件就会覆盖掉前面的事件。

DOM0级事件：如果给同一个元素的同一个事件行为绑定两个方法，则后绑定的会覆盖先绑定的方法。

这个问题我们可以通过使用DOM2级事件处理程序提供的API addEventListener 来解决。

DOM2级事件绑定：可以给同一个元素的同一个事件行为绑定多个方法；谁先绑定谁先执行；

其次就是 兼容性的问题，代码种使用了 e.preventDefault 和 e.target 这两个在低版本IE中并不兼容的方法和属性。

因此，存不存在一个可以兼容所有浏览器的方式来解决上面这些问题呢？ 没有，但是我们可以通过外观模式来自己写一个。

外观模式的精髓在于对底层方法的封装，将不同环境下相同功能的方法封装成一个统一的接口，就像我们平时在食堂吃的套餐，我们无需再纠结主食吃什么，菜吃什么，饮料喝什么，因为套餐里面已经都搭配好了，等于本来要做3次选择的现在只需要做1次选择了。

兼容方式

除了事件处理程序，还有我们说到的 e.preventDefault 和 e.target 也可以使用外观模式来解决它们的兼容性问题。

封装小型代码库

前面我们说了，外观模式的精髓在于封装，所以有时候我们可以用这个模式来封装一些属于我们自己的代码库，来适应自己的开发习惯。

比如说有些API的名称实在太长了，像 getElementById 这种，我们就可以对其进行封装。

在JS中，给页面添加事件并不是简单的添加就可以了，是要考虑很多因素的，我们可以通过外观模式来简化这种操作。

外观模式可以创建属于我们自己的代码库，但是有一定的局限性，假如我们看上了别人封装的代码的时候要怎么办呢？直接把代码复制过来是不现实而且没有意义，因此会用到我们下一个模式适配器模式。