Jquery观察者模式 [英] Jquery Observer pattern

问题描述

我一直在互联网上查看在jquery中实现观察者模式的例子。

I've been looking over the internet for examples of implementing the observer pattern in jquery.

我想这样做

observer1.observe(subject);
observer2.observe(subject);

为观察者定义一些自定义事件回调

Define some custom event callbacks for the observers

observer1.bind('customEvent', function(contextData) {
  //Some code
});
observer1.bind('anotherCustomEvent', function(contextData) {
  //Some code  
});
observer2.bind('customEvent', function(contextData) {
  //Some code  
});

然后以下行将触发两个观察者的customEvent回调

The following line would then trigger the customEvent callbacks of both observers

subject.trigger('customEvent', contextData);

而以下内容只会在observer1上触发anotherCustomEvent，因为observer2没有绑定的自定义事件

while the following would fire anotherCustomEvent on observer1 only, since observer2 doesn't have that custom event binded

subject.trigger('anotherCustomEvent', contextData);

互联网上的指南更为通用：

Guides on the internet is more general:

$( document ).on( "topicName" , function () {
  //..perform some behaviour
});

$( document ).trigger( "topicName" );

（例如 http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjquery ）
我看不出上面的代码如何用来完成什么我在找。

(Example from http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjquery) I can't see how the above code can be used to accomplish what I'm looking for.

要么我必须这样做（如果我保持它像上面的例子）：

Either i would have to make it like this (if I keep it like the above example):

$(document).on("customEvent", function () {
  observer1.trigger("customEvent");
  observer2.trigger("customEvent");
});

$(subject).click(function() { 
  $(document).trigger("customEvent");
});

或更好一点：

$(subject).click(function() { 
  observer1.trigger("customEvent");
  observer2.trigger("customEvent");
});

无论哪种方式，我都不得不编辑主题点击回调或document-customEvent-回调而不是告诉观察者订阅主题。

Either way I'm stuck with having to edit the subject-click-callback or document-customEvent-callback instead of telling the observer to subscribe to the subject.

我是否误解了观察者模式或有没有办法实现我正在寻找的东西？

Have I misunderstood observer pattern or is there a way to achieve what I'm looking for?

http://addyosmani.com/resources/essentialjsdesignpatterns / book /＃observerpatternjavascript 在该章中进一步提及发布/订阅模式。这对我来说可能是一种方式，但我错过了示例背后的代码。

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#observerpatternjavascript mention Publish/Subscribe Pattern a bit further down in that chapter. That could be a way for me, but I'm missing the code behind the example.

推荐答案

来自你的评论：

当你必须告诉主题哪些元素由选择器而不是具有列表的主题触发时，我无法看到这是如何实现的观察者可以注册

I just can't see how this is achieved when you have to tell the subject which elements to trigger by selectors instead of the subject having a list that the observer can register to

如果我错了，请纠正我，但你似乎误解了模式是如何实现的jQuery的。您没有告诉主题触发哪些元素，并且主题没有观察者可以注册的列表。它的工作原理如下：

Please correct me if I'm wrong, but you seem to be misunderstanding how the pattern was implemented in jQuery. You don't "tell the subject which elements to trigger", and the subject doesn't have "a list that the observer can register to" either. It works like this:

• 主题/发布者发出/触发某些事件（在您定义的某些情况下）。


• 观察者/订阅者监听某些事件。它保留了它订阅的事件列表。


• 这都是基于DOM事件的，所以它受DOM事件模型的限制。

例如，请考虑以下HTML：

For example, consider the following HTML:

<div id="div1">div 1</div>
<div id="div2">div 2</div>

让内部div触发一个名为'custom'的自定义事件。您可以定义何时应该发生这种情况，在此示例中，单击它们时会发生这种情况：

Let's make the inner divs trigger a custom event called 'custom'. You define when that should happen, on this example this will happen when they are clicked:

$('div').on('click', function(e) {
    $(this).trigger('custom');
});

现在让我们让文件元素订阅该自定义事件：

Now let's make the document element subscribe to that custom event:

$(document).on('custom', function(e) {
    console.log('document is handling custom event triggered by ' + e.target.id);
});

当其中一个div触发自定义事件时，会通知观察者/订阅者并发送消息记录到控制台。

When the custom event is triggered by one of the divs, the observer/subscriber is notified and a message is logged to the console.

该示例使用 document 作为观察者，原因是：事件冒出DOM树，只能被触发它的祖先元素捕获。由于 document 是DOM树的根，因此它可以查看所有事件。如果＃div1 是我们的观察者，它只会看到由＃div1 本身触发的事件，但不会触发由＃DIV2 。

The example uses document as the observer for a reason: events bubble up the DOM tree, and can only be caught by elements that are ancestors of the one that triggered it. Since document is the root of the DOM tree, it can see all events. If #div1 was our observer, it would only see events triggered by #div1 itself, but not the ones triggered by #div2.

也许这种限制让你感到困惑？

Maybe that limitation is what confused you?

那里是规避这种限制的方法，但通常，如果你想根据＃div2 ＃div1 做点什么$ c>，你只需要在文档元素（或两个div最接近的共同祖先）上设置的回调中执行此操作。无论如何，似乎你真的想要一个替代品，所以这里有一个jQuery插件形式：

There are ways to circumvent that limitation, but usually, if you want to do something to #div1 based upon an event triggered by #div2, you just do it from the callback you have setup on the document element (or the closest common ancestor to both divs). Anyway, it seems you really want an alternative, so here is one in the form of a jQuery plugin:

$.fn.observe = function(eventName, callback) {
    return this.each(function(){
        var el = this;
        $(document).on(eventName, function(){
            callback.apply(el, arguments);
        })
    });
}

您可以这样使用：

$('#div1').observe('custom', function(e) {
    // do something
});

实例： http://jsfiddle.net/JwJsP/1

这篇关于Jquery观察者模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！