Javascript模块模式-页面绑定

我正在研究如何使我的代码在大型应用程序中更易于管理和可读。我已经阅读了很多关于模块模式和模块显示模式的帖子和博客，但是有一件事情似乎总是缺少，那就是页面和绑定

人们展示了模块的示例，但我没有找到任何好的实际工作示例

例如，假设我有一个页面，上面有一个计算器

我看到的所有示例都展示了计算器以及如何为此创建模块，但我要寻找的是如何让页面和计算器相互对话

人们是否为每个页面创建一个模块，例如；CalculatorPage，他们是否有绑定或初始化方法，并在其中设置计算器模块？下面是一些无效的js，可以大致了解情况

var Calculator
  settings: { resultElement },
  add (x, y) function to add and set resultElement to
  subtract (x,y) function to subtract and set resultElement to

然后

每个页面都应该有一个模块吗？ 处理绑定的更好方法？

---

如果有人在页面/现实世界的应用程序中有更好的模块示例，我会非常感激。

我想这里的问题是关于“页面”的语义。如果只显示一个JS计算器，那么请确保您可以合理地将模块命名为“calculatorPage”。对我来说，“页面”这个词指的是DOM。就我个人而言，我不会将命名与这样一个场景结合起来，即这必须是页面上的唯一内容，除非我确信这是事实并想突出显示它

---

设置绑定是一个设计问题。如果单独使用jQuery，则需要在DOM就绪回调中设置事件处理程序。如果你想要更多的MV*结构，那么你可以使用一个框架，比如AngularJS或主干等，它们有自己的抽象。基本上，虽然这归结为同一件事，即在DOM就绪后设置事件侦听器。

这实际上是一个随用随补的问题，但这个问题没有正确的答案。你是否需要一个覆盖整个页面的对象/模块，如果需要，制作一个，如果不需要！

var CalculatorPage
  ....
  bind (or init) = function() {
     this.calculator = new Calculator(.results);
     $('.add-button').on('click', this.calculator.add($('.x-field'.val(), $('.y-field').val());
     $('.subtract-button').on('click', this.calculator.subtract($('.x-field'.val(), $('.y-field').