CODEWITHSUNDEEP
asynchronousrequirejs
David Thielen
David Thielen

Reputation: 32874

RequireJS loads a .js, but is inline code still async?

From what I have seen using a debugger, calling:

require(["menu/main-menu"], function(util) {

Will load the main-menu.js file, but the function is called before the global code in the required .js file is executed? Is this correct?

If so, what is the best way to have all that code executed before my function is called?

The problem I am trying to solve is I want the code in mani-menu.js to all be in a module. But I can't call any method in that module until the global code in there is executed which creates the module.

I can call a global method in there which then creates everything, but that then requires a global init() method in every .js file (each with a unique name).

What's the best way to handle all this?

Update: There's a more basic question here (maybe). In writing javascript (and I use Sencha Ext JS & TypeScript), I need to create my objects. So when I go to create say my main menu, I want to call a method in my main-menu.js file to get that Ext JS derived menu object I created.

I think all the code in main-menu.js should be in a namespace, including the method I call to get the menu object. Is that correct? In addition, the way most Ext JS code is set up is you have several Ext.define() calls as well as other variable instantiations, and then the function that takes all that, builds the full menu, and returns it. But that requires all that code has executed in main-menu.js before I call it.

Am I approaching this correctly? My experience to date is Java & C# and I may be trying to fit that model incorrectly to javascript.

Upvotes: 0

Views: 149

Answers (1)

Louis
Louis

Reputation: 151380

Let's suppose menu/main-menu.js contains this:

define(function () {
    // Module factory function
    return [... whatever you want to expose...];
});

And your application does this:

require(["menu/main-menu"], function (util) {
    // Require callback.
});

What happens is:

  1. The require call loads menu/main-menu.js.

  2. The define in menu/main-menu.js is executed.

  3. The module factory function (the function passed to define) is executed.

  4. The require callback is executed with the symbol util set to what the factory function in menu/main-menu.js returned.

As for simulating namespaces, there are multiple ways to do it. For instance, you can do it like this:

define(function () {
    return {
        foo: function () {},
        bar: function () {},
        [...]
    };
});

This exports an object with two functions in it. You can then use it like this:

require(["menu/main-menu"], function (util) {
    util.foo();
    util.bar();
});

RequireJS also supports a CommonJS-style of defining modules:

define(function (require, exports, module) {
    exports.foo = function () {};
    exports.bar = function () {};
    [...]
});

This is functionally equivalent to the first way I defined the module earlier: you get the same two functions and you use them in the same way as I've shown above.

Unfortunately, I can't speak about Ext JS specifically because I don't use it.

Upvotes: 1

Related Questions