我应该如何引导我的网络应用程序？答案

【问题标题】：How should I bootstrap my web app?我应该如何引导我的网络应用程序？
【发布时间】：2012-06-14 08:13:40
【问题描述】：

我正在寻找使用Backbone.Marionette、Backbone.Router 和Requirejs 引导我的网络应用程序的最佳方式。
以下实现有效，但我想知道这是否是正确的制作方法。

这是我的一些代码 (*)。

我的问题是：
1）对以下数据流（index.html -> conf.js -> router.js -> app.js）？
2）每个区域的Backbone.View（header，sidebar.....）应该根据上下文在router.js或app.js或展位中实例化？

// index.html
<!doctype html>
<html lang="en">
    <head>
        <!-- Load the script "/js/conf.js" as our entry point -->
        <script data-main="js/conf" src="js/vendor/require.js"></script>
     </head>
     <body>
     </body>

// js/config.js
require.config({
    // some code
});
require(['app']);  // instead of  require(['conf']);

// router.js
define([
    'app',
    // others modules
],
function(App, $, _, Backbone, Marionette){
    "use strict";
    var AppRouter = Backbone.Marionette.AppRouter.extend({
        routes: {
            test: test,
            "*defaults": "home"
        }

    var initialize = function ()
    {
        var app_router = new AppRouter;
    };

    return {
        initialize: initialize
    };
});

// js/app.js
define(
[
    // some modules
],
function ($, _, Backbone, Router, Mustache, Layout, SidebarView) {
    var MyApp = new Backbone.Marionette.Application();

    MyApp.addInitializer(function () {
        $('body').html(Layout);
        MyApp.addRegions({
            header: '#header',
            sidebar: '#sidebar',
            mainColumn: '#main-column',
            rightColumn: '#right-column'
        });
    });

    MyApp.addInitializer(function () {
        var sidebarView = new SidebarView();
        MyApp.sidebar.show(sidebarView);
    });

    MyApp.on("initialize:after", function () {
//        Router.initialize();
    });

    MyApp.start();

    return MyApp;

});

【问题讨论】：

标签： backbone.js marionette backbone-routing

【解决方案1】：

总体上看起来不错。我可能会改变一些事情，但这些主要是个人喜好：

1) 倒置router和app文件的关系，使用初始化器启动router。

现在您在路由器和应用程序文件之间存在循环依赖关系，这绝不是一件好事。尽管 RequireJS 可以很好地处理这个问题，但在许多其他方面这都是一个坏主意，因为它可能导致代码无法按照您期望的方式工作。

2) 在你的路由器文件中，设置一个初始化器来实例化路由器。

3) 不要从路由器文件启动主干历史。

在一个项目中拥有多个路由器是很常见的，并且建议这样做。但您只能拨打Backbone.History.start() 一次。使用路由器的“after:initialize”事件在 app.js 文件中启动它

MyApp.on("after:initialize", function(){ Backbone.History.start(); }

4) 将初始化器回调提取到从单个初始化器调用的函数中

虽然使用多个初始化器在技术上没有任何问题 - 而且您需要跨多个模块使用多个初始化器 - 我建议在单个模块中使用单个初始化器，并让该初始化器调用模块中定义的其他函数。

5) 在初始化器之外调用 addRegions

无法保证您的初始化程序将按照您添加它们的顺序运行。这取决于各个浏览器如何处理事情。

例如，您的 app.js 文件可能如下所示：


// js/app.js
define(
[
    // some modules
],
function ($, _, Backbone, Router, Mustache, Layout, SidebarView) {
    var MyApp = new Backbone.Marionette.Application();

    MyApp.addRegions({
        header: '#header',
        sidebar: '#sidebar',
        mainColumn: '#main-column',
        rightColumn: '#right-column'
    });

    MyApp.addInitializer(function(){
       showLayout();
       initSidebar();
    });

    MyApp.on("initialize:after", function(){
      Backbone.History.start();
    });

    function initSidebar() {
        var sidebarView = new SidebarView();
        MyApp.sidebar.show(sidebarView);
    }

    function showLayout() {
        $('body').html(Layout);
    }

    MyApp.start();

    return MyApp;

});

...

好吧，这看起来比我最初想象的要多得多。 :) 但就像我说的，你的设置总体上看起来不错。这些是我会做的事情，但不一定是让您的应用正常运行的必要条件。

【讨论】：

非常感谢。我根据您的回答更改了我的问题中的conf.js 和router.js。只有两件事不清楚：1）我应该把Router.initialize()放在我的app.js中的某个地方（最好的地方在哪里）？ 2）如果我颠倒顺序app.js然后router.js，我怎样才能从router.js访问MyApp？
正确...废止您的情况下的关系。我不会将路由器放在单独的模块中。我总是把它们放在路由器相关的模块中。
好的，但是如果我想颠倒关系，因为对我来说，conf.js -> app.js -> require.js 似乎更明显，我该怎么办？