JavaScript 设计模式读书笔记(六)——门面模式

门面模式是什么，与其我去用笨拙的语言去解释，不如看下面这张图，曾经在网上很火的一张图片，说的是一位儿子为他的爸妈设置的电脑桌面。

有了这些起好名字的快捷方式，身为电脑盲的爸妈就不须要去了解何为浏览器，何为播放器了，照着指示点就是了。这些快捷方式至关于在用户和计算机程序之间架起了一座桥梁，不须要每一个用户都像电影里的黑客同样敲着一行行的代码才能使用计算机的功能。这就是门面模式的意义——把复杂的功能（接口）通过包装，让用户（开发者）能间接地，比较简单地去使用（调用）它们，简化使用（开发）的难度。

简单的门面模式实例——事件绑定函数

门面模式的做用是将复杂的接口进行包装，变成一个便于使用的接口。在不少的JavaScript库中都能找到门面模式的应用，例如jQuery，咱们在用jQuery进行事件绑定的时候，简单的调用bind()，on()等方法就能够了，并不用对不一样浏览器的兼容性问题进行处理，兼容性的处理在jQuery内部已经完成，就是经过门面的思想。

咱们就以事件绑定为例，来展示一下门面模式是什么：

// 实现一个通用的，跨多种浏览器的时间绑定函数
function addEvent(el, type, fn) {
  if (window.addEventListener) {
    el.addEventListener(type, fn, false);
  } else if (window.attachEvent) {
    el.attachEvent('on' + type, fn);
  } else {
    el['on' + type] = fn;
  }
}

经过能力检测，对浏览器支持的API进行判断，自动调用有效的事件绑定API来绑定时间。开发者在绑定时间的时候，就不须要写冗长的判断代码，直接专一于业务就好，这是门面模式带来的最直接的便利。

这里门面模式的做用是处理浏览器的兼容性，门面模式的另外一个做用是对多个函数进行组合管理。

仍是以事件相关API为例，事件绑定中还有两个经常使用的API分别是event.stopPropagation()和event.preventDefault()。这两个API在IE浏览器中是不兼容的，在IE中它们分别对应的是event.cancelBubble = true和event.returnValue = false。经过门面模式咱们的目标是：
没有蛀牙~~~
以及：

+---------------+      +------------+      +--------------+      +-----------+
|stopPropagation|      |cancelBubble|      |preventDefault|      |returnValue|
+---------------+      +------------+      +--------------+      +-----------+
        |                    |                    |                        |
        +--------------------+                    +------------------------+
                   ↓                                          ↓
           +---------------+                           +--------------+
           |stopPropagation|                           |preventDefault|
           +---------------+                           +--------------+
                   |                wrapped in                 |
                   +-------------------------------------------+
                                        ↓
                          +-----------------------------+
                          |          ╭ stopPropagation |
                          | stopEvent                   |
                          |          ╰ preventDefault  |
                          +-----------------------------+

经过代码事件就是这样：

var eventUtil = {
  stopPropagation: function(ev) {
    if (ev.stopPropagation) {
      ev.stopPropagation();
    } else {
      ev.cancelBubble = true;
    }
  },
  preventDefault: function(ev) {
    if (ev.preventDefault) {
      ev.preventDefault();
    } else {
      ev.returnValue = false;
    }
  },
  stopEvent: function(ev) {
    eventUtil.stopPropagation(ev);
    eventUtil.preventDefault(ev);
  }
}

这样，在事件绑定函数中，若是须要取消冒泡和默认事件的话，直接调用eventUtil.stopEvent(ev)便可，该方法将所需的子方法进行了包装，也处理了兼容性问题。

门面模式在模块中的应用

结合之前说过的对象建立模式，门面模式能够应用在模块之中，经过对私用方法的包装提供简化的公用方法，开发者维护模块时只需修改私用方法就能够调整公用方法的实现。

var orange = (function() {
  // 私用方法包装对象
  var _privateMethod = {
    orangeValue: 10,
    getValue: function() {
      console.log(this.orangeValue);
    },
    setValue: function(value) {
      this.orangeValue = value;
    }
  }

  // 返回公用方法
  return {
    setOrangeValue: function(value) {
      _privateMethod.setValue(value);
      _privateMethod.getValue();
    }
  }
})();

门面模式能提供编写方式的灵活性，经过对底层子方法的封装，既简化了代码又下降了对底层系统的耦合。在大型系统工具库的使用中有重要的意义。但在实际项目中仍是要考虑代码量的轻便性，若是业务只须要一些小粒度的方法的话，就没有必要使用包装了不少无用方法的门面函数了，这须要开发者灵活判断。