观察者模式

Posted 2020-08-04 xixi

　　（1）笔试中有一个自定义事件的题，这个题其实考的就是观察者模式。

　　（2）Js中实现双向数据绑定也可以用观察者模式。所谓双向数据绑定指的是：数据的操作可以实时反映到数据，数据的变更也可以实时的展现在页面。（如AngularJs）

　　观察者模式是一种设计模式，又叫发布订阅模式（Publish/Subscribe）。它定义了对象间一对多的关系，让多个观察者对象同时监听某个主体对象，当这个对象的状态发生变化时，所有监听这个对象的观察者都会收到一个通知，从而自动更新自己的状态。

 

例子：

 

　　假如我们正在开发一个商城网站，网站里有header头部、nav导航、消息列表、购物车等模块。这几个模块的渲染有一个共同的前提条件，就是必须先用ajax异步请求获取用户的登录信息。这是很正常的，比如用户的名字和头像要显示在header模块里，而这两个字段都来自用户登录后返回的信息。这个时候，我们就可以把这几个模块的渲染事件都放到一个数组里面，然后待登录成功之后再遍历这个数组并且调用每一个方法。

 

 

　　一个PubSub模型主要有三个方法：订阅（subscribe），退订（unsubscribe），发布（publish）。

　　我们先来实现一个简单的PubSub模块。

var PubSub={};

//用于存储事件队列，事件管理器
var quene={};

//其中event为事件名称，callback为事件函数。
//订阅接口  
PubSub.on=function(event,callback){
　　if(!quene[event]){
　　　　  quene[event]=[];　
　　}
　　quene[event].push(callback);
}

//退订接口
PubSub.off=function(event,callback){
　  var currentEvent=quene[event];
　　if(currentEvent){
　　　　for (var i=0;i<currentEvent.length;i++){
　　　　　　if(currentEvent[i]===callback){
　　　　　　　　currentEvent.splice(i,1);
　　　　　　}
　　　　}
　　}　　
}　

//发布接口
PubSub.emit=function(event){
　　var currentEvent=quene[event];
　　if(currentEvent){
　　　　for(var i=0;i<currentEvent.length;i++){   //遍历这个事件下所有的事件处理器。
　　　　　　currnetEvent[i]();   //执行函数
　　　　}
　　}
}　

 使用：

//订阅
var callbackA=function(){
　　console.log(‘eventA‘);
}
PubSub.on(‘a‘,callbackA);   //将事件加入事件队列，名称为 a
PubSub.on(‘b‘,fucntion(){   //将事件加入事件队列，名称为 b　
　　console.log(‘eventB‘); 
});

//退订  第二个参数为回调函数的引用
PubSub.off(‘a‘,callbackA);

//发布
PubSub.emit(‘a‘);
Pubsub.emit(‘b‘);