这种模式的名称是什么：.on('eventName', function(){...});？ [关闭]答案

【问题标题】：Whats the name of this pattern: .on('eventName', function(){...});? [closed]这种模式的名称是什么：.on('eventName', function(){...});？ [关闭]
【发布时间】：2014-05-11 23:09:17
【问题描述】：

您知道 jQuery、socket.io、peerjs 和其他一些用于事件处理的库/框架中存在的.on('eventName', function(){...}); 模式，它叫什么？

我想更好地了解幕后结构、它能做什么、实际发生了什么等，但在 Google 搜索中未能找到太多信息，该模式是否有名称?有人具体想出了这种模式吗？

据我目前所能收集到的，它似乎与addEventListener 相似，有什么具体区别吗？

编辑：只是为了澄清一点，我希望在我的一个 Node JS 应用程序中实现某种类型的事件处理，并且理想情况下希望能够触发将被捕获的事件，如下所示，并且正在寻找用于研究最佳实践 - 只是无法找出好的搜索词等。

var myNewObject = new MyLibrary();

myNewObject.on('event_1', function(param1, param2){

...

});

谢谢！

【问题讨论】：

api.jquery.com/on
这叫做有两个参数的函数？
事件回调模式——见here。每当您将函数作为参数传递时，该参数被视为“回调”，而事件处理的东西非常标准，只是稍微关注定义的简单性。
@OP - 对于节点，您通常会为此使用 EventEmitter 类，而不是自己滚动。
@adeneno -- 我知道jQuery.on() 函数只是一个有两个参数的函数，一个是字符串，一个是函数。但我很确定 OP 也知道这一点——这就是为什么我说它过于简单化了。 OP 根本没有问这个问题，OP 想知道“你如何用一个简单的名称来称呼这个基于事件驱动回调的架构。” -- 这样他就可以使用该名称进行 Google 搜索并了解更多信息。

标签： javascript jquery node.js ecmascript-5

【解决方案1】：

如果你自己动手，这是一种方法：

notJQuery = function() {
    if (typeof(notJQuery.eventList) === 'undefined') {
        notJQuery.eventList = {};
    }

    this.on = function(events, callback) {
        events = events.split(' ');
        for (i in events) {
            eventName = events[i];
            notJQuery.eventList[eventName][] = callback;
        }
    };

    return this;
};

您需要一个事件列表来保存所有 eventName => callback 关联。

每次您想要触发“人工”事件（由您设计的事件）时，您都会查找事件列表并找到该事件的所有回调。

每次为真实事件（不是您设计的）更新事件处理程序时，您都会查找事件列表并将该事件的回调附加到系统提供的事件处理程序/侦听器。

【讨论】：

【解决方案2】：

这不是一个真正的模式，它实际上只是一个带有两个参数的函数。

通常，您从拥有一个主对象开始，jQuery 使用 $，然后返回该对象的一个新实例。

然后附加属性，例如 on()，它们是接受参数的函数，就像任何其他函数一样。

非常简化，看起来像这样

var $ = function(selector) {
    if (!(this instanceof $)){
        var instance = new $;
        instance.elem = document.querySelector(selector);
        return instance;
    }else{
        return this;
    }
}

$.prototype.on = function(event, callback) {
    this.elem.addEventListener(event, callback, false);
}

$('#test').on('click', function() {
    alert('This is how it works')
});

FIDDLE

我刚刚在两分钟内创建了一个看起来像 jQuery 的东西。当然它少了几千行代码并且相当有限，但它展示了它是如何工作的，它只是对象和函数，并没有真正的特殊模式。

【讨论】：

【解决方案3】：

称为可观察模式，用于订阅javascript对象或插件的事件和/或方法。

它们与callbacks 类似，但使用订阅者模式，您可以单独订阅/取消订阅，而不必将所有逻辑放在一个回调函数中。

关注Emitter plugin

【讨论】：