ThemeZ
ThemeZ

Reputation: 493

How do requirejs ensure module name set properly for anonymous module?

In requirejs, you can define a module without setting it's name literally, for example:

//in a.js
define([/*deplist*/],function(){
    /*do something*/
});

//in b.js
define([/*deplist*/],function(){
    /*do something*/
});

And requirejs will set their module name according to their file name("a" and "b"). Requirejs add all <script> tag your application needs, they're not loaded sequentially(as the network timeline said).

js file loading timeline

when a module called define to define itself, it has no knowledge of it's module name, then it put itself to the defQueue waited for initialization. The initialization will be done in load event handler, because in event handler function, the node refercence is accessible, and the module name is record on node attribute(like this: <script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" data-requiremodule="a" src="./a.js"></script>).

Here's the problem, we cannot ensure the order of module calling define identical to module's node load event triggering. Then how can module name mapped to module factory correctly?

Upvotes: 2

Views: 529

Answers (1)

ThemeZ
ThemeZ

Reputation: 493

It turns out the js evaluating and its referencing node "load" event triggering order is coincidental.

After a module js file loaded, the content inside it will be evaluated(not sure when but will be evaluated in the order of js file loaded), then requirejs will push the factory and dependency list in a FIFO queue. Browser will trigger node load event in the same order of js file loaded, and requirejs link the module id and it's factory in the "load" event handler.

For example, if a.js is loaded before b.js, then a.js 's content will be evaluated no later than b.js's, and a.js's "load" event handler will be called no later than b.js's. Then it can be sure that module's id mapped will their factory and dependency list.

Upvotes: 1

Related Questions