原生js《發佈訂閱》功能

原生js的“eventemitter 發佈訂閱”其實跟vue的“bus 中央事件總線”是同一種東西,而我只是用js實現一版出來而已

 

組件代碼:

(function () {
    var msgService = function msgService() {};
    msgService.prototype.on = function (name, callback) { // 接收
        var callbacks = this[name];
        if (callbacks) {
            callbacks.push(callback);
        } else {
            this[name] = [callback];
        }
    };
    msgService.prototype.dispatch = function (name, option) { // 廣播
        let callbacks = this[name];
        callbacks && callbacks.forEach((callback) => callback(option));
    };
    window.msgService = msgService;
})()

調用代碼:

var MsgService = new msgService();
MsgService.on("test1", function (data) {
     // 接收函數被觸發後做點事情
  console.log("test1被調用:", data);
});
MsgService.dispatch("test1", "我是傳參"); // 可重複調用多次
MsgService.dispatch("test1", "我是傳參"); // 可重複調用多次
MsgService.dispatch("test1", "我是傳參"); // 可重複調用多次

MsgService.on("test2", function (data) { // 接收函數被觸發後做點事情 console.log("test2被調用:", data); }); MsgService.dispatch("test2", "我是傳參"); // 可重複調用多次 MsgService.dispatch("test2", "我是傳參"); // 可重複調用多次 MsgService.dispatch("test2", "我是傳參"); // 可重複調用多次

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章