Rails 4 主干网的事件顺序 需要加载

Order of events for a Rails 4 Backbone Require loading

本文关键字：加载 顺序 事件 主干网 Rails      更新时间：2023-09-26

我有三个主要文件： 

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 给出了一个控制台.log从正常require.js define()之前
  2. 然后 B 的
  3. 然后 C 的
  4. 然后所有 C 的依赖项都在函数中定义 init 本身!!!
  5. 然后 A 开始初始化，它调用B.initialize()
  6. 然后 B 开始初始化它调用 C.initialize()
    7. 的位置（
  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
     };
   });

路由器.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)

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

define([
  ...
], function(...) {
  var StageView = Backbone.View.extend({
    ...
  });
  // A singleton
  return new StageView();
});

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

我希望这能解开这个谜团。

相关文章：