CODEWITHSUNDEEP
javascriptdojo
puk
puk

Reputation: 16782

Dojo class load order

I am trying to migrate from pure javascript to Dojo and I am running into some problems. My current problem is in the order of import statements. In pure javascript I could have a file A.js as such

function(name){
    this.name=name;
}

And a file B.js as such

function(name,age){
    this.A=A;
    A(name);
    this.age=age;
}

and then I could load the two files in index.html either as such

<html>
    <head>
    <script LANGUAGE="javascript" SRC="A.js"></script>
    <script LANGUAGE="javascript" SRC="B.js"></script>
    </head>
</html>

or as 

<html>
    <head>
    <script LANGUAGE="javascript" SRC="B.js"></script>
    <script LANGUAGE="javascript" SRC="A.js"></script>
    </head>
</html>

but if I convert A.js and B.js to dojo as such

dojo.declare("A", null, {
    constructor: function(name){
        this.name=name;
    }
});

And such

dojo.declare("B",[A],
    constructor:function(name,age){
        this.age=age;
    }
});

Then I can only load the scripts in index.html as such

<html>
    <head>
    <script LANGUAGE="javascript" SRC="A.js"></script>
    <script LANGUAGE="javascript" SRC="B.js"></script>
    </head>
</html>

If I try to load B.js before A.js, it will complain that A.js does not exist. Is there anyway around this?

Upvotes: 1

Views: 1576

Answers (2)

Andrei
Andrei

Reputation: 4237

if you decided to migrate to Dojo, i propose for you read about

  1. dojo.provide()
  2. dojo.require()
  3. dojo.declare()

The main idea of this is fallows:

You don't need to use script tag for loading required JavaScript files.

For example:

You have the fallowing site structure:

enter image description here

  1. You add "dojo.js" file and put it in "Script" folder
  2. You create folder "MyModules" and...
  3. you create 2 own modules "ModuleA" and "ModuleB"

In your own modules you define some classes:

Code of "ModuleA":

dojo.provide("Scripts.MyModules.ModuleA");

dojo.declare("A", null, {
    constructor: function (name) {
        this.name = name;
    },

    sayName: function () {
        alert(this.name);
    }
});

Code of "ModuleB":

dojo.provide("Scripts.MyModules.ModuleB");
dojo.require("Scripts.MyModules.ModuleA");

dojo.declare("B", [A], {
    constructor: function (name, age) {
        this.age = age;
    },
    sayName: function () {
        alert(this.name + " " + this.age);
    }
});

At the beginning of each file you can see lines:

dojo.provide("Scripts.MyModules.ModuleA");
dojo.provide("Scripts.MyModules.ModuleB");

dojo.provide is an integral part of Dojo’s module system and its loader. dojo.provide() tells the loader that the a module has been provided for the given name. It also creates a JavaScript object for the name.

Also as you can see class B inherited from class A. In this case in "ModuleB" you should add this line:

dojo.require("Scripts.MyModules.ModuleA");

It means that "ModuleA" is required for "ModuleB";

And at the end, example of usages this structure on the page:

// connect dojo 

...
<script src="Scripts/dojo.js" djconfig="parseOnLoad: true"></script>
...

// if you want to create object B you must connect ModuleB on page:

<script type="text/javascript">
dojo.require("Scripts.MyModules.ModuleB");
</script>

// creating object B

<script type="text/javascript">
    dojo.addOnLoad(function () {
      var bObject = new B('John',25);
        bObject.sayName();
    });
</script>

In case using of this structure you don't need care about script loading order.

P.S. sorry for my "english"

Upvotes: 5

Andrew D.
Andrew D.

Reputation: 8220

You must load A.js always before B.js

Difference between your "plain javascript code" and "Dojo" in what in "plain code" no code executed when scripts is loaded, but in "Dojo" dojo.declare() function executed immediately after B.js script is loaded (and, because script in B.js requires a class "A", that declared in "A.js", "A.js" must be loaded first for creating class "A").

Upvotes: 1

Related Questions