javascript - 如何正确使用domReady requireJS插件

标签 javascript requirejs domready

这是我在使用 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
      };
    });

一切正常,直到我 optimize该项目。我已经发现,脚本在 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);
});

非常简洁但非常错误,因为 app 在 DOM 准备好之前与 domReady 并行加载。

我该如何解决?

谢谢。

编辑

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

最佳答案

也许我遗漏了一些东西,但这样做不会让你的生活变得更轻松吗:

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

在你的 main.js 中?

关于javascript - 如何正确使用domReady requireJS插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9361737/

相关文章:

javascript - React Native,如何删除旧样式并添加新样式

javascript - 折叠卡打开然后立即再次关闭

使用 for 循环的 javascript 计数器

angularjs - 如何使用requirejs加载css?

google-maps - 使用 Google map 、Stamen Tiles(现有的瓦片库)和 Require.js?

javascript - 当脚本在主体树中执行时,DOM 准备好了吗?

javascript - Elasticlunr 搜索根据索引返回文档对象

javascript - 如何从使用 requireJS 构建的模块访问变量?

javascript - 当 DOM 准备好作为插入顺序时执行处理程序

javascript - jQuery document.ready() 不适用于 Require.js