Relationship between parent and child modules in Dojo

Question

I've defined a custom Dojo module as follows:

 define([
    "dojo/_base/declare",
    "dijit/_TemplatedMixin",
    "dijit/_WidgetBase",
    "dijit/_WidgetsInTemplateMixin"
], function (declare, _TemplatedMixin, _WidgetBase,_WidgetsInTemplateMixin){
    var _Base = declare("tt.widget.dashboards._Base", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin], {

    widgetsInTemplate: true,
    .....
    });
    return _Base;
}

I've also defined another module which extends the _Base.js module as shown below:
Definition 1

define([
    "dojo/_base/declare",
    "dojo/text!tt/widget/landingPages/templates/InviteeWelcome.html",
    "dojo/topic",
    "dijit/form/CheckBox",
    "tt/widget/RoundedBox",
    "t/widget/RoundedButton",
    "tt/widget/Dashboards/_Base"
], function (declare, template, topic, CheckBox, RoundedBox, RoundedButton, _Base) {

    var InviteeWelcome = declare("tt.widget.landingPages.InviteeWelcome", _Base,
{
 ...
});

Definition 2

define([
        "dojo/_base/declare",
        "dojo/text!tt/widget/landingPages/templates/InviteeWelcome.html",
        "dojo/topic",
        "dijit/form/CheckBox",
        "tt/widget/RoundedBox",
        "t/widget/RoundedButton",
            "dijit/_WidgetBase",
            "dijit/_TemplatedMixin",
            "dijit/_WidgetsInTemplateMixin"
        "tt/widget/Dashboards/_Base"
    ], function (declare, template, topic, CheckBox, RoundedBox, RoundedButton, _Base, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin) {

        var InviteeWelcome = declare("tt.widget.landingPages.InviteeWelcome", [_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Base],
    {
        widgetsInTemplate: true,
        ...
    });

My question is that which one of above will be the correct definition of InviteeWelcome.js?

Thanks

Answer 1

In definition 1 you're using the following hierarchy:

_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin => _Base => InviteeWelcome

While in your second definition you're using the following hierarchy:

_WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin => _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _Base => InviteeWelcome

In this case there is no difference at all (except maybe performance related). _Base is already inheriting from both _WidgetBase, _TemplatedMixin and _WidgetsInTemplateMixin, so if you inherit from those 3 + _Base, then _Base will "override" them all (because it already has al the behavior of the other modules).

But if you would change the order of mixin modules in definition 2so that it becomes:

[ _Base, _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin ]

Then everything you override in _Base, will be overridden again by their defaults in _WidgetBase, _TemplatedMixin and _WidgetsInTemplateMixin.

I think your first approach will work as well and may be less confusing.

Answer 2

There isn't really a question here?

The differences between Definition 1 and Definition 2 is only that in Def 1 you don't have _WidgetsInTemplateMixin added. The two custom modules you have both extend the same _Base class, however in Def 2 you add the same mixins twice. The only consequence, is that you classes are applied from left to right, so you could inadvertendly overwrite some setting. (Although this wouldn't be the case from the example you have provided).

Also, moving forward with dojo, it's better to avoid the module names if you don't need them.

Here is a mini custom module that I recently created this morning..

define( [
    "dojo/text!./TemplatePalette.html",
    "dijit/_Widget",
    "dijit/_TemplatedMixin",
    "dojo/_base/declare",
    "dojo/dom-construct",  
    "dojo/_base/lang",
    "dojo/topic"

    ] ,
    function( template, _Widget, _TemplatedMixin, declare, 
              domConstruct, lang, topic ){    
        return declare( [_Widget, _TemplatedMixin ], { 
    ...
    ...
    ...
    });