How to communicate between javascript modules...?

Question

In my application are a couple of modules for their own responsibility, and that's where I have some confusion..

How to communicate between modules?
How to inform or listen modules between to take decision for appropriate scenario..?

example:

module 1,

var MyModule1 = (function() {
  var myPrivateData = 303;
  function myPrivateFunction() {
    alert('private');
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();

Module 2

var MyModule2 = (function() {
  var myPrivateName = privatized;
  function myPrivateFunction() {
    alert(myPrivateName) ;
  }
  return {
    myPublicData : 42,
    myPublicFunction : function() {
      alert('public');
    }
  };
})();

How can I make them both communicate and listen to each other..? Can anyone please clarify with some small example? I need to share the privateData shared to module2 and myPrivate name shared with module1 and in case of any click event to be triggered.

Thanks in advance!

May be. But i need the best approach, even mine is wrong, please correct me. — 3gwebtrain, Sep 28 '13 at 10:46
Try to implement the publish/subscribe pattern. http://stackoverflow.com/a/13513915/294076 — gearsdigital, Sep 28 '13 at 10:46
I'd recommend using a sandbox, each module should not know about others. — Niccolò Campolungo, Sep 28 '13 at 10:47
@LightStyle, Thats what i am wondering, can you give some example please? — 3gwebtrain, Sep 28 '13 at 10:56
i dont use design patterns because i do simply things, however '2. How to inform or listen modules between...' sounds like an observer pattern. if your apps is large/complex, you might want to consider utilising design patterns. extra code but well structured. just a thought — gwillie, Sep 28 '13 at 10:58
I agree with @gearsdigital, you need to use publish subscribe pattern http://addyosmani.com/blog/understanding-the-publishsubscribe-pattern-for-greater-javascript-scalability/ — Claudio Santos, Sep 28 '13 at 11:19

score 5 · Answer 1 · answered Nov 07 '13 at 00:17

Here is basic concept of loosely coupled modules organization inside the browser:

When code inside module1 needs to notify others about some event it will do this:

$(document).trigger( "some:event", someData);

And module2 if it needs to be notified about "some:event" shall do this in its code on its initialization:

$(document).on( "some:event", function(evt,someData) {
   // ... do something with the data ...
} );

In this schema two modules are completely independent. The only thing they shall to know are names of events they are communicating with.

WOW this will lead me to re-think several of my applications. I use module pattern but each module interact with the user then with this concept the data captured by the user can be used later. Again, WOW. — Marco Muciño, Oct 27 '15 at 21:50

score -1 · Answer 2 · answered Sep 28 '13 at 10:48

Something like this

    var ParentClass = (function() {
     var privateVariable = 'toto';
     this.publicVariable = 'titi';

     this.ChildClass = new ChildClass(this);
     this.ChildClass.execute();
    });

    function ChildClass(parent) { this.parent = parent; return this; };

    ChildClass.prototype.execute = function() {
     alert (this.parent.publicVariable); // show titi
    };

ParentClass();

How to communicate between javascript modules...?

2 Answers2