Rails 4 Backbone 的事件顺序需要加载

Question

我有三个主要文件：

A) application.js  // This resides in rails land at    app/assets/javascripts/application.js
B) SOF.js          // This resides in rails land at    app/assets/javascripts/SOF.js
C) router.js       // This resides in backbone land at app/assets/javascripts/backbone/routers/router.js

我想知道为什么 router.js 中声明的依赖项会在路由器本身没有被调用的情况下发生。换句话说，事件的顺序是：

1. A 在正常的require.js define() 之前给出了一个console.log
2. 然后是 B 的
3. 然后是 C 的
4. 那么所有 C 的依赖项都只是在函数 init 中定义！！！！
5. 然后A开始初始化，它调用B.initialize()
6. 然后B开始在它调用C.initialize()的地方初始化
7. (a) 然后 C 开始初始化，(b) 识别路由，并遵循适当的路由方法，完成其路由方法调用（即使没有任何路由方法调用）。
8. 然后 C 完成初始化，并将控制权交还给 B
9. 然后B完成初始化，将控制权交还给A
10. 然后 A 完成初始化，没有更多日志......

我的理解是 App.js(A) 应该初始化 SOF.js(B)，它在 router.js(C) 中初始化路由器，然后路由器应该识别路由，并遵循适当的路由，并在那里创建任何模型/集合/视图。

为什么仅仅在 require.js 方法声明的 define() 部分中包含文件就会导致它们加载，甚至在文件本身初始化之前？如果我删除声明，它们将不会加载，但是当然，我不能引用它们以在适当的路径中手动初始化它们......

供您查看的文件（左侧有上述事件顺序）：
应用程序.js：

1-  console.log('Application.js: Started');
    require([      'SOF'    ],
      function(SOF){
5-    console.log("Application.js: initializing SOF...");
      SOF.initialize(App.songs); //App.songs is an object that contains the data from the Rails DB
10-   console.log("Application.js: SOF_Application Fully initialized");
    });

SOF.js：

2- console.log('SOF.js: Started');
   define([
     'jquery',
     'underscore',
     'backbone',
     'backbone/routers/router',
     'd3',
     'jquery-ui'
   ], function($, _, Backbone, Router, d3, $){
     var initialize = function(options){
6-     console.log('SOF.js: In Initialize, initializing Router:');
6-     console.log('SOF.js: options : ', options);
       Router.initialize(options);
9-     console.log('SOF.js: Finished initializing');
     }
     return {
       initialize: initialize
     };
   });

router.js：

3- console.log('Backbone Router started');
   define([
     'jquery',
     'underscore',
     'backbone',
4-   'backbone/relevantModels....',       // Will init just by being here
4-   'backbone/relevantCollections....',  // If I remove it from here, and of course its matching name in the following function formal parameter, it will not init/render
4-   'backbone/relevantViews....'
   ], function($, _, Backbone, RelevantModels, RelevantCollections, RelevantViews){
     var BBRouter = Backbone.Router.extend({
       routes: {
         'new'       : 'newSong',
         '.*'        : 'newSong'
       },
       newSong: function(){
7b       console.log('BB routes => new : newSong');
         // THESE ARE ALL COMMENTED OUT (VERIFIED no caching problems) but still init/render because they are declared above
         // And if I remove the declaration above, I can't call new RelevantView() since it won't know what RelevantView is
         // top side
         // RelevantView.render();
         // middle
         // RelevantView.render();
         // bottom
         // RelevantView.render();
7b       console.log('BB routes: newSong Finished');
       }
     });
     var initialize = function(options){
7a     console.log("BB Router => Initializing...");
       var bb_router = new BBRouter;
       window.router = bb_router;  // attach it to the window for debugging
8-     console.log('BB Router => Initialized');
       Backbone.history.start({root: '/songs/#new'});
     };
     return {
       initialize: initialize
     };
   });

另外注意，在Rails主Application.html.erb上，这是<head>中的声明顺序：

<%= stylesheet_link_tag    "application", :media => "all" %>
<%= requirejs_include_tag "application" %>
<%= javascript_include_tag "assets" %>

宝石文件：

gem 'rails-backbone', git: 'https://github.com/codebrew/backbone-rails.git', tag: 'v1.1.2'
gem 'requirejs-rails', git: 'git://github.com/jwhitley/requirejs-rails.git'

和 Gemfile.lock

GIT
  remote: https://github.com/codebrew/backbone-rails.git
  revision: 4c1dfba7b4f2a989bd0dbc95d5afd3fc762a0b6d
  tag: v1.1.2
  specs:
    rails-backbone (1.1.2)
      coffee-script
      ejs
      jquery-rails
      railties
GIT
  remote: git://github.com/jwhitley/requirejs-rails.git
  revision: f2330104aeca4d193fd5680a22ae7eee85d814b5
  specs:
    requirejs-rails (0.9.1)
      railties (>= 3.1.1, < 4.1)

Answer 1

你对模块初始化顺序的理解是正确的，但是查看查看模块文件的末尾（例如下面的StageView）：

define([
  ...
], function(...) {
  var StageView = Backbone.View.extend({
    ...
  });

  // A singleton
  return new StageView();
});

除了仅仅定义一个视图类之外，它还直接创建了它的一个实例。这解释了为什么在导入模块时调用视图的initialize()（Backbone 从构造函数调用initialize()）。它也是调用render() 的initialize() 方法（例如，参见stageView.js, line 45）。

我希望这能解开谜团。 :-)