观察者模式
什么是观察者模式?
观察者模式即一个对象被多个对象所依赖,当被依赖的对象发生更新时,会自动通知所有依赖的对象。
例如:微博上的坤坤老师,当坤坤老师在微博发文章时,会自动通知所有的粉丝。
坤坤:坤坤老师发微博了,赶紧来围观啊!
坤坤老师即为目标对象,所有的粉丝即为依赖对象。
代码实现:
首先我们定义一个kk老师的类(目标类)
// 目标类
class Kk {
constructor () {
// 存储所有的粉丝(粉丝:观察者们)
this.fans = []
}
// 收集粉丝
add (fans) {
this.fans.push(fans)
}
// 删除粉丝 (删除观察者)
remove (fans) {
const index = this.fans.findIndex(item => item === fans)
if (index > -1) {
console.log('删除粉丝' + fans.name)
this.fans.splice(index, 1)
}
}
// 通知所有粉丝,坤坤老师发微博了
notify () {
for(let observer of this.observers) {
observer.update()
}
}
}
在创建一个粉丝类(观察者类)
// 观察者类
class Fans {
constructor (name, age) {
this.name = name
this.age = age
}
// 坤坤老师告诉我他发微博了
update () {
console.log('坤坤老师告诉我发微博了,我是', this.name)
}
}
创建坤坤老师,创建粉丝,坤坤老师收集粉丝并告诉粉丝发微博了
// 创建坤坤老师
const kk = new Kk()
// 创建两位粉丝
const fans1 = new Fans('小花', 19)
const fans2 = new Fans('小草', 20)
// 坤坤老师收集粉丝
kk.add(fans1)
kk.add(fans2)
// 坤坤老师通知粉丝
kk.notify()
// 坤坤老师删除粉丝1
kk.remove(fans1)
// 坤坤老师通知粉丝
kk.notify()
最后输出:
坤坤老师告诉我发微博了,我是 小花
坤坤老师告诉我发微博了,我是 小草
删除粉丝小花
坤坤老师告诉我发微博了,我是 小草
看完的,点个关注再走呗! 不定时更新前端技术!