观察者模式——JavaScript

Posted 2020-07-03

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

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

 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设计模式》