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

观察者模式

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

• 图例

  
  
  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 官网示例