设计模式 - 观察者模式

Posted by luoxiao on 2021-07-13

什么是观察者模式?

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

优势

使用观察者模式的好处:

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

适用场景

观察者的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。

总的来说,观察者模式所做的工作就是在解耦,让耦合的双方都依赖于抽象,而不是依赖于具体。从而使得各自的变化都不会影响到另一边的变化。

观察者模式建立了一套触发机制,帮助我们完成更松耦合的代码编写。但是也不能过度使用,否则会导致程序难以追踪和理解。

场景

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
var Observer = (function() {
var __messages = {}
return {
// 注册接口
regist: function(type, fn) {
if (typeof __messages[type] === 'undefined') {
__messages[type] = [fn]
} else {
__message[type].push(fn)
}
},
// 发布接口
fire: function(type, args) {
if (!__messages[type]) {
return
}
var i = 0
var len = __messages[type].length
for(; i < len; i++) {
__messages[type][i].call(this, args || {})
}
},
// 解绑接口
remove: function(type, fn) {
if (__messages[type] instanceof Array) {
var i = __messages[type].length - 1
for (; i >= 0; i--) {
__messages[type][i] === fn && __messages[type].splice(i, 1)
}
}
},
}
})()

Observer.regist('change', obj => {
console.log(obj.name)
})

Observer.fire('change', { name: 'luoxiao' })