Question

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

我希望能够更好地了解幕后的结构，它能做什么，真正发生的事情等等，但是未能通过Google搜索获得更多信息，是不是模式有一个名字？是否有人特定想出这种模式？

到目前为止我可以收集的内容似乎与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关联。

每当你想触发一个＆＃34;仿造＆＃34; event（由您设计的事件）您查找事件列表并查找该事件的所有回调。

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

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

FIDDLE

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

Answer 3

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

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

查看Emitter plugin

这个模式的名称是什么：.on（'eventName'，function（）{...}）;?

3 个答案: