如何在 JavaScript 中将 DOM 视图逻辑与 DOM 事件(控制器?)逻辑分开

Question

我不确定我是否正确地将我的应用程序分离到 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中，视图似乎变得更智能（成为视图控制器）。还有哪些其他方法？

Answer 1

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

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