Task 3: Initialising modules
Now, we don't need to manually initialise modules just emit a document ready event.:
window.EVT = new EventEmitter2();
$(document).ready(function(){
EVT.emit("init");
});
Now we don't need to know about what modules we have on our page. We don't even need init
on the publicAPI of our modules:
// header.js
var Header = (function(){
function clickHeaderLink(evt) { .. }
function init() {
$modal = $("[rel=js-modal]");
$("[rel=js-header]").on("click","> [rel^=js]",clickHeaderLink);
}
// 1. ++++
EVT.on("init", init);
var $modal;
return {
init: init
};
})();
Detail: now we absolutely need that app.js
loads before all the other modules (it adds window.EVT
).
<!-- index.html -->
<!-- .. -->
<script src="js/jquery.js"></script>
<script src="js/eventemitter2.js"></script>
<script src="js/app.js"></script>
<script src="js/header.js"></script>
<script src="js/carousel.js"></script>
<script src="js/details.js"></script>
This is not exactly reactive programming, just a very small part of (it uses events too, but a lot of there things too).He argues that even if we call an internal function in our module, we should first emit an event (do it indirectly). The reason is because we might have another element on the page that might be listening to the event.He says that this is the baseline of a JS developer with about 2 years of experience (modules, events). He means that he covered in a one day workshop of what you learn in about two years working with JS.