Praveen Singh

Dojo Toolkit Tutorial (AMD): Inheritance or MixIn in DOJO using declare and AMD concept

Introduction`


Dojo Toolkit Tutorial (AMD): Inheritance or MixIn in DOJO using declare and AMD concept

A step-by-step tutorial to explain Inheritance or more correctly MixIn in DOJO, using declare.

step by step video tutorial



Setup


  1. Build package structure like below.

  2. Run everything in a server. If you are on mac, Simplest way is, run: python -m SimpleHTTPServer 8888 at DOJO_TEST level. On window....find similar way.

Heads Up!

  • I will keep using term module or class for same thing.
  • I will keep using term Inheritance or Mixin for same thing.

Code


A simple hook up index file


Path:DOJO_TEST/app/module/index.html
<!DOCTYPE html>
<html>

<head>
 <title>Counter</title>
 <script>
 var dojoConfig = {
 async: true,
 packages: [{
 name: "app",
 location: "/DOJO_TEST/app"
 }]
 };
 </script>

</head>

<body>
 <script src="/DOJO_TEST/lib/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
 <script type="text/javascript">
 require(["app/module/Modules"],
 function(Modules) {
 var widget = new Modules();
 });
 </script>
</body>

</html>

                

Creating a multiple Inheritance scenario in DOJO.


Checking constructor call and instanceof.

Path:DOJO_TEST/app/module/Modules.js
/**
 * define() is a foundational AMD API.
 * It allows us to define a module and its dependencies.
 * Once dojo/query and dojo/on are loaded (which doesn't happen until their dependencies are loaded, and so on),
 * the callback function is called and module instance passed to it.
 */

define([
    "dojo/_base/declare"
], function(declare) {

    var A = declare(null, {

        constructor: function() {

            console.log("In constructor A");
        }
    });

    var B = declare(null, {

        constructor: function() {

            console.log("In constructor B");
        }

    });

    var C = declare(null, {

        constructor: function() {

            console.log("In constructor C");
        }

    });

    return declare([A, B, C], {

        constructor: function() {
            console.log("Check who am i!!")
            console.log("Type A: ", this instanceof A); //true
            console.log("Type B: ", this instanceof B); //false
            console.log("Type C: ", this instanceof C); //false

        }
    });
});


                


In constructor A
In constructor B
In constructor C
Check who am i!!
Type A: true
Type B: false
Type C: false


Let's update it and change the Mixin sequence.


 return declare([C, B, A], {

        constructor: function() {
            console.log("Check who am i!!")
            console.log("Type A: ", this instanceof A); //true
            console.log("Type B: ", this instanceof B); //false
            console.log("Type C: ", this instanceof C); //false

        }
    });

                

In constructor C
In constructor B
In constructor A
Check who am i!!
Type A: false
Type B: false
Type C: true



Checking method override.



/**
 * define() is a foundational AMD API.
 * It allows us to define a module and its dependencies.
 * Once dojo/query and dojo/on are loaded (which doesn't happen until their dependencies are loaded, and so on),
 * the callback function is called and module instance passed to it.
 */

define([
    "dojo/_base/declare"
], function(declare) {

    var A = declare(null, {

        m1: function() {
            console.log("In A -> m1");
        },

        m2: function() {
            console.log("In A -> m2");
        }

    });

    var B = declare(null, {

        m1: function() {
            console.log("In B -> m1");
        },

        m2: function() {
            console.log("In B -> m2");
        }

    });

    var C = declare(null, {

        m1: function() {
            console.log("In C -> m1");
        }

    });

    return declare([A, B, C], {

        constructor: function() {
            this.m1();
            this.m2();
        }
    });
});


                

We get the output like...

In C -> m1
In B -> m2



Updating MixIn sequence.


 return declare([C, B, A], {

        constructor: function() {
            this.m1();
            this.m2();
        }
    });

                

We get the output like...

In A -> m1
In A -> m2


Changing method call flow.



/**
 * define() is a foundational AMD API.
 * It allows us to define a module and its dependencies.
 * Once dojo/query and dojo/on are loaded (which doesn't happen until their dependencies are loaded, and so on),
 * the callback function is called and module instance passed to it.
 */

define([
    "dojo/_base/declare"
], function(declare) {

    var A = declare(null, {

        m1: function() {
            
            console.log("In A -> m1");
        }

    });

    var B = declare(null, {

        m1: function() {
            this.inherited(arguments);
            console.log("In B -> m1");
        }

    });


    return declare([A, B], {

        constructor: function() {
            this.m1();
        }
    });
});


                

In A -> m1
In B -> m1


Updating this.inherited(arguments) call sequence.


 var B = declare(null, {

        m1: function() {
           
            console.log("In B -> m1");
            this.inherited(arguments);
        }

    });

                

We get the output like...

In B -> m1
In A -> m1

Contact Me


If you want to contact me for feedback or suggestion or doubt. You can do so by commenting on Blogger article or in Youtube contact section.

You can also approach me dropping me mail directly at mails.icodingclub@gmail.com

No comments:

Post a Comment