Detaillierte Erläuterung des Javascript-Publish-Subscribe-Modells (mit Beispielen)

Dieser Artikel bietet Ihnen eine detaillierte Erklärung des JavaScript-Publish-Subscribe-Modells (mit Beispielen). Freunde in Not können sich darauf beziehen.

Publish-and-Subscribe-Modell

Das Event-Publish/Subscribe-Modell (PubSub) hilft uns, eine lockerere Entkopplung bei der asynchronen Programmierung zu erreichen, selbst in MVC- und MVVC-Architekturen. Und das Entwurfsmuster ist Auch für die Teilnahme am Publish-Subscribe-Modell unverzichtbar.

Vorteile: Erzielen Sie eine tiefere Entkopplung bei der asynchronen Programmierung

Nachteile: Wenn Sie das Publish-Subscribe-Modell zu häufig verwenden, erhöht sich die Schwierigkeit der Wartung

Implementierung Abonnementmodus veröffentlichen

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)   // 发布

Der obige Code kann nur zuerst abonniert und dann veröffentlicht werden. Wenn Sie es direkt veröffentlichen, wird ein Fehler gemeldet. Wie kann ich zuerst veröffentlichen und dann abonnieren?

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]()
    }
}

Nachdem dies geändert wurde, wird der Prozess des ersten Veröffentlichens der Funktion und des anschließenden Abonnierens realisiert. Sie können jedoch nur zuerst veröffentlichen und dann abonnieren, nicht umgekehrt.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Javascript-Publish-Subscribe-Modells (mit Beispielen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!