观察者模式再次进阶

发表于 | 更新于: | 分类于
字数统计: 972 字 | 阅读时长 ≈ 4 分钟

发布/订阅者模式

发布/订阅模式概念

说起观察者模式, 往往会牵扯到发布/订阅模式. 两者存在着很多的相似之处, 它们都是维护着一个列表, 然后都可以对列表的对象进行增删和通知. 不同的地方可能就在于处理添加和通知的方式上吧.

发布/订阅模式使用了一个主题/事件通道, 这个通道介于希望接到通知的对象(订阅者)和激活事件的对象(发布者)之间. 该事件系统允许代码定义应用程序的特定事件, 这些事件可以传达自定义参数, 自定义参数包含订阅者所需的值. 其目的是避免订阅者和发布者之间产生依赖关系. ———《设计模式: 可复用面向对象软件基础》

戏说发布/订阅模式模式

以下所有代码参见publish/subscribe.
既然和观察者模式类似, 那么在从观察者模式说起提到的小故事, 就可以接着往下续了.
subject1带着那么一拨人回去复命, 经过一段时间的磨合实践, 效果也是很明显. 附近的公司听到风声后, 也纷纷组织派遣员工前来学习. 人多了, 需求也变多了, 这么多人肯定不能再呆在一起学习了. 原来只是一个公司的人呆在一间屋子里学习, 得到命令后大家开始各司其职. 现在, 各个公司的学习内容不同, 它们理应独立开来. 因为各个公司动作可以不同步, 但公司内部一定要同步起来. 为了区别对待, 每个公司都有能和别人区分的令牌, 有了令牌同一个公司的人就可以进入与令牌相对应的房间了(当然一个人也可以有很多令牌, 商业间谍吧😂).

1
2
3
4
5
6
7
// 我是Pubsub, 我负责管理这拨人.
class Pubsub {
    constructor() {
        // 维护事件列表, 这里将以对象的形式出现, key: value, key: 令牌, value: 同一公司员工列表.
        this. handles = {}
    }
}

现在, 不同公司的人前来学习的时候, 需要告诉Pubsub他们公司的令牌号, 进而引领到令牌对应的房间.

1
2
3
4
5
6
7
8
9
10
class Pubsub {
    // 省略
    // 注册事件. 如果是公司第一次派人过来, 那就新开一间.
    subscribe(type, handle) {
        if (!this.handles[type]) {
        this.handles[type] = []
        }
        this.handles[type].push(handle)
    }
}

如果某个房间的某个人, 或整个房间的人都不打算来了, 也需要Pubsub将其注销.

1
2
3
4
5
6
7
8
9
10
11
12
13
class Pubsub {
    // 省略
    // 注销事件. 公司个人或整体注销.
    unsubscribe(type, handle) {
        let pos = this.handles[type].indexOf(handle)
        if (!handle) {
        // 不传handle, 则默认注销所有和type事件相关的事件处理函数.
        this.handles.length = 0
        } else {
        ~pos && this.handles[type].splice(pos, 1)
        }
    }
}

不同的团体做出了区分, 算是万事具备. 想要哪个房间里的人动起来, 有了令牌号, 只要对着吼一嗓子即可.

1
2
3
4
5
6
7
8
9
10
11
12
class Pubsub {
    // 省略
    // 通知事件
    publish() {
        // 执行所有和type事件相关的处理函数.
        let type = Array.prototype.shift.call(arguments)
        this.handles[type].forEach(handle => {
        // 箭头函数不绑定Arguments对象
        handle.apply(this, arguments)
        })
    }
}

让我们看看效果如何.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
let handle1 = (...rest) => {
document.write('handle1', JSON.stringify(rest), '<br/>')
}

let handle2 = (...rest) => {
document.write('handle2', JSON.stringify(rest))
}

let ps = new Pubsub()

ps.subscribe('notify-1', handle1)

ps.subscribe('notify-1', handle2)

ps.subscribe('notify-2', handle2)

ps.unsubscribe('notify-1', handle2)

ps.publish('notify-1', 'hahaha', 'heiheihei', [], {})

ps.publish('notify-2', 'hehehehehe')

// 结果:
handle1["hahaha","heiheihei",[],{}]
handle2["hehehehehe"]

不难发现, 我们的Pubsub老师只认令牌😅.

------------- The End -------------
显示评论