观察者模式——javascript

     2022-05-06     274

关键词:

观察者模式又被称为发布-订阅模型或消息机制。

基本思想是观察者一个静态(或全局)对象,为大家提供三个方法:发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息,当发布者发布某些消息的时候对应的订阅者就收到消息了。订阅者也可以取消订阅。

 1 var Observer = (function(){
 2     var _messages = {};
 3     return {
 4         regist: function(type,fn) {   //订阅消息
 5             if(typeof _messages[type] === ‘undefined‘){
 6                 _messages[type] = [fn];
 7             } else {
 8                 _messages[type].push(fn);
 9             }
10         },
11         fire: function(type,args){     //发布消息
12             if(!_messages[type])
13                 return;
14             var events = {
15                 type: type,
16                 args: args;
17             };
18 
19             _messages[type].forEach(function(item){
20                 item.call(this,events);  //这里的this不太明
21             });
22 
23         },  
24         remove: function(type,args){   //取消订阅
25             if(_messages[type] instanceof Array){
26                 _messages[type].lastIndexOf(fn) && _messages[type].splice(i,1);
27                 /*var i = _messages[type].length-1;
28                 for(; i>-1; i--){
29                     _messages[type][i] === fn && _messages[type].splice(i,1);
30                 }*/
31             }
32         }
33     }
34 
35 })();

 

使用场景,用户在留言评论的同时用户消息栏也相应改变。这里订阅者是评论模块和消息模块,发布者是用户操作模块。

 1 //评论模块:
 2 (function(){
 3     Observer.regist(‘addCommentMessage‘,addMsg); 
 4     Observer.regist(‘addCommentMessage‘,removeMsg); 
 5     function addMsg(){ 
 6         //...
 7     }
 8     function removeMsg(){ 
 9         //...
10     }
11 })();
12 
13 //消息模块
14 (function(){
15     Observer.regist(‘addCommentMessage‘,changeMsgNum); 
16     Observer.regist(‘removeCommentMessage‘,changeMsgNum); 
17     function changeMsgNum(){
18         //...
19     }
20 })();
21 
22 //用户操作模块
23 (function(){
24     $("#submitBtn").onclick = function(){
25         //...
26         Observer.fire(‘addCommentMessage‘,{
27             text: text.value,
28             num: 1
29         }); 
30     };
31     $("#deleteBtn").onclick = function(){
32         //...
33         Observer.fire(‘removeCommentMessage‘,{
34             num: -1
35         }); 
36     };
37 })();

 

参考:

张容铭《JavaScript设计模式》

javascript订阅-发布模式(观察者模式)(代码片段)

查看详情

javascript设计模式——观察者模式

观察者模式,又称发布-订阅模式或消息机制,定义了一种依赖关系,解决了主题对象与观察者之间功能的耦合。通过运用观察者模式,可以解决团队开发中的模块间通讯问题,这是模块间解耦的一种可行方案。首先,我们来把... 查看详情

javascript设计模式-订阅发布模式(观察者模式)

varEvent=(function(){varglobal=this,Event,_default=‘default‘;Event=function(){var_create,_listen,_trigger,_remove,_shift=Array.prototype.shift,_unshift=Array.prototype.unshift,namespaceCache={},each=f 查看详情

javascript-观察者模式

观察者模式方法  1.称之为消息机制或发布-订阅者模式  2.定义了一种依赖关系解决了主体对象与观察者之间功能的耦合观察者方法//将观察者放在闭包中,当页面加载就立即执行varObserver=(function(){var_messages={};return{... 查看详情

javascript---设计模式之观察者模式

概念观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。作用支... 查看详情

javascript观察者模式(再次)(代码片段)

查看详情

javascript观察者模式

...状态发生该变时,所有依赖于它的对象都将得到通知。在JavaScript中,一般用事件模型来替代传统的观察者模式。   下面是售楼处(发布者)与各看房者(订阅者)的例子:   varevent={    查看详情

深入理解javascript系列(32):设计模式之观察者模式

介绍观察者模式又叫公布订阅模式(Publish/Subscribe),它定义了一种一对多的关系。让多个观察者对象同一时候监听某一个主题对象。这个主题对象的状态发生变化时就会通知全部的观察者对象,使得它们可以自己主动更新自己... 查看详情

javascript观察者行为设计模式(代码片段)

查看详情

javascript设计模式观察者模式

观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。举个例子,... 查看详情

javascript设计模式与开发实践–观察者模式

概述观察者模式又叫发布–订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者)。发布者的状态发生... 查看详情

javascript模块,单例和观察者模式(代码片段)

查看详情

javascript原生实现观察者模式

观察者模式又叫做发布订阅模式,它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生改变时就会通知所有观察着对象。它是由两类对象组成,主题和观察者,主题负责发布事件,... 查看详情

观察者模式——javascript

观察者模式又被称为发布-订阅模型或消息机制。基本思想是观察者一个静态(或全局)对象,为大家提供三个方法:发布、订阅、取消订阅。想得到消息的订阅者需要通过订阅某些消息,当发布者发布某些消息的时候对应的订... 查看详情

javascript设计模式--行为型--设计模式之observer观察者模式(19)(代码片段)

         JAVASCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVASCRIPT语言来实现主体功能,所以不可能像C++,JAVA等面向对象语言一样严谨,大部分程序都附上了JAVASCRIPT代码,代码只是实现了... 查看详情

javascript与php观察者模式

JAVASCRIPT:a.代码:vara=function(){this.int=0this.add=function(int){this.int=int}this.watch=function(){if(this.int==0){console.log(‘0‘)}else{console.log(‘not0‘)}}}vara=newa()a.watch()a.add(1)a.watch()b.输 查看详情

javascript设计模式--行为型--设计模式之observer观察者模式(19)(代码片段)

         JAVASCRIPT设计模式是本人根据GOF的设计模式写的博客记录。使用JAVASCRIPT语言来实现主体功能,所以不可能像C++,JAVA等面向对象语言一样严谨,大部分程序都附上了JAVASCRIPT代码,代码只是实现了... 查看详情

javascript设计模式与开发实践–观察者模式http://web.jobbole.com/87809/

概述观察者模式又叫发布–订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者)。发布者的状态发生变... 查看详情