美文网首页图表可视化
js动态注册组件钩子(ES6语法)

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

作者: _嘿嘿_ | 来源:发表于2020-03-24 17:09 被阅读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');
    }
    
    

    相关文章

      网友评论

        本文标题:js动态注册组件钩子(ES6语法)

        本文链接:https://www.haomeiwen.com/subject/oytayhtx.html