如何使用requireJs以正确的顺序定义控制器，路由器和应用程序

Question

我正在编写一个小应用程序（initApp.js,initApp.routinj.js,initApp.controller.js）哪些模块需要使用require来加载。
这是我的代码（*）。
使用中我看到模块是如何加载顺序如下每个模块console.log：

1) initController 
2) initRouting 
3) initApp 

这是正确的顺序？

现在另一个问题。
在initApp.controller.js我需要访问功能，如initHeader和initSidebar（在initApp.js中定义）。
但正如您从我的代码（initApp.controller.js）中看到的，console.log('initController', app);返回undefined。
为了解决这个问题，我在initApp.controller.js中定义了功能getApp。
但肯定有更好的方法来完成这项任务。
有什么想法？
由于

（*）

---

** ** main.js

define([ 
    'js/app', 
    'js/init/initApp', 
// 'js/tasks/tasksApp' 
], 
function (App) 
{ 
    "use strict"; 
    App.initialize(); 
}); 

---

** ** initApp.js

/*global define*/ 
define([ 
    'backbone', 
    'js/app', 
    'js/init/initApp.routing', 
    'js/init/views/sidebarView', 
    'js/init/views/headerView', 
], 
function (Backbone, App, Router, SidebarView, HeaderView) 
{ 
    "use strict"; 
    console.log('initApp', Router) 
    var initApp = new Backbone.Marionette.Application({ 

     initHeader: function() 
     { 
      var headerView = new HeaderView(); 
      App.header.show(headerView); 
     }, 

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

    }); 

    return initApp; 
}); 

---

** initApp.routin，JS **

/*global define*/ 
define([ 
    'backbone', 
    'marionette', 
    'js/init/initApp.controller' 
], 
function(Backbone, Marionette, controller) 
{ 
    "use strict"; 
    console.log('initRouting', controller) 
    var Router = Backbone.Marionette.AppRouter.extend({ 

     appRoutes: { 
      '*defaults': 'index' 
     } 

    }); 
    return new Router({ 
     controller: controller 
    }); 

}); 

---

** ** initApp.controller.js

/*global define*/ 
define([ 
    'js/init/initApp' 
], 
function(app) 
{ 
    "use strict"; 
    console.log('initController', app); // undefined 
    var getApp = function() { 
     var initApp; 
     require(['js/init/initApp'], function (app) { 
      initApp = app; 
     }); 
     return initApp; 
    }; 

    var controller = { 
     index: function() 
     { 
      var app = getApp(); 
      app.initHeader(); 
      app.initSidebar(); 
     } 
    } 

    return controller; 

}); 

Answer 1

不知道这是否是实现的事情以正确的方式，但是，在你的情况下，如果你按照这个顺序加载模块，这将是工作。

1) initApp 
2) initController 
3) initRouting 

因此，这意味着你的main.js应该是：

define([ 
    'js/app', 
    'js/init/initApp.routing' 
], 
function (App) 
{ 
    "use strict"; 
    App.initialize(); 
}); 

Answer 2

您的文件循环依赖：initApp -> initApp.routing -> initApp.controller -> initApp。这就是你得到undefined的原因。

在声明时，当您定义您的类/对象时，只有在代码中存在依赖关系时，顺序才会很重要。就我而言，我初始化的initApp.js路由器和控制器，所以我有：

initApp.js

define(['backbone', 'js/init/initController', 'js/init/initApp.initRouting', ...], 
function(Backbone, controller, Router, ...) { 
    return { 
    initialize: function() { 
     // Store a namespaced global reference to my app. 
     window.MyApp = new Backbone.Marionette.Application(); 
     MyApp.addRegions({...}); 
     MyApp.addInitializers(function(options) { 
     MyApp.router = new Router({controller: controller}); 
     // Other init stuff... 
     }); 
     MyApp.start(); 
    } 
    }; 
}); 

自从我保存到我的窗口应用程序的参考。MyApp，它现在可以在我的JS文件中访问，而不需要任何额外的逻辑。举例来说，我可以直接从控制器或任何视图访问地区：

MyApp.myRegion.show(someView); 

所以我main.js是很小的：

require(['app', 'backbone', 'json2'], function(app){ 
    window.console = window.console || {log: function() {}}; // Needed for IE. 
    app.initialize(); 
}); 

既不是我的路由器或控制器JS文件的依赖彼此或App文件上。

initApp.Routing.js

define([ 
    'jquery', 
    'underscore', 
    'backbone' 
    ], function($, _, Backbone) { 
    var Router = Backbone.Marionette.AppRouter.extend({ 
    appRoutes: { 
     // My routes go here... 
    } 
    }); 
    return Router; 
}); 

也就是说，我初始化我在App，从而降低了JS文件之间的依赖路由器。

同样，我的控制器只有依赖向下的各种意见和集合：

initApp.Routing.js

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'myview', 
    'mycollection' 
    ], function($, _, Backbone, View, Collection) { 
    var controller = { 
    showMyView: function() { 
     // ... 
    } 
    }); 
    return controller; 
}); 

什么我花了一段时间来换我的头周围的人之间的区别声明和执行。只要你只在JS文件中声明了东西（例如，包装在对象中，或者调用extend），我就有一个入口点用于执行main.js'app.initialize()，你将会安全并且可以访问MyApp任何地方的对象

更新

另一种可选择的方法来获得访问你的应用程序实例在其他JS文件，看到Access Your Application Instance From Other Modules更新Backbone.Marionette维基。