An article explaining the publisher subscriber model and the observer model

difference

  Observer mode ： When there is a one to many dependency between objects , The state of one of the objects changes , All objects that depend on it will be notified , This is the observer model .
  Publisher subscriber mode ： Based on an event channel , Who wants to receive the notification Subscriber Subscribe to topics through custom events , The object of the activated event Publisher Notify subscribers of the topic by publishing the topic event Subscriber object .
  The observer pattern is , When the observed data changes , Call the observer's notify Method , To inform all observers to perform update Method to update . For publisher subscriber mode , First of all, publishers and subscribers don't know each other's existence , They are dispatched through the event center , The publisher publishes a corresponding event topic in the event center , Subscribers subscribe to an event body in the event center , When the subscriber triggers emit Execute the events published by the publisher .
 Vue A case showing its design pattern ,Vue Our two-way data binding uses the observer pattern , Its event bus EventBus The publisher subscriber mode is used .

Realization

Handwritten publisher subscriber mode

class EventEmitter {
    

    constructor() {
    
        this.events = {
    }
    }
    on(name, fn) {
    
        if (this.events[name]) {
    
            this.events[name].push(fn)
        } else {
    
            this.events[name] = [fn]
        }
    }
    off(name, fn) {
    
        this.events[name] = this.events[name].filter(event => event != fn)
    }
    once(name, fn) {
    
        let one = (...args) => {
    
            fn(...args)
            this.off(name, one)
        }
        this.on(name, one)
    }
    emit(name, ...args) {
    
        this.events[name].forEach(event => {
    
            event.apply(this, args)
        })
    }

}

let ev = new EventEmitter()

let func = function () {
    
    console.log(" I'm Xiao Liu ")
}

ev.on("name",func)

ev.once("name1", function () {
    
    console.log(" I'm Xiao Li ")
})
ev.emit("name1")

ev.emit("name")
//  Log off the corresponding event 
ev.off("name", func)
//  Trigger the corresponding event 
ev.emit("name")

Handwriting observer mode

//  Observed target , Publisher ：Dep
//  Observed target , Publisher ：Dep
class Dep {
    
    constructor() {
    
        //  Record all observers , Subscribers 
        this.subs = []
    }
    //  Add a new observer 
    addSub(sub) {
    
        //  The subscriber exists and has update Method , Just add it to subs Array 
        if (sub && sub.update) {
    
            this.subs.push(sub)
        }
    }
    //  Remove observer 
    removeSub(sub) {
    
        if (this.subs.length) {
    
            let index = this.subs.indexOf(sub)
            if (index > -1) {
    
                this.subs.splice(index, 1)
            }
        }
    }
    //  Publish update notification 
    notify() {
    
        this.subs.forEach(item => {
    
            item.update()
        })
    }
}

//  The observer , Subscribers 
class Watcher {
    
    update() {
    
        console.log("**** Update relevant data ****")
    }
}

let dep = new Dep
let watcher1 = new Watcher()
let watcher2 = new Watcher()

//  Add a new observer 
dep.addSub(watcher1)
dep.addSub(watcher2)
dep.removeSub(watcher2)
//  Release 
dep.notify()