Difference between require() and define() in RequireJS?

testndtv picture testndtv · Aug 30, 2013 · Viewed 25k times · Source

In RequireJS, what is the basic difference between using require() Vs define();

require(['a'], function(a) {
    // some code
});

// A.js
define(['b','c','d','e'], function() {
    //some code
});

Any use cases would be very helpful..

Answer

Katana314 picture Katana314 · Aug 30, 2013

One core difference that annoyed me in early use was figuring out that a define might never be called.

As long as there is only one define per file, it will register that module as available under that filename. However, define modules are only loaded once a require function asks for each of them.

Define: If you need a XXX, then load these other things first, then return the result of this function.

Require: Load these other things, then run this function. (no "if")

Example: Let's say you include this JS file in your page:

// this is in company/welcomepage.js
define(['company/ui_library'],
    function(uiLib) {
        console.log('Welcome to {company}!');
    }
);

If that's the only Javascript file, you could open your page, and there would be nothing in the console log, in spite of the script telling it to welcome the user. However, that changes if somewhere in the page, or in another script, you insert the following:

require(['company/welcomepage'], function() {
    // optionally insert some other page-initialization logic here
});

Now, the page will put a welcome message in the console when it loads.

In fact, with that second one in place, there would be no need to manually include welcomepage.js as a <script> tag; it would load it from its location as soon as it sees the require, and realizes it needs it.