设计模式 观察者模式
参考：汤姆大叔的博客
观察者模式又叫发布订阅模式（Publish/Subscribe），它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。
使用观察者模式的好处：
- 支持简单的广播通信，自动通知所有已经订阅过的对象。
- 页面载入后目标对象很容易与观察者存在一种动态关联，增加了灵活性。
- 目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。
JS里对观察者模式的实现是通过回调来实现的，我们来先定义一个pubsub对象，其内部包含了3个方法：订阅、退订、发布。
举例：写个游戏：当图片加载好之后, 再渲染地图, 执行游戏逻辑. 嗯, 这个程序运行良好. 突然有一天, 我想起应该给游戏加上声音功能. 我应该让图片加载器添上一行代码.
loadImage( imgAry, function(){
Map.init();
Gamer.init();
Sount.init();
} )
这时候需要我们改loadImage了。很有可能有副作用，这时就需要用发布订阅模式：
loadImage.listen( 'ready', function(){
Map.init();
})
loadImage.listen( 'ready', function(){
Gamer.init();
})
loadImage.listen( 'ready', function(){
Sount.init();
})
loadImage完成之后, 它根本不关心将来会发生什么, 因为它的工作已经完成了. 接下来它只要发布一个信号.
loadimage操作完成后， 我们就trigger它：loadImage.trigger( ”ready’ );这其实也是我们用的异步编程。
Events = function() {
var listen, log, obj, one, remove, trigger, __this;
obj = {};
__this = this;
listen = function(key, eventfn) { //把简历扔盒子, key就是联系方式.
var stack, _ref; //stack是盒子
stack = (_ref = obj[key]) != null ? _ref : obj[key] = [];
return stack.push(eventfn);
};
one = function(key, eventfn) {
remove(key);
return listen(key, eventfn);
};
remove = function(key) {
var _ref;
return (_ref = obj[key]) != null ? _ref.length = 0 : void 0;
};
trigger = function() { //面试官打电话通知面试者
var fn, stack, _i, _len, _ref, key;
key = Array.prototype.shift.call(arguments);
stack = (_ref = obj[key]) != null ? _ref : obj[key] = [];
for (_i = 0, _len = stack.length; _i < _len; _i++) {
fn = stack[_i];
if (fn.apply(__this, arguments) === false) {
return false;
}
}
}
return {
listen: listen,
one: one,
remove: remove,
trigger: trigger
}
}
var adultTv = Events();
//订阅
adultTv.listen('play', function(data) {
console.log("1今天是谁的电影" + data.name);
});
adultTv.listen('play', function(data) {
console.log("2今天是谁的电影" + data.name);
});
//发布者
adultTv.trigger('play', {
'name': '麻生希'
})
3.8. 优点
观察者模式的优点
观察者模式可以实现表示层和数据逻辑层的分离，并定义了稳定的消息更新传递机制，抽象了更新接口，使得可以有各种各样不同的表示层作为具体观察者角色。
观察者模式在观察目标和观察者之间建立一个抽象的耦合。
观察者模式支持广播通信。
观察者模式符合“开闭原则”的要求。
3.9. 缺点
观察者模式的缺点
如果一个观察目标对象有很多直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。
如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。
观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。
3.10. 适用环境
在以下情况下可以使用观察者模式：
一个抽象模型有两个方面，其中一个方面依赖于另一个方面。将这些方面封装在独立的对象中使它们可以各自独立地改变和复用。
一个对象的改变将导致其他一个或多个对象也发生改变，而不知道
可以降低对象之间的耦合度。
一个对象必须通知其他对象，而并不知道这些对象是谁。
需要在系统中创建一个触发链，A对象的行为将影响B对象，B对象的行为将影响C对象……，可以使用观察者模式创建一种链式触发机制。
3.11. 模式应用
观察者模式在软件开发中应用非常广泛，如某电子商务网站可以在执行发送操作后给用户多个发送商品打折信息，某团队战斗游戏中某队友牺牲将给所有成员提示等等，凡是涉及到一对一或者一对多的对象交互场景都可以使用观察者模式。
3.12. 模式扩展
MVC模式
MVC模式是一种架构模式，它包含三个角色：模型(Model)，视图(View)和控制器(Controller)。观察者模式可以用来实现MVC模式，观察者模式中的观察目标就是MVC模式中的模型(Model)，而观察者就是MVC中的视图(View)，控制器(Controller)充当两者之间的中介者(Mediator)。当模型层的数据发生改变时，视图层将自动改变其显示内容。
3.13. 总结
- 观察者模式定义对象间的一种一对多依赖关系，使得每当一个对象状态发生改变时，其相关依赖对象皆得到通知并被自动更新。观察者模式又叫做发布-订阅模式、模型-视图模式、源-监听器模式或从属者模式。观察者模式是一种对象行为型模式。
- 观察者模式包含四个角色：目标又称为主题，它是指被观察的对象；具体目标是目标类的子类，通常它包含有经常发生改变的数据，当它的状态发生改变时，向它的各个观察者发出通知；观察者将对观察目标的改变做出反应；在具体观察者中维护一个指向具体目标对象的引用，它存储具体观察者的有关状态，这些状态需要和具体目标的状态保持一致。
- 观察者模式定义了一种一对多的依赖关系，让多个观察者对象同时监听某一个目标对象，当这个目标对象的状态发生变化时，会通知所有观察者对象，使它们能够自动更新。
- 观察者模式的主要优点在于可以实现表示层和数据逻辑层的分离，并在观察目标和观察者之间建立一个抽象的耦合，支持广播通信；其主要缺点在于如果一个观察目标对象有很多直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间，而且如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。
- 观察者模式适用情况包括：一个抽象模型有两个方面，其中一个方面依赖于另一个方面；一个对象的改变将导致其他一个或多个对象也发生改变，而不知道具体有多少对象将发生改变；一个对象必须通知其他对象，而并不知道这些对象是谁；需要在系统中创建一个触发链。
在JDK的java.util包中，提供了Observable类以及Observer接口，它们构成了Java语言对观察者模式的支持。
自己简单写一个
function Events(){
this.eventsObj = {};
this.trigger = function(method, data){
var fns = this.eventsObj[method];
fns.forEach(function(item){
item(data)
})
}
this.listen = function(method, fn){
var me = this.eventsObj[method] || (this.eventsObj[method] = []);
me.push(fn);
}
}
var adultTv = new Events();
adultTv.listen('play', function(data) {
console.log("1今天是谁的电影" + data.name);
});
adultTv.listen('play', function(data) {
console.log("2今天是谁的电影" + data.name);
});
console.log(adultTv.eventsObj);
//发布者
adultTv.trigger('play', {
'name': '麻生希'
})
网友评论