Question

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

这是我的一些代码（*）。

我的问题是：
1）正确的是以下数据流（index.html - ＆gt; conf.js - ＆gt; router.js - ＆gt; 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;

});

Answer 1

整体看起来相当不错。我可能会改变一些事情，但这些主要是个人偏好：

1）反转路由器和应用程序文件之间的关系，并使用初始化程序启动路由器。

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

2）在路由器文件中，设置实例化路由器的初始化程序。

3）不要从路由器文件中启动backbone.history。

在项目中有多个路由器是常见的，也是建议的。但您只能拨打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;

});

...

好吧，这看起来比我原先想象的要多得多。 :)但就像我说的，你的设置看起来很好。这些是我会做的事情，但不一定是让你的应用程序有效的要求。

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

1 个答案: