观察者模式

// 首先明白定义观察则模式定义了一种一对多的关系多个观察者监听同一个目标对象，当这个目标对象发生变化时会通知所有的观察者，观察则自动更新

// 所以在这里认为这是两方的事情是被观察者和观察者之间直接联系无中间者参与，还有就是被观察者通知观察者的变化

abstract class Student {
    constructor(public teacher: Teacher) {

    }
    // 每个观察者都有一个update方法 用来在被观察对象更新的时候  执行更新或触发方法
    public abstract update(): void
}

class  Xueba extends Student {
    public update(): void {
        if (this.teacher.getState() === 'tiwen') {
            console.log(this.teacher.getState(), 'huidatiwen')
        }
    }
}

class Xuezha extends Student {
    public update (): void {
        if (this.teacher.getState() === 'tiwen') {
            console.log(this.teacher.getState(), 'ditibibi')
        }
    }
}
class Teacher {
    private state: string = 'jiangke'
    private students: Student[] = []
    public askQuestion () {
        this.state = 'laoshitiwen'
        this.notifyAllStudents()
    }
    getState() {
        return this.state
    }
    setState () {
        
    }
    attach (student: Student) {
        this.student.push(student)
    }
    notifyAllStudents () {
        this.students.forEach(student => student.update())
    }
}

let teacher = new Teacher ()
teacher.attach(new Xueba(teacher))
teacher.attach(new Xuezha(teacher))
teacher.askQuestion()  // 老师发生事件 状态变化 通知学生 （观察者）

// 在上边的例子中老师中有学生的数组，学生中也有老师的实例所以这里是关键

// 观察者常用的应用场景

// DOM事件绑定
// Promise
// callback
// 生命周期函数
// EvetBus
// Vue2响应式原理
// redux

发布订阅者模式

// 订阅者把自己想订阅的事情注册到调度中心
// 发布者把要发布的事件发布到调度中心
// 然后，调度中心统一调度订阅者注册到调度中心的代码

// 虽然以上两种模式都有发布者和订阅者，但是观察者模式中调用是被观察者发布而发布订阅者是有调度中心的 , 所以观察者模式是发布和订阅者之间是相互知道的但是发布订阅模式中是不知道的

// 下面的例子以租房者中介和房东为例子

// 中介
class Agency {
    _topic = {} // envents

    subscirbe(type, listener) {
        let listeners = this._topic[type]
        if (listener) {
            listeners.push(listener)
        } else {
            this._topic[type] = [listener]
        }
    }
    publish (type, ...args) {
        let listeners = this._topic[type] || []
        listeners.forEach(listener => listener(...args))
    }
}

// 房东
class LandLord {
    constructor (public agency: Agency) {

    }
    // type 房子类型  area面积  money 房租价格
    lend(type, area, money) {
        this.agency.publish(type, area, money)
    }
}

// 房客
class Tenant {
    constructor (public angency: Angency, public name: string) {
        
    }
    order (type) {
        this.angency.subscirbe(type, (area, money) => {
            console.log(this.name, area + money)
        })
    }
}

// 搞一个中介
let angency = new Angency()
// 搞两个租客 
let rich = new Tenant(angency, 'rich')
let beipiao = new Tenant(angency, 'beipiao')
rich.order('haozhai')
beipiao.order('danjian')
// 搞一个房东
let landLord = new LandLord()
landLord.lend('haozhai', 1000, 100000)
landLord.lend('danjian', 10 ,2000)

观察者模式和发布订阅区别

观察者模式

发布订阅者模式