图表可视化

js动态注册组件钩子(ES6语法)

2020-03-24  本文已影响0人  _嘿嘿_

1.先注册一个钩子类

eventEmitter.js

export class EventEmitter {
    constructor() {
        this._events = {};
    }

    on(type, fn, context = this) {
        if (!this._events[type]) {
            this._events[type] = [];
        }

        this._events[type].push([fn, context]);
    }

    once(type, fn, context = this) {
        let fired = false;

        function magic() {
            this.off(type, magic);

            if (!fired) {
                fired = true;
                fn.apply(context, arguments);
            }
        }

        this.on(type, magic);
    }

    off(type, fn) {
        let _events = this._events[type];
        if (!_events) {
            return;
        }

        let count = _events.length;
        while (count--) {
            if (_events[count][0] === fn) {
                _events[count][0] = undefined;
            }
        }
    }

    trigger(type) {
        let events = this._events[type];
        if (!events) {
            return;
        }

        let len = events.length;
        let eventsCopy = [...events];
        for (let i = 0; i < len; i++) {
            let event = eventsCopy[i];
            let [fn, context] = event;
            if (fn) {
                fn.apply(context, [].slice.call(arguments, 1));
            }
        }
    }
}

2.实现钩子类

myTest.js

//通过EventEmitter 继承就可以调用里面的方法
export class BScroll extends EventEmitter {
   constructor(el, options) {
      super();
  }
  this.init();
  init(){
     this.on('refresh', () =>{
        //这里写逻辑
     })
  }
    //这里可以调用方法
   this.trigger('refresh');
}

上一篇下一篇

猜你喜欢

热点阅读