js观察者模式

来源:互联网 发布:linux操作系统下载 编辑:程序博客网 时间:2024/06/06 02:19

观察者模式又叫发布订阅模式

(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自动更新自己。

使用观察者模式的好处:

1、支持简单的广播通信,自动通知所有已经订阅过的对象。2、页面载入后目标对象很容易与观察者存在一种动态关联,增加了灵活性。3、目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

思路:
1、发布者对象需要一个数组类型的属性,以存储所有的订阅者。
2、订阅(即注册)行为就是将新的订阅者加入到这个数组中去,
3、则注销即是从这个数组中删除某个订阅者。
4、发布消息,就是循环遍历订阅者列表并通知他们。

先定义一个event对象,其内部包含了3个方法:订阅、发布、删除。

 var event = { //设置3个变量;           var clientList:[], //订阅者缓存列表           listen,//订阅           trigger,//发布           remove;//删除 //订阅方法:           listen = function(key,fn){                 if(!clientList[key]){//如果订阅者不存在了,则,清空原来的内容;                     clientList[key] = [];                }               clientList[key].push(fn); //订阅者添加进缓存列表            };           trigger = function(){ //发布消息                var key = Array.prototype.shift.call(arguments),                fns = clientList[key];                if(!fns || fns.length == 0){ //没有绑定对应的消息                    return false;                 }                for(var i=0,fn; fn=fns[i++]){//遍历缓存队列,发送消息;                     fn.apply(this, arguments);                }           };           remove = function(key,fn){ //删除订阅                   var fns = clientList[key];                   if(!fns){ //如果key对应的消息没有被人订阅,则直接返回                        return false;                   }                   if(!fn){ //如果没有传入具体的回调函数,表示需要取消key对应消息的所有订阅                       fns && (fns.length = 0);                   }else{                       for(var l=fns.length-1; l>=0; l--){ //反向遍历订阅的回调函数列表                            var _fn = fns[l];                            if(_fn ===fn){                                   fns.splice(l,1); //删除订阅者的回调函数                            }                       }                  }             };            return {                   listen:listen,                   trigger:trigger,                   remove:remove            };     };     Event.listen('squareMeter150',function(price){ // 李四订阅消息              console.log('价格=' + price);     });      Event.trigger('squareMeter150',2000000); // 输出 2000000
原创粉丝点击