js 设计模式
设计模式即设计代码的方式。设计模式是软件开发人员在软件开发过程中面临的一般问题的解决方案。这些解决方案是众多软件开发人员经过相当长的一段时间的试验和错误总结出来的。
1.适配器模式
意图：将一个旧的接口转换成客户希望的另外一个接口，解决一些接口不兼容问题。
借助适配器将一个旧的接口转换为一个能够兼容的新的接口。如下图所示：标准的交流电插头不能插在欧洲壁式的插座，通过一个交流适配器转换，标准的交流电源头插在交流适配器上，就可以使用欧洲壁式插座提供的功能了。
2.代理模式
意图：为其他对象提供一种代理以控制对这个对象的访问。增加中间层代理，来控制对象的访问。代理主要负责为委托方预处理消息、过滤消息、把消息转发给委托地方。代理类本身不提供服务，而是调用委托方的方法来提供特定的服务。保持原有的API功能不变。
如下拦截异步数据
(function(){
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(){
var url = arguments[1];
var serverNameRegex = /^http:\/\/teach.h5jun.com/;
if(serverNameRegex.test(url)){
arguments[1] = url.replace(serverNameRegex, "http://localhost:8080");
}
return open.apply(this, arguments);
}
})();
var apiURL = "http://teach.h5jun.com/get_some_data";
var xhr = new XMLHttpRequest();
xhr.open('GET', apiURL);
xhr.send();
3.装饰器模式
意图：在不改变在原有的功能上扩展一些功能。
如debounce方法，控制函数的执行时间。相当于在fn的基础上扩展一些功能。
function debounce(fn, dur){
dur = dur || 100;
var timer;
return function(){
clearTimeout(timer);
timer = setTimeout(() =>{
fn.apply(this,arguments);
}, dur);
}
}
4.观察者模式
意图：定义对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都得到通知并被自动更新。解耦对像间的依赖，并且高度协作。
function Observer(){
this.observers = [];
}
Observer.prototype.add = function(observer){
this.observers.push(fn);
}
Observer.prototype.receive = function(){
this.observers.forEach(function(observer){
observer();
});
}
function Subject(){
this.observers = new Observer();
}
Subject.prototype.listen = function(observer){
this.observers.add(observer);
}
Subject.prototype.notify = function(){
this.observers.receive();
}
var subject = new Subject();
subject.listen(function(){
console.log(1);
})
subject.listen(function(){
console.log(2);
})
subject.notify();
5.中介者模式
意图：观察者模式需要对象与对象之间直接联系。中介者模式通过中介者让主体与主体之间进行间接通信。用一个中介对象来封装一系列的对象交互，中介者使各个对象不需要县式地相互引用，从而使其耦合松散。
对象与对象之间存在大量的关联关系，这样会导致系统的结构变得复杂，同时若一个对象发生改变，我们也需要跟踪与之相关联的对象，同时做出相应的处理。
软件开发中，中介者是一个行为设计模式，通过提供一个统一的接口让系统的不同部分进行通信。一般，如果系统有很多子模块需要直接沟通，都要创建一个中央控制点让其各模块通过该中央控制点进行交互。中介者模式可以让这些子模块不需要直接沟通，而达到进行解耦的目的。
打个比方，平时常见的机场交通控制系统，塔台就是中介者，它控制着飞机（子模块）的起飞和降落，因为所有的沟通都是从飞机向塔台汇报来完成的，而不是飞机之前相互沟通。中央控制系统就是该系统的关键，也就是软件设计中扮演的中介者角色。
function PubSub(){
this.subscribers = [];
}
PubSub.prototype = {
pub: function(){
this.subscribers.forEach(function(subscriber){
subscriber();
});
},
sub: function(fn){
this.subscribers.push(fn);
}
}
var mediator = new PubSub();
function A(){
var a = 1;
//...
mediator.pub();//中介者
}
mediator.sub(function(){
console.log(1);
});
mediator.sub(function(){
console.log(2);
});
参考:
[1]http://zy19982004.iteye.com/blog/1415735
[2]http://www.runoob.com/design-pattern/design-pattern-tutorial.html
[3]https://ppt.baomitu.com/d/f4075f50#/
[4]http://www.cnblogs.com/TomXu/archive/2012/03/13/2374789.html
