如何在 JavaScript 中将 DOM 视图逻辑与 DOM 事件（控制器？）逻辑分开？答案

【问题标题】：How do I separate DOM view logic from DOM event (controller?) logic in JavaScript?如何在 JavaScript 中将 DOM 视图逻辑与 DOM 事件（控制器？）逻辑分开？
【发布时间】：2014-03-18 05:39:24
【问题描述】：

我不确定我是否正确地将我的应用程序分成 MVC 逻辑。我对如何处理处理视图和事件逻辑的 DOM 感到困惑。例如：

var HistoryView = function($siblingEl) {
  this.$el = $(
    '<div class="history">' +
      '<button class="backward"><</button>' +
      '<button class="forward">></button>' +
    '</div>'
  );
  $siblingEl.after( this.$el );
  $('.backward').on('click', function() {
    Events.fire('clickPrev');
  });

  ...

然后是控制器：

 var HistoryManager = function(board, game) {
   Events.on('clickPrev', function() {
     var move = History.getPrev();
     if (move) {
       board.undoMove(move);
       game.turn -= 1;
       History.undo();
     }
   });

   ...

我的视图代码中有很大一部分专门用于监听 DOM 事件，然后将它们传递给我的自定义 Event 元对象；然后我的控制器会监听 Event 而不是 DOM。让控制器直接监听 DOM 似乎更直接，但它必须知道视图。有没有办法解决这个问题？在 Backbone 中，视图似乎变得更智能（成为视图控制器）。还有哪些其他方法？

【问题讨论】：

好收获。谢谢并更新。

标签： javascript design-patterns model-view-controller

【解决方案1】：

为了更好地比较实现 MV* 模式的不同方法，我发现 Todo MVC 非常有用http://todomvc.com/。我使用谷歌闭包，我的偏好也是将控制器和视图合并为一个。但是，使用闭包，您可以通过让视图创建 HTML 并为控制器可能需要的视图对象实现接口来将它们分开。有关示例，请参见 goog.ui.Control 和 goog.ui.ControlRenderer。在您的情况下，视图将提供诸如getBackButton() 和getForwardButton() 之类的方法。然后控制器将监听 DOM 事件而不是自定义视图事件。

但是，其他人认为 View 应该监听 DOM 事件，而控制器应该监听视图事件（如您的示例中所示）。我认为没有一种正确的做事方式。最重要的是您可以轻松（单元）测试您的代码；）

【讨论】：