javascript - Backbonejs：组织路由

Question

如果里面有太多的路线，比如说一百条，你如何组织你的路线对象。你只是把它放在一个文件或对象中吗？

谢谢。

Answer 1

我认为这里没有正确或错误的答案。绝对正确的是，您不能拥有一个包含 50 多个路由的路由器……这是可维护性的噩梦。

相反，我更喜欢将我的应用程序拆分为子应用程序或模块（根据需要调用它们），每个子应用程序或模块都有明确定义的目的和职责。因此，在假设的订单管理系统中，我可能会有

• 订购管理应用程序
  • 个人应用
    • 路由器.js
    • 应用程序.js
    • ...
  • 订购应用
    • 路由器.js
    • 应用程序.js
    • ...
  • ...
  • globalrouter.js
  • globalapp.js

这里的关键是永远不要创建一个巨大的应用程序/单体应用程序，而是创建许多可以组合在一起以形成整个应用程序的小应用程序（与每个应用程序之间的事件通信）。也就是说，在上面的示例中，“人”和“订单”应用程序都有自己的路由器，这些路由器只保存与他们相关的路由。“全局”应用程序形成了粘合剂，将所有单个应用程序结合在一起，例如拥有应用程序菜单，也许还有一些通用路线，而不是紧贴特定模块/子应用程序。

也许Backbone Aura是一个很好的起点。

Answer 2

您可以将路由器分解为多个文件。你如何分解它取决于你的用例，在我的应用程序中，我们按模块分解它。

您如何定义模块取决于您的应用程序，但一般的经验法则是您将在一个“功能”或主题下将功能分组在一起。

例如，假设您的应用程序是一个基本的“公司”应用程序（使用 Backbone.js 的例子很糟糕，但让我们保持简单。）该站点有几个部分：“关于我们”、“产品”、“客户”、“支持”、“博客”、“职业”。在每个部分中，它有 2 个级别的子页面（例如，在产品中，您可以拥有产品列表，并且在每个产品中，您可以深入了解产品、如何购买产品、等等等等）

每个部分，在示例中，我们可以将它们视为模块。并且，基于此，您可以将包含所有路由的单个路由器分解为不同的路由器。（它们当然可以在不同的文件中！）

var MainRouter = Backbone.Router.extend({ 
  routes: {
    '/': 'home'
  },
  home: function() {
    // Display home view
  }
});

var ProductRouter = Backbone.Router.extend({
  routes: {
    '/product': 'listProducts',
    '/product/:id/buy': 'buyProduct',
    '/product/:id': 'viewProduct',
    '/product/compare/:id1/:id2': 'compareProduct'
  },
  listProducts: function() { ... },
  buyProduct: function(id) { ... }
  viewProduct: function(id) { ... }
  compareProduct: function(id1, id2) { ... }
});

当您启动应用程序时，您只需启动它们：

$(function() {
  new MainRouter();
  new ProductRouter();
});

通过这样做，您还可以将代码分解为不同的模块，甚至将视图、模板和模型按模块分开。