设计模式(七)-观察者模式

观察者模式

观察者模式是一种对象行为模式,它定义对象间的一种一对多的依赖关系,当被观察者状态发生改变时，所有的观察者都得到通知并自动更新.

• 图例

  
  image.png

• 代码实现

class Baby{
    constructor(){
        this.observes=[];
        this.status='';
    }
    attach(...watcher){
        this.observes.push(...watcher)
    }
    chageStatus(){
        this.status='宝宝哭啦'
        if(this.observes.length){
            this.observes.forEach(fn=>{fn.update(this.status)})
        }
    }
}

class Father{
    update(status){
        return console.log(`爸爸知道${status}`)
    }
}
class Mather{
    update(status){
        return console.log(`妈妈知道${status}`)
    }
}
let baby=new Baby();
baby.attach(new Father,new Mather);
baby.chageStatus() //爸爸知道宝宝哭啦 妈妈知道宝宝哭啦

• 应用场景

1.普通事件绑定

<button id="btn">按钮</button>

let btn=document.querySelector("#btn");

btn.addEventListener('click',function(event){
    console.log(event)
})

2. promise

let promise=new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve(11111)
    },1000)
})

promise.then(res=>{
   console.log(res)
}).catch(err=>{
   console.log(err)
})

3.jquery Callbacks

let $={
    Callbacks(){
        let callbacks=[]
        function add(fn){
            callbacks.push(fn)
        }
        function remove(fn){
            callbacks=callbacks.filter(item=>item!=fn)
        }
        function fire(){
            callbacks.forEach(item=>item())
        }
        return{
            add,
            remove,
            fire
        }
    }
}
let callbacks=$.Callbacks();
function a1(){
    console.log('a1')
}
function a2(){
    console.log('a2')
}
function a3(){
    console.log('a3')
}
callbacks.add(a1)
callbacks.add(a2)
callbacks.add(a3)
callbacks.remove(a2)
callbacks.fire()  //a1 a3

4. node events

let EvenetEmitter=require('events');
let eve=new EvenetEmitter();
eve.on('click',function(name){
    console.log(name) //zdb
})

eve.emit('click','zdb')

5. fs createReadStrema

let fs=require('fs');
let path=require('path');
let rs=fs.createReadStream(path.join(__dirname,'1.txt'))
rs.on('data',function(data){
    console.log(data)
})
rs.on('end',function(){
    console.log('end')
})

6.vue watch

   watch: {
        $route(to, from) {
           console.log(to,from)
        }
    }

7.vuex 官网示例

优点	缺点
观察者模式解除了主题和具体观察者的耦合,让耦合的双方都依赖于抽象,而不依赖于具体.	1、如果一个被观察者对象有很多的直接和间接的观察者的话，将所有的观察者都通知到会花费很多时间。 2、如果在观察者和观察目标之间有循环依赖的话，观察目标会触发它们之间进行循环调用，可能导致系统崩溃。 3、观察者模式没有相应的机制让观察者知道所观察的目标对象是怎么发生变化的，而仅仅只是知道观察目标发生了变化。