javascript - 如何用原生js实现 过滤器（类似express的中间件）的设计 ?

问题描述

问 题

每次都要写一堆兼容代码

var btn = document.getElementById('button');

btn.addEventListener('click', function(e) {
  // 处理兼容性
  e = e || window.event;
  e.target = e.target || e.srcElement;
  e.preventDefault = e.preventDefault || function() {
    e.returnValue = false;
  };
  e.stopPropagation = e.stopPropagation || function() {
     e.cancelBubble=true;
  };

  // 业务逻辑
  console.log('处理业务逻辑');
});

以前我是抽出来一个公共的方法来处理event

var btn = document.getElementById('button');

btn.addEventListener('click', function(e) {
  // 处理兼容性
  dealEvent(e);
  // 业务逻辑
  console.log('处理业务逻辑');
});

function dealEvent(e) {
  e = e || window.event;
  e.target = e.target || e.srcElement;
  e.preventDefault = e.preventDefault || function() {
    e.returnValue = false;
  };
  e.stopPropagation = e.stopPropagation || function() {
     e.cancelBubble=true;
  };
}

上面代码看起来已经蛮好了，但是看了express的中间件设计后，我突然想这么干：

btn.use('click', function(e, next) {
  e = e || window.event;
  e.target = e.target || e.srcElement;
  e.preventDefault = e.preventDefault || function() {
    e.returnValue = false;
  };
  e.stopPropagation = e.stopPropagation || function() {
     e.cancelBubble=true;
  };
  next();// 不调用next就不会继续匹配下面的click
});

btn.addEventListener('click', function(e, next) {
  cosole.log('111业务逻辑111'); // 此时调用e，已经不存在兼容问题， 代码非常养眼
});
btn.addEventListener('click', function(e, next) {
  cosole.log('222业务逻辑222'); // 此时调用e，已经不存在兼容问题， 代码非常养眼
});

//////////////////////////////////////////////////////////////////////////////////////////

下面是我想了一个出来，但是有很多不如意的地方，不知道如何修改

function emitterClass() {
    this._events = {}
}

emitterClass.prototype.on = function(type, fn) {
    this._events[type] = this._events[type] || [];
    if (this._events[type].indexOf(fn) === -1) {
        this._events[type].push(fn);
    }
}

emitterClass.prototype.emit = function(type) {
    var self = this, args = [].slice.call(arguments, 1);
    this._events[type] = this._events[type] || [];
    args.push(next);

    var fn = self._events[type].shift();
    fn.apply(self, args);

    function next() {

        var fn = self._events[type].shift();
        if (arguments.length !== 0) {
            fn.apply(self, arguments);
        }
        else {
            fn.apply(self, args);
        }
    }
}

var obj = new emitterClass();

obj.on('customEvent', function(data, next) {
    data = '封装[' + data +']';
    next(data, next);
});


obj.on('customEvent', function(data, next) {
    console.log(data);
    next(data, next);
});

obj.on('customEvent', function(data, next) {
    console.log(data);
});

obj.emit('customEvent', "原始数据");
obj.emit('customEvent', "原始数据");// error 只能调用一次

上面这个demo只能触发一次emit，第二次emit就失效了，而且每次都要手动调用一次next。

我希望的api是酱紫的：

obj.addFilter('customEvent', function(data, next) {
    data = '封装[' + data +']';
    next(data, next);
});

obj.on('customEvent', function(data) {
    console.log(data); 
});

obj.on('customEvent', function(data) {
    console.log(data);
});

obj.emit('customEvent', "原始数据");
obj.emit('customEvent', "原始数据");// 可以多次调用

解决方案

我用 ES6，以你的思路为基础写了一个 Emitter。注意这里把中间件和事件处理区分开了(你的是没区分开的)。中间件是在事件处理函数之前进行调用，对事件对象进行一些提前操作。完成之后进入事件处理环节，这个时候所有处理函数得到的事件对象应该都是同一个。

class Emitter {
    constructor() {
        this._events = {};
        this._middles = {};
    }

    // 注册中间件
    use(type, middle) {
        const list = this._middles[type];
        if (!list) {
            this._middles[type] = middle;
            return;
        }

        let current = list;
        while (current.next) {
            current = current.next;
        }
        current.next = middle;
    }

    // 注册事件
    on(type, fn) {
        const events = this._events[type] = this._events[type] || [];
        if (events.indexOf(fn) < 0) {
            events.push(fn);
        }
    }

    // 触发事件
    emit(type, data) {
        // 先生成 Event 对象
        const e = {
            type: type,
            original: data
        };

        // 调用 middleware
        const middle = this._middles[type];

        if (middle) {
            // 为了能不断的 next 下去，这里用一个 wrapper，
            // 每次调用的时候都会调用这个 wrapper 生成一个可以继续调用的
            // next() 来进行调用
            function wrapNext(m) {
                return function() {
                    if (m.next) {
                        m.next(e, wrapNext(m.next));
                    }
                };
            }

            // 递归调用开始了
            middle(e, wrapNext(middle));
        }

        // 调用事件处理，循环调用就好，不需要 shift
        const events = this._events[type] = this._events[type] || [];
        events.forEach(fn => {
            fn.call(this, e);
        });
    }
}


var obj = new Emitter();

obj.use("customEvent", (e, next) => {
    console.log("m1", e);
    e.data = "world";
    next();
    console.log("m1 end", e);
});

obj.use("customEvent", (e, next) => {
    console.log("m2", e);
    e.cancelable = true;
    next();
});

obj.use("customEvent", (e, next) => {
    console.log("m3", e);
    e.author = "james";
    next();
});

obj.on("customEvent", e => {
    console.log("e1", e);
});

obj.on("customEvent", e => {
    console.log("e2", e);
});

obj.emit("customEvent", "原始数据");

这篇关于javascript - 如何用原生js实现 过滤器（类似express的中间件）的设计 ?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！