JavaScript自定義事件

標題JavaScript自定義事件

最近遇到一個基於jQuery專案,專案中的功能節點頁面都是通過iframe實現,但是各個iframe之間有時需要相互通訊,互相相應一些事件,為了更愉快的編碼所以想到了自定義事件,還別說用起來竟然有點像vue的元件通訊

top.events = {
    on: function (name, func) {
      if(!this.handles){
        this.handles = {};
      }
      if(!this.handles[name]){
        this.handles[name] = ``;
      }
      else this.handles[name] = func;
    },
    emit: function (name) {
      if(this.handles[name]){
        //arguments是偽陣列所以通過call來使用slice
        this.handles[name].apply(null, Array.prototype.slice.call(arguments, 1));
      }
    },
    destory: function (name) {
      if(this.handles && this.handles[name]) delete this.handles[name];
    }
  };

//繫結
top.events.on(`test`, function() {});

//觸發
top.events.emit(`test`, param));

//銷燬
top.events.destory(`test`);