[JavaScript知识库]设计模式-外观模式

外观模式定义

外观模式又称为门面模式，可以为一组复杂的子系统接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更为简单。在JavaScript中有时也会用于对底层结构兼容性做统一封装来简化用户使用。

外观模式应用

1. 处理兼容

通过外观模式，我们可以封装一个兼容所有浏览器的方法，以事件处理程序为例，我们可以用addEventListener来实现事件监听，但是老版本的IE浏览器并不支持这个方法，因此我们要兼容attachEvent方法，同时如果有不支持DOM2级事件处理程序的浏览器，我们也要兼容通过onclick事件方法绑定事件。

var EventUtil = {
	addHandler:function (element, type, handler) {
	    if(element.addEventListener){
	        element.addEventListener(type,handler,false)
	    }else if(element.attachEvent){
	        element.attachEvent('on'+type,handler)
	    }else {
	        element['on'+type] = handler;
	    }
	}
	....
}
EventUtil.addHandler(openConfirmOther,"click",getToken.openConfirmFun)

2. 封装多个功能，简化底层操作

外观模式除了可以解决浏览器兼容问题，还可以简化底层接口的复杂性，通过外观模式来封装多个功能，简化底层操作方法。比如当我们的页面需要多次获取dom节点等，我们可以通过外观模式封装一个获取元素以及设置属性样式的库。

var Util = {
  get: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;},
  on:function(id,type,fn){document.getElementById(id)['on'+type] = fn;}
}

首先，我们通过单例模式创建一个命名空间，然后创建了5个门面方法来实现dom操作。这样子我们每次获取节点可以通过Util.get(id)的方法获取而不用document.getElementById(id)，简化代码。

总结

外观模式的优点：

• 通过外观模式对接口方法进行二次封装隐藏其复杂性，简化其使用方式。
• 外观模式是对接口方法对外层包装以供上层代码调用，因此有时外观模式封装的接口方法不需要接口的具体实现，只需要按照接口使用规则使用即可。这也是对系统和客户之间的一种松散耦合，使得系统与客户之间不会因结构变化而相互影响。