持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第25天，点击查看活动详情
外观模式是一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用
在学习外观模式之前我们先来看一段代码，从而引入我们后面学习的内容
上面这段代码为document绑定了onclick事件，onclick是DOM0级事件，DOM0的绑定方式会覆盖重复绑定的事件，如果同一个页面有多位开发人员在同时开发，如果另一位开发人员重新定义一个方法，那么就会被覆盖掉
所以我们可以用DOM2级的事件处理程序addEventListener，但是这个方法在老版本的IE中不支持，就算我们换成attachEvent，依然会有不兼容的浏览器，所以我们需要对兼容性做一个判断，针对不同的版本编写绑定的方式。
兼容方式
通过外观模式来对点击事件在不同的浏览器做一个兼容，就相当于我们再点菜的时候分开点餐和点套餐的区别，定义一个统一封装的接口，
通过外观模式可以将简单的兼容性结合起来，简化接口的复杂性，我们可以看到我们是对原来已有的接口进行美化的二次封装，把一些可能经常用到的接口进行简化起来，使用的次数较多，出现错误的几率可能比较大，所以对原有api的封装很有必要
我们可以结合上一章写到的单例模式，来为我们的现有的一些api做一个统一的封装，通过这个小型的代码块来简化我们操作css的代码
