外观模式

注意

外观模式 一般是作为子系统的功能出口出现，使用的时候可以在其中增加新的功能，但是不推介这样做，因为外观应该是对已有功能的包装，不应在其中掺杂新的功能。

实战中的外观模式

• 函数参数重载
  比如某个函数有多个参数，其中一个参数可以传递也可以不传递，你当然可以直接弄两个接口，但是使用函数参数重载的方式，可以让使用者获得更大的自由度，让两个使用上基本类似的方法获得统一的外观。

            
              function domBindEvent(nodes, type, selector, fn) {
                  if (fn === undefined) {
                      fn = selector
                      selector = null
                  }
                  // ... 剩下相关逻辑
              }
              domBindEvent(nodes, 'click', '#div1', fn)
              domBindEvent(nodes, 'click', fn)
            
          

• 抹平浏览器兼容性问题

源码中的外观模式

• Vue 源码中的函数参数重载 createElement
• Lodash 源码中的函数参数重载 range
• jQuery 源码中的函数参数重载 on、off、bind、one、load、ajaxPrefilter
• jQuery 源码中的外观模式, 当我们使用 jQuery 的 $(document).ready(...) 来给浏览器加载事件添加回调时，jQuery 会使用源码中的 bindReady 方法
• Axios 源码中的外观模式

外观模式与中介者模式

• 外观模式: 封装子使用者对子系统内模块的直接交互，方便使用者对子系统的调用；
• 中介者模式： 封装子系统间各模块之间的直接交互，松散模块间的耦合；

外观模式与单例模式

有时候一个系统只需要一个外观，比如之前举的 Axios 的 HTTP 模块例子。这时我们可以将外观模式和单例模式可以一起使用，把外观实现为单例。