js的事件訂閱

學習了https://blog.csdn.net/Mandyucan/article/details/80820139這位兄弟的博客。
這段時間用到事件訂閱的例子不少於是就來學習了一下,事件訂閱在js總的webview;node的事件發送和接收;vue的組件間的事件通信以及事件巴士等是很常用的。

var eventCenter = {
      sub: function(name, callback) {
        this.argus = this.argus || {};//已經有事件用已經有的this.argus
        this.argus[name] = this.argus[name] || [];
        this.argus[name].push(callback);//對應添加的事件名已經有了就在加到該事件的數組中
      },
      pub: function(name, obj) {
        var args = Array.prototype.slice.call(arguments, 0);//arguments(Object)是傳入的參數這裏取到第一個;也可以直接通過函數傳入參數的形式
        var name = args.shift();
        if (!this.argus || !this.argus[name]) {//沒有傳入參數就不往下執行
          return this;
        }
        for (var i = 0; i < this.argus[name].length; i++) {
          this.argus[name][i].apply(this, args);//觸發訂閱事件的回調事件,apply(this, args)是爲了拿到傳入的參數;this.argus[name][i](args)也可以實現
        }
      }
    };
    eventCenter.sub("a", function(res) {//添加事件
      console.log(12345678,res)
    });
    eventCenter.pub("a", {name: 1});//觸發訂閱事件發送參數

這裏有用到call和apply這兩個方法在很多封裝的地方很常用到。
第一個參數是改變this的指向了第二個參數是傳入到這個方法的參數並執行這個方法。
call能傳入多個參數;apply要傳入數組。

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