This problem feels rather basic, yet I've never known a great solution. I'm looking for a way for components in an application to notify each other while being as decoupled as possible (both at build/compile and run time), but also avoiding circular notifications in a way that components do not need to self-mitigate against. I happen to be hitting this issue (for the hundredth time) in JavaScript right now, but that is incidental.
Some means of decoupling include:
- Dependency injection (DI). In this case I use
require.js
which allows, for instance, substituting mock implementations in unit tests by creating alternaterequire.config()
setups. - Event dispatching. E.g.
fooInstance.listen('action string', barInstance.actionHandler)
- Publish/subscribe (aka pub/sub).
The last two are basically variants of the Observer pattern with different pros and cons.
The problem I want to solve is not specifically addressed by these patterns, and I'm not sure if its an implementation detail or if there is a pattern to apply:
fooObj
sends a message (fires an event, whatever) that the"baz"
property has changedbarObj.bazChanged()
handles this event by calling its ownsetBaz()
methodbarObj.setBaz()
fires an event that "baz" has changedfooObj.bazChanged()
handles this event ...
As a real case, imagine fooObj
is a GUI component, with a slider for "tempo"
, and barObj
is a music sequencing component that plays back a score. The slider should affect the tempo of the sequencer, but the score can contain tempo changes so when playing the sequencer should affect the slider position. A solution should be modeless.
One approach is to add guards, for example:
function handleTempoChanged(tempo) {
if (this.tempo == tempo) return;
...
}
This works but feels like a poor solution because it means every event handler needs to either assume it needs a guard, which is ugly boilerplate and often not required, OR needs to be aware of the other components in the system that would make a cycle possible. Arguably, this point is wrong, guards should always be used if the handler is going to fire a changed event directly or indirectly, but this still feels like boilerplate logic. This may be the only answer to my question...
Is there general case pattern to deal with potential cycles as described? Note that this is not about synchronous vs. asynchronous; either way the cycles can occur.
EDITED to reflect insight from commenters:
I realize it is possible to eliminate the boilerplate, using some sort of mixin. In pseudo-code:
class ObservablePropsMixin:
// generic setter with gaurd
function set(propName, value):
if this[propName] = value: return
this[propName] = value
_fire(propName, value)
// generic method to add listeners
function observe(propName, handler):
_observers[propName].add(handler)
// private event dispatching method
function _fire(propName, value):
foreach observer in _observers[propName]:
observer.call(propName, value)
...
This is simplified to focus on my question, but a real mixin would implement other pubsub or event or signal semantics, analogous to any event dispatcher implementation. Components needing to be observers or observables would inherit/extend from the mixin (the above assumes some form of multiple or aggregate inheritance is possible in the language. This could be modified to work with composition instead, e.g. ObservableMixin.constructor(observedObject) rather than using "this".