CODEWITHSUNDEEP
javascriptrequirejs
dt1000
dt1000

Reputation: 3732

How to guarantee dependent class in javascript with requirejs

I was hoping that the following code would guarantee that parentClass is loaded before childClass, and that both would be loaded before startMyApp was called.

require([
    "parentClass",
    "childClass"
], function (parentClass, childClass){
    Main.startMyApp();
});

If not, how can I guarantee that? Main, is an object. Child class is defined as such:

var childClass = function childClass()   {
    this.name = 'some name';
};
childClass.prototype = new parentClass();
childClass.prototype.constructor = childClass;

And here is parentClass:

var parentClass = function parentClass() {

};
parentClass.prototype.myFunction = function myFunction(){
    //do something
}

I am trying to avoid adding define's to all of my classes, I've got dozens. Is that the only way to guarantee class are available when I need them? Thanks!

Upvotes: 0

Views: 51

Answers (2)

Louis
Louis

Reputation: 151401

The call require(["parentClass", "childClass"], ... tells RequireJS to load both modules but this call does not coerce the order in which the modules are loaded. What does coerce the order of the modules are the dependencies you establish between the modules.

Since this is your own code, and you've decided to use RequireJS, then you should write proper AMD modules. To establish dependencies you list them as the first argument of your define calls (if needed). For your parent class:

define(function () {
    var parentClass = function parentClass() {

    };
    parentClass.prototype.myFunction = function myFunction(){
        //do something
    }

    return parentClass;
});

For your child class:

define(['parentClass'], function (parentClass) {
    var childClass = function childClass()   {
        this.name = 'some name';
    };
    childClass.prototype = new parentClass();
    childClass.prototype.constructor = childClass;

    return childClass;
});

Then whatever other modules needs childClass just require your childClass module and parentClass is guaranteed to be loaded before childClass because parentClass is listed as a dependency in the define call.

Upvotes: 1

Shan Robertson
Shan Robertson

Reputation: 2742

You want to use the shim config, for example:

require.config({
    paths: {
        jquery: ['../bower_components/jquery/jquery.min'],
        underscore: ['../bower_components/underscore/underscore-min']
        app: 'app'
    },
    shim: {
        underscore: {
            deps: ['jquery'],
            exports: '_'
        },
        waitforimages: {
            deps: ['jquery']
        },
        cyclotron: {
            deps: ['jquery']
        },
        placeholder: {
            deps: ['jquery']
        },
        app: {
            deps: ['jquery', 'underscore', 'fastclick', 'spinjs', 'waitforimages', 'backgroundCheck', 'raphael', 'swipe', 'history', 'cyclotron', 'placeholder']
        }
    }
});

require([
    'app'
]);

this isn't the most optimized example, but basically, if you say that something is a dep of another script, it will make sure to load those files. So you can see in this example, I am telling require that these plugins require jquery, and my app requires jquery and these plugins.

This way everything gets loaded before my app.js

Upvotes: 1

Related Questions