Question

大家好，我目前正在Redux中进行异步编程。

我寻求信息来创建精致的Redux动作，这与Redux的副作用以及此类主题有关。

我在this article中看到了一个片段，该片段建议创建侦听器以完善代码。

以下是代码段：

// Redux Action
function fetchUser(id) {
  return { type: 'FETCH_USER' };
}

// in some other place, a function listening the Redux Action
// (pseudo-code)
when('FETCH_USER').do((dispatch) => {
  fetch('...').then(user => {
    dispatch({ type: 'FETCHED_USER' });
  }, error => {
    dispatch({ type: 'ERRORED_USER' });
  });
})

很棒，但是如何在Javascript中手动创建函数侦听器呢？如果不编写一些回调函数，我将不知道如何做到这一点，

谢谢

Answer 1

JS中的自定义事件列表器：

document.getElementById("myBtn").addEventListener("click", displayDate);

function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}

<button id="myBtn">Try it</button>

<p id="demo"></p>

addEventListener（）方法将事件处理程序附加到指定的元素。

addEventListener（）方法将事件处理程序附加到元素，而不会覆盖现有的事件处理程序。

您可以将多个事件处理程序添加到一个元素。

您可以将多个相同类型的事件处理程序添加到一个元素，即两个“ click”事件。

您可以将事件侦听器不仅添加到HTML元素，还可以添加到任何DOM对象。即窗口对象。

addEventListener（）方法使控制事件对冒泡的反应更加容易。

使用addEventListener（）方法时，JavaScript与HTML标记分离，以提高可读性，并且即使您不控制HTML标记，也可以添加事件侦听器。

您可以使用removeEventListener（）方法轻松删除事件监听器。

引用：http://www.kaizou.org/2010/03/generating-custom-javascript-events/

Answer 2

最简单的方法是使用event-emitter模块：https://www.npmjs.com/package/event-emitter

尽管您对VanillaJS实现感兴趣，但是这里有一个事件发射器的示例：

var Emitter = {
    _callbacks: {},
    on: function(type, callback) {
        if (!this._callbacks[type]) {
            this._callbacks[type] = [];
        }

        this._callbacks[type].push(callback);
    },
    emit: function (type /* arguments */) {
        if (!this._callbacks[type]) {
            // No event listeners of this type
            return;
        }
        // This creates an array with the remaining arguments after the first
        var args = Array.prototype.slice.call(arguments, 1);
        this._callbacks[type].forEach(callback => {
            // This runs the callbacks with the args provided to the funciton other than type
            callback.apply(null, args);
        });
    }
}

请注意，这可以在JS工作的任何地方使用，并且不需要运行DOM。

您可以轻松地将其编写为ES6类，从而使您可以创建许多发射器。

这里还有一些语法，可以在ES6中大大简化，但是我是用旧的skool javascript编写的，以实现兼容性

编辑：我在您的评论中注意到您想听功能。

最简单的方法是使用包裹它并添加发射器的高阶函数，如下所示：

var emittingFunction = function(toEmit, func) {
    return function (/* arguments */) {
        // run the function
        var result = func.apply(null, arguments)
        // Emit the event after the function runs
        Emitter.emit(toEmit, result)
        return result;
    }
}

function tester(name) {
    return 'hello ' + name;
}

// Create our new function with the HOF
var watchedTester = emittingFunction('tester.called', tester);

// Now register a listener for our new event
Emitter.on('tester.called', function (result) {
    console.log('Listened to tester', result);
})

tester() // no log - returns hello
watchedTester() // logs 'Listened to tester hello undefined'
watchedTester('world') // logs 'Listened to tester hello world'

Redux.js-可以手动创建一个函数来监听Javascript中的另一个函数吗？

2 个答案: