每日JavaScript设计模式：Day5 外观模式

外观模式

为一组复杂的子系统的接口提供一个更高级的统一接口，通过这个接口使得对子系统接口的访问更加容易，在JavaScript中有时也会用于对底层结构兼容性作统一封装。

举个例子，我们想吃一顿美味的炖排骨，一种方式是我们自己做，买好排骨、萝卜、玉米、调料等，然后按照一定的步骤炖好排骨汤，然后品尝美味；另一种方式就是点个外卖，直接来一份排骨汤。

对于第二种方式，我们是用户，需求是排骨汤，那么对于我们来说是买各种调料自己做快还是买现成的快呢？显然是点个外卖更省事。店家帮我们完成了做排骨汤的所有步骤。

在设计模式中也是这样啊，假如我们写了一个类，用于连接mysql，一般有三个步骤，连接数据库、查询、释放连接，我们暴露了相应的三个方法给其他使用我们类的用户，当用户使用的时候，需要依次调用我们的三个方法才能完成查询数据库的任务。让我们是不是可以暴露一个更加高级的方法呢？让用户只调用这个方法就可以完成查询数据库的任务。实例代码如下：

class MysqlConnector {
	constructor(){
	}
	connect(url){}
	querySync(sql){}
	release(){}
	queryCombine(url,sql){
		connect(url)
		let data = querySync(sql)
		release()
		return data;
	}
}

// 直接使用
let conn = new MysqlConnector();
conn.connect('url');
var data = conn.querySync('select * from ...');
conn.release();

// 利用外观模式的思想
var data=conn.queryCombine('url','select * from ...');

对于用户来说会不会更加方便呢？同时，如果我对代码进行了修改，将release方法改成了destroy方法。在外观模式中，我们只要改变queryCombine中的realease即可，对用户没有任何影响，这就松散了用户和我们的接口直接的耦合。

同时用外观模式的思想可以写出兼容性的代码。如下图，绑定事件

function addEvent(dom, type, fn){
	if(dom.addEventListener) dom.addEventListener(typp, fn, false); // W3C
	else if(dom.attachEvent) dom.attachEvent('on'+type, fn); // IE
	else dom['on'+type] = fn; // 例如dom.onclick = function(){}
}

// 使用
addEvent('click', function(e){});

这种兼容性的代码也是外观模式思想的实现之一。

总结

外观模式用于将一些底层的接口进行封装，提供更加高级的接口。理解思想很重要很重要，这个我要加强学习。