js-发布订阅模式

jiezi

5 年前

1. 回调函数
2. 事件监听
3. 发布订阅
4.Promise 对象
5.Generator 函数

 发布 / 订阅 模式
比方说淘宝购物，小红在淘宝上看到一双鞋，但是卖光了，小红联系卖家什么时候有货，卖家告诉小红需要等一星期，卖家说如果喜欢可以等有货的时候
再通知你，所以小红收藏了该店铺，但是同时，小明，小花也喜欢这款鞋，也收藏了改店铺，等鞋子到了就会依次通知小红，小明，小花。这里卖家属于发布者，小红，小明属于订阅者

function Public(){this.handles = {}
    // 订阅事件
    this.addEventListener  = function(eventType,fn){if(!(eventType in this.handles)){this.handles[eventType] = []}
        this.handles[eventType].push(fn)
        console.log(this.handles)
        return this;
    },
    // 触发事件
    this.dispatchEvent = function(eventType){var handlerArgs = Array.prototype.slice.call(arguments,1);
        if(!this.handles[eventType]){throw Error("该名称未发布")
        }
        for(var i=0;i<this.handles[eventType].length;i++){this.handles[eventType][i].apply(this,handlerArgs)
        }
        return this;
    }
    // 删除订阅事件
    this.removeEventListener = function(eventType,handler){var currentEvent = this.handles[eventType];
        if(!handler){delete(this.handles[eventType])
            return
        }
        if (currentEvent) {const index = this.handles[eventType].findIndex(ele => ele.name === handler.name)
            this.handles[eventType].splice(index,1)
        }
        return this;
    }
}

var publish = new Public();
publish.addEventListener("xiaohong",function tellHong(data){console.log(`${data}`)
})
publish.addEventListener("xiaoming",function tellMing(data){console.log(`${data}`)
})
publish.dispatchEvent("xiaohong","小红你的鞋子到了")
publish.dispatchEvent("xiaoming","小明你的鞋子到了")
publish.removeEventListener("xiaohong")

JavaScript 中有五种异步编程的方式