Detailed explanation of javascript publish-subscribe model (with examples)

This article brings you a detailed explanation of the JavaScript publish-subscribe model (with examples). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Publish and subscribe model

The event publish/subscribe model (PubSub) helps us achieve looser decoupling in asynchronous programming, even in MVC and MVVC architectures And the design pattern is also indispensable for the participation of the publish-subscribe model.

Advantages: Achieve deeper decoupling in asynchronous programming

Disadvantages: If you use the publish-subscribe model too much, it will increase the difficulty of maintenance

Implement publishing Subscription mode

var Event = function() {
    this.obj = {}
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
}

Event.prototype.emit = function() {
    // 取第一个参数，作为eventType
    var eventType = Array.prototype.shift.call(arguments);
    //  获取事件数组
    var arr = this.obj[eventType];
    var len = arr.length;
    // 循环数组，一次执行其中的函数
    for(var i=0;i<len;i++) {
        // 直接调用arr[i]，其this指向为undefined（严格模式下）
        // 因此用apply将this指向arr[i]
        // 数组shift函数取出第一个参数，将剩下的参数传入函数中
        arr[i].apply(arr[i],arguments)
    }
}

var ev = new Event()
ev.on('click',function(a) {  // 订阅
    console.log(a)
})

ev.emit('click',1)   // 发布

The above code can only implement subscription first and then publish. If you publish it directly, an error will be reported. How can I publish first and then subscribe?

var Event = function() {
    this.obj = {}；
    this.cacheList = [];
}

Event.prototype.emit = function() {
    const args = arguments;  //函数参数
    const that = this;  //this指向,保持cache函数的this指向
    function cache() {
        var eventType = Array.prototype.shift.call(arg)
        var arr = that.obj[eventType]
        for (let i = 0; i < arr.length; i++) {
          arr[i].apply(arr[i], arg)
        }
    }
    this.cacheList.push(cache)  // 采用闭包，保持对emit函数中参数和that的引用
}

Event.prototype.on = function(eventType,fn) {
    if(!this.obj[eventType]) {
        this.obj[eventType] = []
    }
    this.obj[eventType].push(fn)
    // 在订阅函数中执行emit函数中缓存的函数
    for (let i = 0; i < this.cacheList.length; i++) {
        this.cacheList[i]()
    }
}

After changing it to this, the process of publishing the function first and then subscribing is realized. But you can only publish first and then subscribe, not the other way around.

The above is the detailed content of Detailed explanation of javascript publish-subscribe model (with examples). For more information, please follow other related articles on the PHP Chinese website!