Skip to main content

Tedshd's Dev note

JavaScript - Cross Module Communication

Table of Contents

# JavaScript - Cross Module Communication

When website modulize, need a better way handle cross module communcation.

Refer JavaScript design pattern’s observer pattern and Android EventBus

## Principle

observer_pattern_basic.png

## My Implement

observer_pattern_flow.png

## Example

observer_pattern_example.png

Hub is a array put publish object

publish object must include action and something want to do

var funcA = function () {
	alert('Red Alarm');
}
publish('alarm', funcA);

If more something to in same action

var funcA = function () {
	alert('Red Alarm');
}
var funcB = function () {
	console.log('Red Alarm');
}
publish('alarm', funcA);
publish('alarm', funcB);

Now fire alarm can run funA and funB Then unpublish funA, action can only run funB

var funcA = function () {
	alert('Red Alarm');
}
var funcB = function () {
	console.log('Red Alarm');
}
publish('alarm', funcA);
publish('alarm', funcB);
unPublish('alarm', funcA);

unPublish has three type

unPublish('alarm', funcA);
// or
unPublish('', funcA);
// or
unPublish('alarm');

If publish is a is async behavior(AJAX) fire can add second argument as a callback to handle simple async behavior But not handle something behavior like promises or watchdog

fire('alarm');
// or
function funcA() {
	console.log('Fin');
}
fire('alarm', funcA)