jquery - Inter-component communication in JavaScript - Stack Overflow

admin管理员组

文章数量:1025202

I have a need for inter-ponent munication in a web application and am considering different ways to acplish this. I have some ideas, but would wele other ideas.

First, a quick and simple example. I have two separate ponents on a page that are loaded asynchronously. By ponent, I mean a chunk of HTML that has a JavaScript object associated with it that includes jQuery-based behaviors on nodes in the html. When a user interacts with one ponent, changes should take place in the other ponent, and vice-versa.

The key thing to remember here is that each ponent should be a self-contained unit. It could be re-used in different parts of an application, or even different applications. So it doesn't know about the existence of the other ponents on the page.

My current thoughts on a solution involve having ponents listen for custom events that they are interested in as well as sending custom events when an action has taken place. Therefore, each ponent listens for events that are triggered by the other one.

The problem is that because of the async loading, one ponent might take longer to load than the other. There is a possibility that an event might get sent too soon and be lost. In some situations this might be fine, but in some cases I need to make sure that all events a ponent sends get consumed.

So here's some related questions:

1. What happens to an event after it is triggered? Does it just disappear if there are no listeners at the time it was triggered?

2. Is there a way to detect if a triggered even was consumed or lost?

3. What are some good ways for each ponent to know about the other ponents?

4. Are there any existing open-source JavaScript projects or jQuery plugins that deal with these types of things?

In regards to question #3, I'm thinking that each ponent could send out some sort of register event that includes the types of events that it listens to and a list of ponents that it has registered with. Components would listen for these register events. Some sort of registration logic using timers would be used to make sure the right ponents get registered together during the ponent loading process. Once the registration has pleted, then the ponents would be able to send their normal events.

I have a need for inter-ponent munication in a web application and am considering different ways to acplish this. I have some ideas, but would wele other ideas.

First, a quick and simple example. I have two separate ponents on a page that are loaded asynchronously. By ponent, I mean a chunk of HTML that has a JavaScript object associated with it that includes jQuery-based behaviors on nodes in the html. When a user interacts with one ponent, changes should take place in the other ponent, and vice-versa.

The key thing to remember here is that each ponent should be a self-contained unit. It could be re-used in different parts of an application, or even different applications. So it doesn't know about the existence of the other ponents on the page.

My current thoughts on a solution involve having ponents listen for custom events that they are interested in as well as sending custom events when an action has taken place. Therefore, each ponent listens for events that are triggered by the other one.

The problem is that because of the async loading, one ponent might take longer to load than the other. There is a possibility that an event might get sent too soon and be lost. In some situations this might be fine, but in some cases I need to make sure that all events a ponent sends get consumed.

So here's some related questions:

1. What happens to an event after it is triggered? Does it just disappear if there are no listeners at the time it was triggered?

2. Is there a way to detect if a triggered even was consumed or lost?

3. What are some good ways for each ponent to know about the other ponents?

4. Are there any existing open-source JavaScript projects or jQuery plugins that deal with these types of things?

In regards to question #3, I'm thinking that each ponent could send out some sort of register event that includes the types of events that it listens to and a list of ponents that it has registered with. Components would listen for these register events. Some sort of registration logic using timers would be used to make sure the right ponents get registered together during the ponent loading process. Once the registration has pleted, then the ponents would be able to send their normal events.

• javascript
• jquery
• dom-events

Share Improve this question Follow edited Dec 18, 2022 at 15:47 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 6, 2010 at 19:41 TaurenTauren 27.3k4444 gold badges134134 silver badges169169 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Message queuing is indeed what you seem to be looking for. I'm sure you can envision various schemes involving an observer object listening for custom events, receiving messages, playing with timing and sequence, throttling, broadcasting, etc. But before getting into all that, take a look at this jQuery message queuing plug-in. Might be a good starting point.

Web services are a good model to reference here. When you have interconnected web services that are used for cloud puting (or any distributed puting platform) they usually implement some kind of message queue or "bus" between them.

You might think about creating a global message queue that handles "events" and can either publish it to subscribers or hold on to it until an action is taken on it (usually called a job).

I'm not sure if this totally encapsulates what you're trying to do, but it sounds like an open source project like JavaScriptMVC may be useful to you. This open source framework lets the controllers handle event delegation and provides some of that separation that you're looking for. It also leverages jQuery under the hood.

The site is a little hard to navigate (or at least find a lot of concrete information) but the intro video is useful (12 minutes in length).

Hope this helps! Good luck!

Something else to consider around event management are the Reactive Extensions for JavaScript from Microsoft (RxJS). It is along the same kind of lines of the controller in JavaScriptMVC where you register events in Observable sequences, but then you can interact with them in LINQ-like syntax.

Matthew Podwysocki has a number of good blog posts about working with RxJS. Here's a few good posts:

Introduction to RxJS (good intro)
Error Handling Pt. 2 with links to his many other posts

And a link to some hands on labs for RxJS.

Hopefully this also helps!

I have a need for inter-ponent munication in a web application and am considering different ways to acplish this. I have some ideas, but would wele other ideas.

First, a quick and simple example. I have two separate ponents on a page that are loaded asynchronously. By ponent, I mean a chunk of HTML that has a JavaScript object associated with it that includes jQuery-based behaviors on nodes in the html. When a user interacts with one ponent, changes should take place in the other ponent, and vice-versa.

The key thing to remember here is that each ponent should be a self-contained unit. It could be re-used in different parts of an application, or even different applications. So it doesn't know about the existence of the other ponents on the page.

My current thoughts on a solution involve having ponents listen for custom events that they are interested in as well as sending custom events when an action has taken place. Therefore, each ponent listens for events that are triggered by the other one.

The problem is that because of the async loading, one ponent might take longer to load than the other. There is a possibility that an event might get sent too soon and be lost. In some situations this might be fine, but in some cases I need to make sure that all events a ponent sends get consumed.

So here's some related questions:

1. What happens to an event after it is triggered? Does it just disappear if there are no listeners at the time it was triggered?

2. Is there a way to detect if a triggered even was consumed or lost?

3. What are some good ways for each ponent to know about the other ponents?

4. Are there any existing open-source JavaScript projects or jQuery plugins that deal with these types of things?

In regards to question #3, I'm thinking that each ponent could send out some sort of register event that includes the types of events that it listens to and a list of ponents that it has registered with. Components would listen for these register events. Some sort of registration logic using timers would be used to make sure the right ponents get registered together during the ponent loading process. Once the registration has pleted, then the ponents would be able to send their normal events.

I have a need for inter-ponent munication in a web application and am considering different ways to acplish this. I have some ideas, but would wele other ideas.

First, a quick and simple example. I have two separate ponents on a page that are loaded asynchronously. By ponent, I mean a chunk of HTML that has a JavaScript object associated with it that includes jQuery-based behaviors on nodes in the html. When a user interacts with one ponent, changes should take place in the other ponent, and vice-versa.

The key thing to remember here is that each ponent should be a self-contained unit. It could be re-used in different parts of an application, or even different applications. So it doesn't know about the existence of the other ponents on the page.

My current thoughts on a solution involve having ponents listen for custom events that they are interested in as well as sending custom events when an action has taken place. Therefore, each ponent listens for events that are triggered by the other one.

The problem is that because of the async loading, one ponent might take longer to load than the other. There is a possibility that an event might get sent too soon and be lost. In some situations this might be fine, but in some cases I need to make sure that all events a ponent sends get consumed.

So here's some related questions:

1. What happens to an event after it is triggered? Does it just disappear if there are no listeners at the time it was triggered?

2. Is there a way to detect if a triggered even was consumed or lost?

3. What are some good ways for each ponent to know about the other ponents?

4. Are there any existing open-source JavaScript projects or jQuery plugins that deal with these types of things?

In regards to question #3, I'm thinking that each ponent could send out some sort of register event that includes the types of events that it listens to and a list of ponents that it has registered with. Components would listen for these register events. Some sort of registration logic using timers would be used to make sure the right ponents get registered together during the ponent loading process. Once the registration has pleted, then the ponents would be able to send their normal events.

• javascript
• jquery
• dom-events

Share Improve this question Follow edited Dec 18, 2022 at 15:47 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Aug 6, 2010 at 19:41 TaurenTauren 27.3k4444 gold badges134134 silver badges169169 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Message queuing is indeed what you seem to be looking for. I'm sure you can envision various schemes involving an observer object listening for custom events, receiving messages, playing with timing and sequence, throttling, broadcasting, etc. But before getting into all that, take a look at this jQuery message queuing plug-in. Might be a good starting point.

Web services are a good model to reference here. When you have interconnected web services that are used for cloud puting (or any distributed puting platform) they usually implement some kind of message queue or "bus" between them.

You might think about creating a global message queue that handles "events" and can either publish it to subscribers or hold on to it until an action is taken on it (usually called a job).

I'm not sure if this totally encapsulates what you're trying to do, but it sounds like an open source project like JavaScriptMVC may be useful to you. This open source framework lets the controllers handle event delegation and provides some of that separation that you're looking for. It also leverages jQuery under the hood.

The site is a little hard to navigate (or at least find a lot of concrete information) but the intro video is useful (12 minutes in length).

Hope this helps! Good luck!

Something else to consider around event management are the Reactive Extensions for JavaScript from Microsoft (RxJS). It is along the same kind of lines of the controller in JavaScriptMVC where you register events in Observable sequences, but then you can interact with them in LINQ-like syntax.

Matthew Podwysocki has a number of good blog posts about working with RxJS. Here's a few good posts:

Introduction to RxJS (good intro)
Error Handling Pt. 2 with links to his many other posts

And a link to some hands on labs for RxJS.

Hopefully this also helps!

本文标签： jqueryIntercomponent communication in JavaScriptStack Overflow