在过去的 2 周里，我一直在学习 backbone 和相关工具以及编写应用程序。我遇到了设计问题，想知道有哪些可用的解决方案，以及 Backbone 专家是否认为这是一个问题。

问题:我最终不得不将我所有的 View 依赖项放在我的 router.js 中，并且无法确定它们是否是解决该问题的方法。下面是我的 router.js 中的代码:

// router.js
define([
  'jquery',
  'underscore',
  'backbone',
  'text',
  'views/landing',
  'views/dashboard',
],  
    function($, _, Backbone, t,LandingView,DashboardView){
        var AppRouter = Backbone.Router.extend({
        routes: {
          // Define some URL routes
          '': 'showLanding',
          'projects': 'showProjects',
          // Default
          '*actions': 'defaultAction'
        },
        navigate_to: function(model){
                alert("navigate_to");
            },

        showProjects: function() {},
        showLanding: function() {},
    });

    var initialize = function() {
        var app_router = new AppRouter;
        Backbone.View.prototype.event_aggregator = _.extend({}, Backbone.Events);
        // Extend the View class to include a navigation method goTo
        Backbone.View.prototype.goTo = function (loc) {
            app_router.navigate(loc, true);
        };
        app_router.on('route:showLanding', function(){
            var landing = new LandingView();
        });
        app_router.on('route:showProjects', function(){
            var dashboard=new DashboardView();
        });
        app_router.on('defaultAction', function(actions){
            alert("No routes");
            // We have no matching route, lets just log what the URL was
            console.log('No route:', actions);
        });
        Backbone.history.start({pushState: true});
    };
    return {
        initialize: initialize
    };
});

router.js 包括 LandingView 和 DashboardView View ，它们依次获取相应的模板。初始路由加载具有登录模板的 LandingView。登录后，它调用 router.js 的 goTo 方法来生成 DashboardView()。虽然这行得通，但我觉得它有点难看。但是我不知道如何从 LandingView 生成一个新的 DashboardView，而不直接从 LandingView() 内部或路由器引用 DashboardView()。

如果我继续通过 router.js 执行此操作，我最终将直接或间接地从路由器中提取我所有的 View js 文件。听起来有点难听!

我查看了 Derick Baileys 的事件聚合器模式，但面临这样的问题:如果 DashboardView 的实例尚不存在，DashboardView 如何订阅 LandingView 生成的事件？必须有人创建并初始化它才能订阅事件聚合器，对吗？如果那个人是路由器，我是否需要在路由器中预先实例化所有 View ？这没有意义。

最佳答案

我通过仅在首次访问路由时导入 View 来解决此问题:

define(['backbone'], function(Backbone) {
    var AppRouter = Backbone.Router.extend({
        routes: {
            '':      'home',
            'users': 'users'
        },

        home: function() {
            requirejs(["views/home/mainview"], function(HomeView) {
                //..initialize and render view
            });
        },

        users: function() {
            requirejs(["views/users/mainview"], function(UsersView) {
                //..initialize and render view
            });
        }
    });

    return AppRouter;
});

它没有解决必须最终将所有 View 导入路由器的问题，但是惰性 requirejs 调用不会强制加载和评估所有脚本和模板。

事实是某人必须在某处导入模块。路由器是一个明智的位置，因为它通常是用户导航到特定页面( View )时命中的第一段代码。如果您觉得一个路由器负责太多，您应该考虑将您的路由器拆分为多个路由器，每个路由器负责应用程序的不同“部分”。一个很好的类比是在典型的 MVC 场景中考虑 Controller。

多个路由器的例子

userrouter.js 处理所有与用户相关的 View (“users/”下的路由):

define(['backbone'], function(Backbone) {
    var UserRouter = Backbone.Router.extend({
        routes: {
            'users',        'allUsers',
            'users/:id',    'userById'
        },
        allUsers: function() {
            requirejs(["views/users/listview"], function(UserListView) {
                //..initialize and render view
            });
        },
        userById: function(id) {
            requirejs(["views/users/detailview"], function(UserDetailView) {
                //..initialize and render view
            });
        }
    });
    return UserRouter;
});

postrouter.js 处理所有与帖子相关的 View (“posts/”下的路由):

define(['backbone'], function(Backbone) {
    var PostRouter = Backbone.Router.extend({
        routes: {
            'posts',        'allPosts',
            'posts/:id',    'postById'
        },
        allPosts: function() {
            requirejs(["views/posts/listview"], function(PostListView) {
                //..initialize and render view
            });
        },
        postById: function(id) {
            requirejs(["views/posts/detailview"], function(PostDetailView) {
                //..initialize and render view
            });
        }
    });
    return PostRouter;
});

approuter.js 是主路由器，它在应用程序启动时启动并初始化所有其他路由。

define(['backbone', 'routers/userrouter', 'routers/postrouter'], 
function(Backbone, UserRouter, PostRouter) {

    var AppRouter = Backbone.Router.extend({

        routes: {
            '',        'home',
        },
        initialize: function() {
            //create all other routers
            this._subRouters = {
                'users' : new UserRouter(),
                'posts' : new PostRouter()
            };
        },
        start: function() {
            Backbone.history.start();
        },
        home: function() {
            requirejs(["views/home/mainview"], function(HomeView) {
                //..initialize and render view
            });
        }
    });
    return UserRouter;
});

最后，您的应用程序的 ma​​in.js，它会启动应用程序路由器:

new AppRouter().start();

通过这种方式，您可以保持每个单独的路由器精简，并避免在实际需要之前解决依赖关系树。

旁注:如果您使用嵌套的 requirejs 调用并且您正在使用 r.js 进行构建，请记住设置构建选项findNestedDependencies:true，因此延迟加载的模块会包含在构建中。

编辑:这是一个gist that explains lazy vs. immediate module loading in RequireJS .

关于javascript - Backbone.js "fat router"设计难题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14185909/