这个模式叫什么：.on('eventName'，function(){...});？

Question

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

我想更好地了解幕后的结构，它能做什么，到底发生了什么等等，但从谷歌搜索中找不到太多，这个模式有名字吗？是不是有人想出了这个模式？

据我目前所知，它看起来和addEventListener很相似，有什么特别的区别吗？

编辑:只是为了把事情弄清楚一点，我希望在我的Node JS应用程序中实现某种类型的事件处理，理想情况下希望能够触发如下所示的事件，并且正在寻找最佳实践的研究-只是找不到好的搜索词等。

var myNewObject = new MyLibrary();

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

...

});

谢谢!

Answer 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关联。

每次您想要触发一个“人工”事件(由您设计的事件)时，您需要查找事件列表并找到该事件的所有回调。

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

Answer 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')
});

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

Answer 3

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

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

在Emitter plugin上查看