如何正确使用domReady requireJS插件

Question

在使用domReady之前,这是我的main.js:

require.config({
  paths : {
      loader : 'libs/backbone/loader',
      jQuery : 'libs/jquery/jquery-module',
      Underscore : 'libs/underscore/underscore-module',
      Backbone : 'libs/backbone/backbone-module',
      templates : '../Templates'
  }
});

require([ 'app' ], function(app) {
  app.initialize();
});

和app.js:

define([ 'jQuery', 'Underscore', 'Backbone', 'router',
    'services/Initializers/MainFrameInitializer',
    'services/Initializers/FlowsViewsInitializer',
    'services/Initializers/EditModuleInitializer',
    'services/Sandboxes/ModulesNavigationSandbox',
    'services/Sandboxes/ApplicationStateSandbox', 'DataModel/Constants' ],
    function($, _, Backbone, Router, MainFrameInitializer,
        FlowsViewsInitializer, EditModuleInitializer, ModulesNavigationSandbox,
        ApplicationStateSandbox, Constants) {
      var initialize = function() {
        // Pass in our Router module and call it's initialize function
        MainFrameInitializer.initialize();
        FlowsViewsInitializer.initialize();
        EditModuleInitializer.initialize();
        ApplicationStateSandbox.startCheckStatus();
        ModulesNavigationSandbox.navigate(Constants.Modules.Home);
        // Router.initialize();
      };

      return {
        initialize : initialize
      };
    });

一切正常,直到我优化项目.我已经发现,在DOM准备好之前脚本开始运行,这在优化之前是不正确的.无论如何,我希望使用domReady插件来确保首先加载DOM.

但是,显然,我不知道如何正确地做到这一点.这是main.js的新版本:

require.config({
  paths : {
      loader : 'libs/backbone/loader',
      jQuery : 'libs/jquery/jquery-module',
      Underscore : 'libs/underscore/underscore-module',
      Backbone : 'libs/backbone/backbone-module',
      templates : '../Templates'
  }
});

require([ 'domReady', 'app' ], function(domReady, app) {
  domReady(app.initialize);
});

非常整洁,非常错误,因为在DOM准备好之前app并行加载domReady.

我如何解决它？

谢谢.

编辑

我想我已经理解了我们的问题.app依赖项的构造函数不应运行任何DOM依赖代码.他们应该只返回函数,捕获DOM依赖逻辑.该逻辑应该从中执行app.initialize,保证在DOM准备好时运行.

Answer 1

也许我错过了一些东西,但是你不会通过这样做来让你的生活变得更轻松:

require(['jQuery', 'app' ], function(jQuery, app) {
  jQuery(function ($) {
    app.initialize();
  });
});

在你的main.js？

Answer 2

通过在domReady回调函数中要求应用程序,您应该能够同步地需要domReady模块和app模块.

define(['require', 'domReady'], function(require, domReady) {
  domReady(function() {
    require(['app'], function(app) {
      app.initialize();
    });
  });
});