問題描述
是否有任何事件驅動架構 jQuery 插件?
Are there any Event Driven Architecture jQuery plugins?
訂閱者訂閱中間的事件處理函數，并傳入一個回調方法，以及他們正在監聽的事件的名稱......
The subscribers subscribe to the event handler in the middle, and pass in a callback method, as well as the name of the event they are listening for...
即兩個綠色訂閱者將監聽 p0 事件.藍色的訂閱者將監聽 p1 事件.
i.e. The two green subscribers will be listening for p0 events. And the blue subscriber will be listening for p1 events.
- 一個 p0 事件被觸發到事件處理程序
- 事件處理程序通知它的訂閱者該事件，調用他們在訂閱時指定的回調方法步驟 1:訂閱.
請注意，藍色訂閱者不會收到通知，因為它沒有偵聽 p0 事件.
Note that the blue subscriber is not notified because it was not listening for p0 events.
p1 事件被另一個組件觸發
The p1 event is fired by another component
除了現在藍色訂閱者通過它的回調接收事件，而其他兩個綠色訂閱者沒有接收到事件之外，與之前一樣.
Just as before except that now the blue subscriber receives the event through its callback and the other two green subscribers do not receive the event.
Flickr 上 leeand00 的圖片
我似乎找不到，但我猜他們只是在 Javascript/jquery 中將其稱為其他名稱
I can't seem to find one, but my guess is that they just call it something else in Javascript/jquery
還有這種模式的名稱嗎?因為它不僅僅是一個基本的發布者/訂閱者，所以我認為它必須被稱為其他名稱.
Also is there a name for this pattern? Because it isn't just a basic publisher/subscriber, it has to be called something else I would think.
推薦答案
您可能不需要插件來執行此操作.首先，DOM 本身完全是事件驅動的.您可以使用事件委托來監聽根節點上的所有事件(jQuery live 使用的一種技術).要處理可能與 DOM 無關的自定義事件，您可以使用普通的舊 JavaScript 對象來完成這項工作.我寫了一篇博文，介紹在 MooTools 中使用只需一行代碼.
You probably don't need a plugin to do this. First of all, the DOM itself is entirely event driven. You can use event delegation to listen to all events on the root node (a technique that jQuery live uses). To handle custom events as well that may not be DOM related, you can use a plain old JavaScript object to do the job. I wrote a blog post about creating a central event dispatcher in MooTools with just one line of code.
var EventBus = new Class({Implements: Events});
在 jQuery 中也很容易做到.使用作為所有事件的中央代理的常規 JavaScript 對象.任何客戶端對象都可以發布和訂閱此對象上的事件.請參閱這個相關的問題.
It's just as easy to do in jQuery too. Use a regular JavaScript object that acts as a central broker for all events. Any client object can publish and subscribe to events on this object. See this related question.
var EventManager = {
subscribe: function(event, fn) {
$(this).bind(event, fn);
},
unsubscribe: function(event, fn) {
$(this).unbind(event, fn);
},
publish: function(event) {
$(this).trigger(event);
}
};
// Your code can publish and subscribe to events as:
EventManager.subscribe("tabClicked", function() {
// do something
});
EventManager.publish("tabClicked");
EventManager.unsubscribe("tabClicked");
或者如果你不關心暴露 jQuery，那么只需使用一個空對象并直接在 jQuery 包裝的對象上調用 bind 和 trigger.
var EventManager = {};
$(EventManager).bind("tabClicked", function() {
// do something
});
$(EventManager).trigger("tabClicked");
$(EventManager).unbind("tabClicked");
包裝器只是用來隱藏底層的 jQuery 庫，以便您以后可以在需要時替換實現.
The wrappers are simply there to hide the underlying jQuery library so you can replace the implementation later on, if need be.
這基本上是 Publish/Subscribe 或 觀察者模式，一些很好的例子是 Cocoa 的 NSNotificationCenter 類，EventBus 模式由 Ray Ryan 在 GWT 社區和其他幾個社區推廣.
This is basically the Publish/Subscribe or the Observer pattern, and some good examples would be Cocoa's NSNotificationCenter class, EventBus pattern popularized by Ray Ryan in the GWT community, and several others.
這篇關于事件驅動架構的jQuery插件?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！