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

wanghui 发布于2019-08-20 15:20 / 2907人阅读

摘要：观察者模式，也叫订阅发布模式。第三个是根据登录接口返回的，调取消息列表接口。订阅观察者模式显示用户的头像显示用户的消息发布事实上，还有一种更普遍意义的订阅发布模式。

观察者模式，也叫订阅-发布模式。顾名思义，就是订阅某些功能，然后在适当的时机发布出来，也就是执行这些功能。
订阅：就是把几个函数推入数组中待用；
发布：就是把缓存在数组中的函数拿出来执行；

var login = {};
login.eventList = {};
//将函数推入数组中保存，待用
login.listen = function(key, fn) {
    if(!this.eventList[key]) {
        this.eventList[key] = [];
    }
    this.eventList[key].push(fn);
}
login.trigger = function(key) {
    var fns = this.eventList[key];
    if(!fns || fns.length === 0) {
        return false;
    }
    for(var i=0; i
应用场景：
现在前端领域，SPA单页应用已经非常普遍了，每个页面，都是用ajax异步请求。ajax请求有一个比较闹心的问题，就是层级回调。比如：
有一个页面，需要调用三个数据接口。
第一个是login登录接口，
第二个是根据登录接口返回的id，调取头像接口。
第三个是根据登录接口返回的id，调取消息列表接口。
一般情况下会这么写：
$.ajax({
    url: "http://ajax.login.com",
    dataType: "json",
    success: function(data) {
        getAvatar(data.id);
        getMsg(data.id);
        ...
    }
})

这样写虽然没有问题，但却不容易维护。如果哪天改了需求，需要加个接口，你还得翻出这段代码，找到success回调，再加上一个函数。加函数还算好的，有的人会直接在success回调里继续写$.ajax这样的代码，一级一级的这么摞着写，这样代码很快就会变成一堆大便，变得不可维护。这种写法叫做造粪模式，百分百的造出垃圾来。因为耦合性太大，接口调用都成了拴在一条绳子上的蚂蚱，一扯就是一坨。
如何解耦呢？就是利用订阅发布模式，我们可以在getAvatar方法中，订阅(listen)login接口，而一旦login接口走到success回调，我们就发布(trigger)一下
var event = {
    eventList: {},
    listen: function(key, fn) {
        if(!this.eventList[key]) {
            this.eventList[key] = [];
        }
        this.eventList[key].push(fn);
    },
    trigger: function() {
        var key = Array.prototype.shift.call(arguments);
        var fns = this.eventList[key];
        if(!fns || fns.length === 0) {
            return false;
        }

        for(var i=0; i
现在订阅没有问题了，那如何取消订阅呢？我们再加上取消订阅函数
var event = {
    eventList: {},
    listen: function(key, fn) {
        if(!this.eventList[key]) {
            this.eventList[key] = [];
        }
        this.eventList[key].push(fn);
    },
    remove: function(key, fn) {
        var fns = this.eventList[key];
        if(!fns) {
            return false;
        }
        if(!fn) {
            //如果没有回调，表示取消此key下的所有方法
            fns && (fns.length);
        } else {
            for(var i=0; i
我们的订阅发布模式走到这里，基本上已经完善了。最后我们来看一下ajax回调问题怎么来解决。我们其实根本不需要在登录的ajax回调中加拉取头像等逻辑，而只需让拉取头像功能订阅登录接口即可，当登录工作完成后会发布，也就是触发缓存在数组中的函数执行。




订阅-观察者模式








事实上，还有一种更普遍意义的订阅发布模式。比如在一个按钮上绑定click事件，这其实就是一个订阅的过程；而鼠标点击就是发布。

云服务器 GPU云服务器发布订阅模式订阅发布模式 DTS 订阅发布模式设计模式观察者模式

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

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

订阅发布模式和观察者模式的区别

摘要：或许以前认为订阅发布模式是观察者模式的一种别称，但是发展至今，概念已经有了不少区别。参考文章订阅发布模式和观察者模式真的不一样首选我们需要先了解两者的定义和实现的方式，才能更好的区分两者的不同点。或许以前认为订阅发布模式是观察者模式的一种别称，但是发展至今，概念已经有了不少区别。订阅发布模式在软件架构中，发布-订阅是一种消息范式，消息的发送者（称为发布者）不会将消息直接发送给特...

ysl_unh 2019-08-26 11:01 评论0 收藏0
设计模式之观察者模式与发布订阅模式

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

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

摘要：观察者模式维护单一事件对应多个依赖该事件的对象关系发布订阅维护多个事件主题及依赖各事件主题的对象之间的关系观察者模式是目标对象直接触发通知全部通知，观察对象被迫接收通知。观察者模式（Observer）观察者模式：定义了对象间一种一对多的依赖关系，当目标对象 Subject 的状态发生改变时，所有依赖它的对象 Observer 都会得到通知。简单点：女神有男朋友了，朋友圈晒个图，甜...

bingo 2019-08-23 18:36 评论0 收藏0
发布订阅模式实现及发布订阅者模式与观察者模式的不同

摘要：发布订阅者模式中，订阅者是不知道也不关心事件是为什么触发，是由哪一个事件触发，只知道事件触发时候，会告诉自己。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。概念发布订阅者模式，是javascript甚至大多数语言都有的语言模式，比较概念的解释是，订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布...

YanceyOfficial 2019-08-22 17:34 评论0 收藏0
发布订阅模式实现及发布订阅者模式与观察者模式的不同

摘要：发布订阅者模式中，订阅者是不知道也不关心事件是为什么触发，是由哪一个事件触发，只知道事件触发时候，会告诉自己。然而，在发布订阅模式中，发布者和订阅者不知道对方的存在。在发布订阅模式中，组件是松散耦合的，正好和观察者模式相反。概念发布订阅者模式，是javascript甚至大多数语言都有的语言模式，比较概念的解释是，订阅者把自己想订阅的事件注册到调度中心，当该事件触发时候，发布者发布...

Jensen 2019-08-02 10:32 评论0 收藏0
JavaScript 发布-订阅模式

摘要：发布订阅模式订阅者把自己想订阅的事件注册到调度中心，当发布者发布该事件到调度中心，也就是该事件触发时，由调度中心统一调度订阅者注册到调度中心的处理代码。发布-订阅模式，看似陌生，其实不然。工作中经常会用到，例如 Node.js EventEmitter 中的 on 和 emit 方法；Vue 中的 $on 和 $emit 方法。他们都使用了发布-订阅模式，让开发变得更加高效方便。一...

13651657101 2019-08-26 13:53 评论0 收藏0