4

这是我在使用 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 准备好时运行。

4

3 回答 3

7

也许我错过了一些东西，但你不会通过这样做让你的生活更轻松：

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

在你的main.js？

于 2012-02-20T21:30:34.733 回答
7

通过从 domReady 回调函数中请求应用程序，您应该能够同步请求 domReady 模块，然后再请求应用程序模块。

define(['require', 'domReady'], function(require, domReady) {
  domReady(function() {
    require(['app'], function(app) {
      app.initialize();
    });
  });
});
于 2013-05-10T23:22:48.420 回答
3

如果您关注以下文档：http ://requirejs.org/docs/jquery.html ，您将被邀请在文档头部嵌入一个 require-jquery 库：

<script data-main="main" src="libs/require-jquery.js"></script>

但是，如果您查看github上提供的示例源代码，您会看到“require-jquery.js”是由 require lib 文件和 jquery lib 文件的简单连接生成的：

 cat require.js jquery.js > ../jquery-require-sample/webapp/scripts/require-jquery.js

这意味着您可以将嵌入到头部的脚本替换为文档中任何位置（例如，在文档的最底部）嵌入的以下脚本。

  <script src="libs/require.js"></script>
  <script src="libs/jquery-1.8.0.js"></script>
  <script>require(["main"]);</script>

因为 jquery lib 将自己定义为一个具有以下功能的模块：

  define( "jquery", [], function () { return jQuery; } );

此后，您可以在任何脚本中使用 jquery 作为要求参考。例如：

  require(["jquery"], function($) { }
于 2012-08-31T09:15:31.610 回答