javascript设计模式---观察者模式

观察者模式

  • 观察对象状态,一旦对象发生变化,观察者定义的动作行为被触发(需要一个观察者角色,需要一个被观察者角色。 --------------主动权在被观察者手中)

大体思路:

  1. 观察者进行定义方法
  2. 被观察者改变状态,触发观察者的方法 

观察者:

class Observer {
    constructor(name, fn=() => {}) {
        this.name=name
        this.fn = fn
    }
}

const bzr = new Observer('班主任', (state) => {console.log(`因为${state}找你家长`)})

被观察者

class Subject {
    constructor(state) {
        this.state = state
        this.observers = []
    }
    setState(state) {
        this.state = state
        this.observers.forEach(item => {
            item.fn(state)
        })
    }
    addObservers(obs) {
        this.observers.filter(item => item!== obs);
        this.observers.push(obs)
    }
    delObservers(obs) {
         this.observers.filter(item => item!== obs);
    }
}

const xiaoming = new Subject('学习')
xiaoming.addObservers(bzr)

xiaoming.setState('玩') //触发观察者的监听函数,打印出 因为玩找你家长

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值