【Javascript】设计模式之外观模式外观模式(Facade)：为一组复杂的子系统接口提供一个更高级的统一接口，通过

一、什么是外观模式

外观模式(Facade)：为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更容易。在Javascript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。

二、场景模拟

以点餐吃饭为例，选择套餐就会我们提供米饭、菜甚至饮料，我们不需要浏览每一种菜品，因为套餐已经为我们定制好了，餐牌上的套餐实际上就是外观模式提供的一个更高级的统一接口，简化了我们对复杂的底层接口不统一的使用需求。

三、使用场景

1.在我们日常的开发项目中，有时需要兼容低版本浏览器的运行，我们可以使用外观模式，通过检测浏览器特性的方式来创建一个兼容性的方法，以绑定点击事件为例：

function addEvent(dom, type, fn) {
	if (dom.addEventListener) {
       dom.addEventListener(type, fn, false);
    } else if (dom.attachEvent) {
        dom.attachEvent('on' + tpye, fn);
    } else {
        dom['on' + type] = fn; 
    }
}

2.外观模式不仅频繁出现在我们的开发中，在我们熟悉的jQuery库中也经常能够看见。在jQuery面世前，对于开发人员来说，使用原生js操作dom是一个令人厌烦的事情，每当我们使用jQuery的API时，如$(el).css()，我们实际上是在使用一个 Facade，这是一个更简单的公共接口，它避免了我们必须手动调用 jQuery 内核中的许多内部方法来使一些行为正常工作。这也避免了手动与 DOM APIs 交互和维护状态变量的需要。

简易版属性样式方法库：

var D = {
    id: function(id) {
        return document.getElementById(id);
    },
    css: function(id, key, value) {
      	document.getElementById(id).style[key] = value;
    },
    attr: function(id, key, value) {
        document.getElementById(id)[key] = value;
    },
    html: function(id, html) {
        document.getElementById(id).innerHTML = html;
    },
}

四、总结

优缺点

外观模式最大的优点就是使复杂子系统的接口变的简单可用，减少了客户端对子系统的依赖，达到了解耦的效果。但是外观可能成为与程序中所有类都耦合的上帝对象。

我们应该何时选择外观模式呢？

开发一个复杂系统时，在项目开发初期，应该要有意识地将不同的两个层分离，比如经典的三层结构，在数据访问层和业务逻辑层、业务逻辑层和表示层之间建立外观Facade；
子系统通常会随着时间的推进变得越来越复杂，增加外观Facade可以提供一个简单的接口，减少他们之间的依赖。
在维护一个遗留的大型系统时，可能这个系统已经很难维护了，这时候使用外观Facade也是非常合适的，为系系统开发一个外观Facade类，为设计粗糙和高度复杂的遗留代码提供比较清晰的接口，让新系统和Facade对象交互，Facade与遗留代码交互所有的复杂工作。