如何在JavaScript模块之间进行通信？

Question

在我的应用程序中有一些负责自己的模块，这就是我感到困惑的地方...

1. 如何在模块之间进行通信？ 2. 如何通知或监听模块以做出适当情况的决策？

例如： 模块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');
    }
  };
})();

我怎样才能让它们相互通信并相互监听？有没有人可以提供一些简单的示例来澄清一下？我需要将privateData共享给module2，将myPrivate名称共享给module1，在任何点击事件触发时都是如此。

谢谢！

- 3gwebtrain

---

可能吧。但是我需要最好的方法，即使我的方法是错误的，请纠正我。 - 3gwebtrain

尝试实现发布/订阅模式。https://dev59.com/EWYr5IYBdhLWcg3wpLv9#13513915 - gearsdigital

我建议使用沙盒，每个模块都不应该知道其他模块的存在。 - Niccolò Campolungo

@LightStyle，这正是我想知道的，您能举个例子吗？ - 3gwebtrain

我不使用设计模式，因为我只是做简单的事情，但是“2.如何在模块之间通知或监听...”听起来像观察者模式。如果你的应用程序很大/复杂，你可能需要考虑利用设计模式。虽然会增加额外的代码，但结构良好。这只是一个想法。 - gwillie

我同意@gearsdigital的观点，你需要使用发布订阅模式http://addyosmani.com/blog/understanding-the-publishsubscribe-pattern-for-greater-javascript-scalability/。 - Claudio Santos

Answer 1

下面是关于浏览器内松耦合模块组织的基本概念：

当模块1中的代码需要通知其他模块某个事件时，它将执行以下操作：

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

如果module2需要在其代码中初始化时被通知“some:event”，则应这样做：

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

在这个架构中，两个模块完全独立。它们需要知道的唯一信息是它们所通信事件的名称。

- c-smile

---

哇，这会让我重新思考我的几个应用程序。我使用模块模式，但每个模块都与用户交互，然后通过这个概念，用户捕获的数据可以稍后使用。再次哇。 - Marco Muciño

Answer 2

类似这样的东西

    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();

- Paul Rad