CODEWITHSUNDEEP
javascriptrequirejs
user53791
user53791

Reputation:

RequireJS Flawed By Example?

Looking into RequireJS but unlike Head.JS which downloads in undetermined order but evaluates in a determine order, RequireJS seems different

Normally RequireJS loads and evaluates scripts in an undetermined order.

Then it shows how to prefix order! to the script names for explicit ordering etc..

Then in the examples:

require(["jquery", "jquery.alpha", "jquery.beta"], function($) {
    //the jquery.alpha.js and jquery.beta.js plugins have been loaded.
    $(function() {
        $('body').alpha().beta();
    });
});

So if jquery.alpha is downloaded and evaluated before jquery then surely this would cause a problem? Forgetting any client code usage such as function body above, if like most plugin they attach to jQuery.fn then at stage of evaluation then jQuery will undefined in this scenario.

What am I missing here?

Upvotes: 0

Views: 4355

Answers (3)

Sean McMillan
Sean McMillan

Reputation: 10093

RequireJS is not designed to load plain javascript, but to load defined modules. The module format looks something like:

define(['a', 'b'], function(a, b) {
    return { zzz: 123 };
});

The important thing to note is that all of the module code is inside an anonymous function. So if the file is run in an arbitrary order, it doesn't matter, because all it does is register the module. The module code is then run in dependency order, with the return value becoming the module object, which is passed as a parameter to code that uses the module.

If you are trying to load plain files, this will not work correctly for you. There is the order plugin to force load order in that case.

Upvotes: 18

Pete O
Pete O

Reputation: 114

It should be noted that that example uses the custom made version of "requirejs and jquery" packaged together, which I believe means that jquery will always be available first.

If you have problems, you can always wrap your plugins within a module definition and make sure they depend on jquery themselves, again ensuring the order is correct:

/* SPECIAL WRAPPING CODE START */
define(['jquery'], function(jQuery) {


// .... plugin code ....


/* SPECIAL WRAPPING CODE END */
});

Upvotes: 1

Prisoner ZERO
Prisoner ZERO

Reputation: 14176

You are correct, without something to aid in the order an exception will occur. The good news is RequireJS has an Order plug-in to help in this.

I'm currently evaluating RequireJS...

And Here Is An Example of One of My Files:
The 'order!' command will load files for you sequentially. You can (then) use the callback to load other (support) files.

<script src="Loaders/RequireJS/requireJS.js" type="text/javascript"></script>
<script src="Loaders/RequireJS/order.js" type="text/javascript"></script>
<script type="text/javascript">

    require(["Loaders/RequireJS/order!././Includes/JavaScript/jQuery/Core/jquery-1.3.2.js",
        "Loaders/RequireJS/order!././Includes/JavaScript/jQuery/Core/jquery.tools.min.js",
        "Loaders/RequireJS/order!././Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.tmpl.js"], function() {

        require(["././Includes/JavaScript/jQuery/jGeneral.js",
            "././Includes/JavaScript/jQuery/autocomplete.js",
            "././Includes/JavaScript/jQuery/jquery.ErrorWindow.js",
            "././Includes/JavaScript/jQuery/jquery.ValidationBubble.js",
            "././Includes/JavaScript/jQuery/jquery.Tootltip.js",
            "././Includes/JavaScript/jQuery/jquery.Extensions.js",
            "././Includes/JavaScript/jQuery/jquery.Toaster.js"], null);

        require(["././Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.dimensions.js",
            "././Includes/JavaScript/jQuery/ThirdPartyPlugIns/jQuery.Color.Animations.js",
            "././Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.corners.min.js",
            "././Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.tipsy.js",
            "././Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.numberformatter-1.1.0.js",
            "././Includes/JavaScript/jQuery/ThirdPartyPlugIns/jquery.tipsy.js"], null);
    });
</script>

In All Honesty:
I'm looking at various asynchronous resource-loaders and I'm having a hard-time finding one that does everything I need. I'm also finding the documentation in each one lacking.

Upvotes: 0

Related Questions