Using jQuery and RequireJS at start of processing

Question

I often start my JavaScript apps like this:

jQuery(function($) {
    ... code for the app ...
});

I'm just starting to use RequireJS, and will start the app like this:

define(['jquery'], function($) {
    ... code for the app ...
});

Now, as I don't want the app to start processing until all the HTML has been loaded, I've combined the two like this:

require(['jquery'], function($) {
    $(function($) {
        ... code for the app ...
    });
});

Is that the way to do it?

http://stackoverflow.com/questions/15332628/requirejs-domready-plugin-vs-jquery-document-ready — Trevor, Oct 08 '13 at 22:39
Please mark one answer as accepted so you can help other people. — Claudio Santos, Oct 26 '13 at 08:50

score 0 · Answer 1 · answered Oct 08 '13 at 22:37

The RequireJS documentation touches on this and offers has a slightly more convenient option:

require(['domReady!'], function (doc) {
    //This function is called once the DOM is ready,
    //notice the value for 'domReady!' is the current
    //document.
});

Note that you will need to download the domReady plugin, and if you have a very complex page you may wish to use the "explicit function call" method that they also show... Although then it looks an awful lot like what you're already doing with jQuery.

score 0 · Answer 2 · answered Oct 08 '13 at 22:42

So the main diferences between define and require in this scenario is, one declare a module and the second one call this defined module, then if it is not loaded, the browser download the js library.

To take control about when your require files will download, you need to use the domReady plugin.

You need to put the js library at you require.config, I usually put at the same directory as declared at the baseUrl property, for example:

require.config({
    baseUrl: "js/lib",
    paths:{
        filter:"../src/filter",
        addPanel: "../src/edit-panel"
    }
}

I put the domReady.js at the js/lib/ folder.

So, then you can use the require method at any place of you html file:

require(['jquery!'], function ($) {

});

Note that I use the symbol ! to indicate that this library is load after the completely page load.

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

As the box at the top of the page, my question is answered here:

Requirejs domReady plugin vs Jquery $(document).ready()?

The other answers here essential repeat what's in the above link. But, thanks!

edited May 23 '17 at 12:21

Community

1
1

answered Oct 26 '13 at 22:35

Marc Rochkind

3,678
3
30
38

Using jQuery and RequireJS at start of processing

3 Answers3