Praveen Singh

Dojo Toolkit Tutorial (AMD): Java like Inheritance in Javascript using Dojo

Introduction


Dojo Toolkit Tutorial (AMD): Java like Inheritance in Javascript using Dojo

JavaScript is an object-oriented language based on prototypes, rather than being class-based. Because of this different basis, it can be less apparent how JavaScript allows you to create hierarchies of objects and to have inheritance of properties and their values

Dojo provides the ability to simulate class-based inheritance using dojo.declare.

It is awesome, it is powerful and feel more natural!



Are you new to Dojo or Javascript?

  • If you don't know how the prototypes based inheritance work in Javascript, and want to understand that first.You can check my article: Simple prototypes based Inheritance in Javascript. This article is kind of extension of above article
  • If you want to understand the basic first in Dojo, you can click on the "DOJO" tab, at top of the page.

step by step video tutorial


I use Video for talking and explanation. This is the reason that article has very less text and comments



I will try to explain Inheritance by a simple code example in this article

But before i can start, we have to take a usecase, an example of inheritance to begin with. Throughout this article we will take this as an usecase to create and understand Inheritance.

Class Digram for the example

Setup


  1. Build package structure like below.

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

Inheritance: Classical Approach


Lets add all all class first(or Object in pure Javascript terms)


Path:DOJO_TEST/app/module/Developer.js
define([
    "dojo/_base/declare"
], function(declare) {

    return declare([], {

        name: null,

        skill: "no skill",

        constructor: function(name) {

            this.name = name;

        },

        printSkill: function() {

            console.log("Skill: ", this.skill);

        },

        printName: function() {

            console.log("I am : ", this.name);

        },

        workOn: function() {

            console.log("Not sure!");

        }
    });
});
    
Path:DOJO_TEST/app/module/JavaDeveloper.js

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

    return declare([Developer], {

        skill: "Java",

        constructor: function(name) {
            this.name = name;
        },

        workOn: function() {
            this.inherited(arguments); 
            console.log("I work on Server side");

        }
    });
});
    
Path:DOJO_TEST/app/module/JavaScriptDeveloper.js
define([
    "dojo/_base/declare",
    "./Developer"
], function(declare, Developer) {

    return declare([Developer], {

        skill: "JavaScript",
        
        constructor: function(name) {

            this.name = name;

        },

        workOn: function() {

            console.log("I work on client side");

            this.inherited(arguments);

        }
    });
});
    
Path:DOJO_TEST/app/module/NodeJSDeveloper.js

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

    return declare([Developer], {

        skill: "NodeJS",
        
        constructor: function(name) {

            this.name = name;

        },

        workOn: function() {

            console.log("I work on Server side");

        }
    });
});

    

Now, lets call all the class in single html file.


Path:DOJO_TEST/app/module/test.html
<!DOCTYPE html>
<html>
<head>
    <title>Dojo Inheritance</title>
    <script>
    var dojoConfig = {
        async: true,
        packages: [{
            name: "app",
            location: "/DOJO_TEST/app"
        }]
    };
    </script>
</head>
<body>
    <h1>Java like Class and Inheritance in DOJO

    <script src="/DOJO_TEST/lib/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script type="text/javascript">
    require([
        "app/module/Developer",
        "app/module/JavaDeveloper",
        "app/module/JavaScriptDeveloper", 
        "app/module/NodeJSDeveloper"
    ], function(Developer, JavaDeveloper, JavaScriptDeveloper, NodeJSDeveloper) {

        var developer = new Developer("icodingclub");
        developer.printSkill(); 
        developer.printName();
        developer.workOn();
        console.log(developer instanceof Developer);

        var javaDeveloper = new JavaDeveloper("icodingclub");
        javaDeveloper.printSkill();
        javaDeveloper.printName();
        javaDeveloper.workOn();
        console.log(javaDeveloper instanceof Developer);
        console.log(javaDeveloper instanceof JavaDeveloper);
        console.log(javaDeveloper instanceof JavaScriptDeveloper);


        var javaScriptDeveloper = new JavaScriptDeveloper("icodingclub");
        javaScriptDeveloper.printSkill();
        javaScriptDeveloper.printName();
        javaScriptDeveloper.workOn();
        console.log(javaScriptDeveloper instanceof Developer);
        console.log(javaScriptDeveloper instanceof JavaScriptDeveloper);
        console.log(javaScriptDeveloper instanceof JavaDeveloper);

        

        var nodeJSDeveloper = new NodeJSDeveloper("icodingclub");
        nodeJSDeveloper.printSkill();
        nodeJSDeveloper.printName();
        nodeJSDeveloper.workOn();
        console.log(nodeJSDeveloper instanceof Developer);
        console.log(nodeJSDeveloper instanceof JavaScriptDeveloper);
        console.log(nodeJSDeveloper instanceof NodeJSDeveloper);
        console.log(nodeJSDeveloper instanceof JavaDeveloper);


    });

    </script>
</body>
</html>

Inheritance: Mixin Approach


above example explain the classical Inheritance, where child class is much more specific version of parent, much more narrow version of parent class

Another way in which Inheritance can be used is Mixin way, in which is mixin add the feature to parent class

In below class diagram, you can understand, Developer is main class and JavaSkillMixin and the skill of Java to main developer, similarly JavaScriptSkillMixin

Class Digram for Mixin approach

  1. Update package structure like below.

Again, let's build the classes first


Path:DOJO_TEST/app/module/Developer.js

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

    return declare([JavaSkillMixin, JavaScriptSkillMixin], {

        name: null,

        skill: [],

        constructor: function(name) {

            this.name = name;

        },

        printSkill: function() {

            console.log("Skill: ", this.skill);

        },

        printName: function() {

            console.log("I am : ", this.name);

        }
    });
});

    
Path:DOJO_TEST/app/module/JavaSkillMixin.js

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

    return declare([], {

        constructor: function() {

            this.skill.push("Java");
        },

        doYouKnowJava: function() {

            console.log("doYouKnowJava: YES");

        },

        workOn: function() {

            console.log("Work on Java!");

        }
    });
});

    
Path:DOJO_TEST/app/module/JavaScriptSkillMixin.js

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

    return declare([], {

        constructor: function() {

            this.skill.push("JavaScript");
        },

        doYouKnowJavaScript: function() {
            
            console.log("doYouKnow JavaScript: YES");

        },

        workOn: function() {

            this.inherited(arguments);
            console.log("Work on JavaScript!");

        }
    });
});

    

Lets pull all class in html file to test

Path:DOJO_TEST/app/module/test.html
<!DOCTYPE html>
<html>
<head>
    <title>Dojo Inheritance</title>
    <script>
    var dojoConfig = {
        async: true,
        packages: [{
            name: "app",
            location: "/DOJO_TEST/app"
        }]
    };
    </script>
</head>
<body>
    <h1>Java like Class and Inheritance in DOJO

    <script src="/DOJO_TEST/lib/dojo/dojo/dojo.js" data-dojo-config="async: true"></script>
    <script type="text/javascript">
   require(["app/module/Developer"], function(Developer) {

        var developer = new Developer("icodingclub");

        developer.printSkill();
        developer.printName();
        developer.doYouKnowJava();
        developer.doYouKnowJavaScript();
        developer.workOn();
    });
    </script>
</body>
</html>

    

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 comments section.

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

No comments:

Post a Comment