Explication détaillée du modèle de publication-abonnement javascript (avec exemples)

Cet article vous apporte une explication détaillée du modèle de publication-abonnement JavaScript (avec des exemples). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Modèle de publication et d'abonnement

Le modèle de publication/abonnement d'événement (PubSub) nous aide à obtenir un découplage plus lâche dans la programmation asynchrone, même dans les architectures MVC et MVVC. Et le modèle de conception est également indispensable pour la participation du modèle de publication-abonnement.

Avantages : Obtenez un découplage plus profond dans la programmation asynchrone

Inconvénients : Si vous utilisez trop le modèle de publication-abonnement, cela augmentera la difficulté de maintenance

Mise en œuvre publication Mode d'abonnement

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

Le code ci-dessus ne peut que s'abonner d'abord, puis publier. Si vous le publiez directement, une erreur sera signalée. Comment puis-je publier d’abord puis m’abonner ?

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

Après l'avoir modifié en cela, le processus de publication de la fonction d'abord, puis d'abonnement est réalisé. Mais vous ne pouvez que publier d’abord, puis vous abonner, et non l’inverse.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!