Backbone.js：重构视图代码的正确方法？

Question

我想知道在哪里放置通用骨干视图代码。 例如，我在“NewPosts”视图中有以下内容：

  createPost: (event) ->
    #...
    @collection.create attributes,
      #...
      error: @handleError


  handleError: (entry, response) ->
    if response.status == 422
      #...

handleError函数将在很多不同的视图中使用...我不确定最佳实践re：在哪里放置它。 是否有一个相当于视图助手的主干我可以把它放进去？ 还有其他攻击方法吗？

Answer 1

注意：我的CoffeeScript很生疏，所以我在JS中回答这个问题，但这个想法应该转换。

显然，解决此问题的一种方法是为所有视图提供父类，然后在该类中放置handleError之类的方法。 但是，如果您正在寻找更像“mixin”的添加方法，那么您也可以这样做。

使用extend方法的参数初始化骨干视图，如下所示：

var MyView = Backbone.View.extend({
    someMethod: function(){ doSomething();}
});

那个论点并不神奇; 它只是一个JS对象，所以你可以使用_.extend扩展它，如下所示：

var myCommonMethods = {
    handleError: function ...
}

var MyView = Backbone.View.extend(_({
    someMethod: function(){ doSomething();}
}, myCommonMethods));

这种方法的优点是你可以“混入”任意数量的方法集，而如果你使用父类，你就会受到更大的约束。 父类方法更简单：

var BaseView = {
    handleError: function ...
}

var MyView = BaseView.extend({
    someMethod: function(){ doSomething();}
});

所以它真的只取决于你的特殊需求。

就个人而言，在我的代码中我使用两种方法：我有一个BaseView，我的所有视图都扩展了，我把极其常见的逻辑（比如我们的大多数视图使用的模板系统）放入其中。 然后我有各种方法集的“混合”，增加了额外的功能。

例如，我为所有具有“select”元素作为el的视图提供了一组混合方法; 这让我们看到这些视图具有对它们有意义的基类，但仍然有一组共同的方法（例如，它们都有一个selectOption方法，它允许我在视图的el中为特定选项添加“selected”属性）。 希望有所帮助。

Answer 2

您可以通过以下几种方式执行此操作：使用此方法定义基本视图，然后从此视图扩展所有其他视图，而不是Backbone.View

var Base = Backbone.View.extend({
    handleError:function() {...}
});

var MyView = Base.extend({ ... });

或者，使用帮助程序扩展现有视图

var Helper = {
    handleError:function() {...}
};

var View1 = Backbone.View.extend({ ... });
var View2 = Backbone.View.extend({ ... });
$.extend(View1, Helper);    
$.extend(View2, Helper);

Answer 3

我会实现一个侦听事件的错误处理模型。 您可以制作自己的自定义事件或使用默认值。 我构建了一个庞大的复杂backbone.js应用程序，在我学会利用事件模型之前，它在架构方面非常困难。 它节省了许多关注点之间的处理关系。

创建一个事件调度程序，并在初始化时将其作为参数传递给视图：

这样的事情：

var dispatcher = {};

_.extend(dispatcher, Backbone.Events);

dispatcher.on("event", function(msg) {
  // delegate to error handler
});


view = new View([dispatcher: dispatcher])
view.dispatcher.trigger('event', {})

我发现通过使用事件调度程序，它隔离了我的视图，集合和模型，这使得它很容易测试。 我可以在chrome控制台中触发事件，并观察各个组件如何孤立地运行。 通过将调度程序暴露给记录器，它使调试变得更加容易，并且我的代码更清晰。

Answer 4

很抱歉没有代码示例，但重构的一个概念是将公共代码移动到基类，以便所有子类都可以重用代码。

但我真的很喜欢Rimian的想法，你的视图从对象或调度程序等事件源订阅错误事件。 然后，这将使您的所有视图彼此分离，并在收到错误事件时处理错误。