1

I see that require.js has support to execute code when document.ready() is fired. see: http://requirejs.org/docs/api.html#pageload

I was just wondering is there any way to get it to 100% execute code before document.ready() is invoked? For example, does the code main.js get executed before document.ready() event? Thanks.

More Than Five
  • 9,959
  • 21
  • 77
  • 127
  • All global code will execute before the *ready* event is dispatched. – RobG Dec 16 '14 at 11:26
  • RobG but the idea of require.js is to get away from global code. What is the reequire.js way to do this? I just want to do some bootstrapping etc before dom.ready()? – More Than Five Dec 16 '14 at 11:31
  • 1
    You want to get away from global code, but at the same time you want some code to execute before the document is ready. Isn't that basically the same as executing global code? – Bassdrop Cumberwubwubwub Dec 16 '14 at 11:34
  • check it http://stackoverflow.com/questions/2920129/can-i-run-javascript-before-the-whole-page-is-loaded – Nasir Mahmood Dec 16 '14 at 11:34
  • Nasir Mahmood, I want a require.js solution. Where do I put the code in my require.js modules. – More Than Five Dec 16 '14 at 11:40
  • @MoreThanFive—require.js is itself global code, the scripts loaded by require.js are global code. There is nothing inherently wrong with global code, it's impossible to have an executing javascript program without it. – RobG Dec 16 '14 at 23:34

1 Answers1

1

There is no pure RequireJS solution to your request. In essence what you are asking for is:

I'd like a) to load my modules asynchronously but b) I want to load them synchronously.

Requirement a is entailed by the fact that you are using RequireJS. RequireJS is a loader designed to load AMD modules. AMD stands for asynchronous module definition. If you use RequireJS, you have to be okay with the fact that it operates asynchronously. So it cannot guarantee that any module will load and execute before the document is ready.

Requirement 'b' is entailed by your requirement that the code executes before the document is ready. This cannot be done otherwise than by forcing the execution of your modules to be synchronous. (I've given some thought about ways to delay the ready event but I don't see this as being generally possible. Solutions like jQuery.holdReady are not really delaying the event but only delaying those handlers that were set using jQuery.ready. The event still happens whenever the browser decides it happens but the handlers get fired later. And only the jQuery handlers are affected, nothing else.)

You can load your code using script elements (that don't use the async attribute) but then you won't be using RequireJS.

A solution that would give you something similar to RequireJS would be to use Almond. Your code would have to be built into a single bundle. And you could load this bundle synchronously. It would essentially have the same effect as using script elements but you would still benefit from modularization. Note that Almond comes with a series of limitations. You'll have to decide for yourself whether these limitations are a problem for you. I've explained how to use Almond synchronously in this answer.

Community
  • 1
  • 1
Louis
  • 146,715
  • 28
  • 274
  • 320