Как правильно использовать плагин domReady requireJS - PullRequest
Новая
       17

Как правильно использовать плагин domReady requireJS

4 голосов
/ 20 февраля 2012

Вот мои main.js перед использованием domReady: 

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);
});

Очень аккуратно и очень неправильно, потому что app загружается параллельно с domReady до того, как DOM будет готов.

Как это исправить?

Спасибо.

РЕДАКТИРОВАТЬ

Мне кажется, я понял нашу проблему.Функции конструктора зависимостей app не должны запускать какой-либо DOM-зависимый код.Они должны просто возвращать функции, захватив зависимую от DOM логику.Эта логика должна выполняться с app.initialize, который гарантированно будет работать, когда DOM будет готов.

Ответы [ 3 ]

7 голосов
/ 11 мая 2013

Требуя, чтобы приложение находилось внутри функции обратного вызова domReady, вы должны иметь возможность требовать модуль domReady, а затем модуль приложения синхронно. 

define(['require', 'domReady'], function(require, domReady) {
  domReady(function() {
    require(['app'], function(app) {
      app.initialize();
    });
  });
});
7 голосов
/ 21 февраля 2012

Возможно, я что-то упускаю, но разве вы не сделаете свою жизнь намного проще, сделав: 

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

в вашем main.js?

3 голосов
/ 31 августа 2012

Если вы будете следовать документу по адресу: 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 определяет себякак модуль с: 

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

После этого вы можете использовать jquery в качестве ссылки на запрос в любом вашем скрипте.Например: 

  require(["jquery"], function($) { }
...