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事件而不是自定义视图事件。

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

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

1 个答案: