设计模式之发布订阅模式（观察者模式）

kyanag 发布于2019-08-21 17:47 / 856人阅读

摘要：主要解决的问题观察者模式主要解决的问题是程序模块间通信问题，异步请求处理。发布订阅模式是一种代替异步编程中传递回调函数的方案。房东到中介那里订阅一个事件卖出去通知我，中介在房子卖出去后发布这个消息通知房东，这就是一个完整的发布订阅模式。

主要解决的问题

观察者模式主要解决的问题是程序模块间通信问题，异步请求处理。发布订阅模式是一种代替异步编程中传递回调函数的方案。能够有效的避免回调地狱的出现。

对应现实生活中的例子

在现实生活中的事件模型就是通知模型。想象这样一个场景，一个房东要把房子挂到房产中介那里去卖，如果没有通知模型的话，房东需要每一打一个电话到中介去问一下房子卖出去没有？没过几天中介的前台就辞职不干了。如果存在时间的通知机制的话，中介如果把房子卖出去了，就通知房东。这就是一个发布订阅模式。房东到中介那里订阅一个事件：“卖出去通知我”，中介在房子卖出去后发布这个消息：“通知房东”，这就是一个完整的发布订阅模式。能够节省很多轮询机制所带来的程序性能的浪费。

浏览器中有基于DOM的原生的事件机制

常见的有：

document.body.addEventListener("click",function(){
    alert(1111);
},false);//负责监听body上的click事件
document.body.click();  //触发这个click事件

自定义全局事件机制

程序的结构：
1.定义一个大类EventPool，有3个方法。
2.register( )用于注册一个监听事件
3.dispatch( )用于触发一个监听事件
4.removeEvent( )用于移除一个已经注册的监听事件
5.namespace( )用于产生一个命名空间，防止出现事件名命名冲突

TS代码

class EventPool{
    clientList:object = {}; //用于缓存添加进来的事件和监听函数
    constructor(){}
    
//注册一个监听事件，并传入一个回调函数    register(eventName:string,callback:Function,scope=this.clientList){
        let kinds:string[] = eventName.split(" ");
        kinds.map((itemEvent)=>{
            if( itemEvent!==""){
                if (!(itemEvent in scope)) {
                    scope[itemEvent] = [];
                }
                scope[itemEvent].push(callback);
            }
        });
    }
    //触发一个已经注册过的事件
    dispatch(eventName: string, callbackParms: any[]=[], scope=this.clientList){
        let events: string[] = eventName.split(" ").filter((item) => item !== "" ? true : false);
        let callbacks:Function[]=[];
        events.map((item)=>{
            if(!(item in scope)){
                throw new Error(`${item}:该事件名在已注册的事件列表中不存在`);
            }else{
                callbacks = callbacks.concat(scope[ item ]);
            }
        });
        callbacks.map((itemFunc)=>{
            itemFunc.call(this, ...callbackParms);
        });

    }
    //移除注册过的事件
    removeEvent(eventName:string, callback:Function, scope=this.clientList){
        let cbs:Function[] = scope[eventName];
        if(!(eventName in scope)){
            throw new Error(`${eventName}-->这个事件名在事件列表中不存在`);
        }else{
            if(!cbs || cbs.length === 0) return false; //没有订阅过，或者没有传入过回调函数
            else{
                cbs.forEach((itemFunc,index)=>{
                    if( itemFunc === callback ){
                        scope[ eventName ].splice(index,1);
                    }
                });
            }
        }
    }
    /* 在全局事件对象上为了防止发生事件的命名冲突，目前只实现了一层的命名空间 */
    namespace(namespace:string){
        let list = this.clientList;
        if( !(namespace in list) ){
            list[namespace] = {};
        }
        if ( !(list[namespace] instanceof Array) ){
            return {
                register: (eventName: string, callback: Function, scope = this.clientList[namespace]) => {
                    this.register(eventName, callback, scope);
                },
                dispatch: (eventName: string, callbackParms: any[]=[], scope = this.clientList[namespace])=>{
                    this.dispatch(eventName,callbackParms,scope);
                },
                removeEvent: (eventName: string, callback: Function, scope = this.clientList[namespace])=>{
                    this.removeEvent(eventName,callback,scope);
                }
            }
        }
    }
}


/* Test */
let ep = new EventPool();
let f = (...args) => {
    console.log("知道了");
    console.log(args);
}
ep.register("吃饭",f);

ep.dispatch("吃饭",["参数1",1,[1,2,3]]);

ep.removeEvent("吃饭",f);

console.log(ep.clientList);

ep.dispatch("吃饭", ["参数1", 1, [1, 2, 3]]);

云服务器海外云主机发布订阅模式订阅发布模式 DTS 订阅发布模式设计模式观察者模式

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90004.html

JavaScript设计模式之发布-订阅模式（观察者模式）-Part1

摘要：设计模式与开发实践读书笔记。发布订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。附设计模式之发布订阅模式观察者模式数据结构和算法系列栈队列优先队列循环队列设计模式系列设计模式之策略模式《JavaScript设计模式与开发实践》读书笔记。发布-订阅模式又叫观察者模式，它定义了对象之间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖它的对象都将得到通知。例...

muzhuyu 2019-08-20 12:06 评论0 收藏0
设计模式之观察者模式与发布订阅模式

摘要：观察者模式与发布订阅的区别在模式中，知道，同时还保留了的记录。发布者订阅者在大多情况下是异步方式使用消息队列。图片源于网络侵权必删如果以结构来分辨模式，发布订阅模式相比观察者模式多了一个中间件订阅器，所以发布订阅模式是不同于观察者模式的。学习了一段时间设计模式，当学到观察者模式和发布订阅模式的时候遇到了很大的问题，这两个模式有点类似，有点傻傻分不清楚，博客起因如此，开始对观察者和发布...

BaronZhang 2019-08-23 18:03 评论0 收藏0
设计模式之观察者（发布/订阅）模式

摘要：发布订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系。事件观察者模式应该是最常用的模式之一。总之，当消息一发布，所有的订阅者都会收到消息。发布订阅模式还可以用来帮助实现一些别的设计模式，比如中介者模式。发布/订阅模式又叫观察者模式，它定义对象间的一种一对多的依赖关系。当一个对象的状态（发布者）发生改变时，所有依赖于它的对象都将得到通知。在 JavaScript 开发中，我们...

dreamGong 2019-08-23 11:38 评论0 收藏0
JS设计模式之Obeserver（观察者）模式、Publish/Subscribe（发布/订阅）模式

摘要：观察者模式定义设计模式中对的定义一个对象称为维持一系列依赖于它观察者的对象，将有关状态的任何变更自动通知给它们。如图模式比较观察者模式则多了一个类似于话题调度中心的流程，发布者和订阅者解耦。 Obeserver（观察者）模式定义《js设计模式》中对Observer的定义：一个对象（称为subject）维持一系列依赖于它（观察者）的对象，将有关状态的任何变更自动通知给它们。《设计模...

荆兆峰 2019-08-26 13:37 评论0 收藏0
JavaScript设计模式之发布-订阅模式（观察者模式）-Part2

摘要：设计模式与开发实践读书笔记。看此文章前，建议先看设计模式之发布订阅模式观察者模式在中，已经介绍了什么是发布订阅模式，同时，也实现了发布订阅模式。《JavaScript设计模式与开发实践》读书笔记。看此文章前，建议先看JavaScript设计模式之发布-订阅模式（观察者模式）-Part1 在Part1中，已经介绍了什么是发布-订阅模式，同时，也实现了发布-订阅模式。但是，就Part1...

Charlie_Jade 2019-08-20 13:45 评论0 收藏0