Categories


Archives


Recent Posts


Categories


Magento 2’s Base Javascript Class

astorm

Frustrated by Magento? Then you’ll love Commerce Bug, the must have debugging extension for anyone using Magento. Whether you’re just starting out or you’re a seasoned pro, Commerce Bug will save you and your team hours everyday. Grab a copy and start working with Magento instead of against it.

Updated for Magento 2! No Frills Magento Layout is the only Magento front end book you'll ever need. Get your copy today!

Magento 2’s core javascript library ships with a basic implementation of a class based object system, and the uiComponent feature uses these classes and objects extensively. The base class is the Magento_Ui/js/lib/core/class module/object/function, and you create a new instance of the class using javascript build-in new keyword.

requirejs([
    'Magento_Ui/js/lib/core/class',
], function (Class) {
    'use strict';
    var o = new Class;
    console.log(o);
});    

You can create a child class using the base class’s extend function. You pass extend a list of key/function pairs to define methods. Magento’s objects have a constructor-like method named initialize is called when you instantiate an object. You can call a parent class’s method with this._super(). The _super method is only callable from inside a method – its not exposed publicly.

Here’s an example program that defines two new classes named A and B. A extends the base class, B extends A. After defining these classes, the program instantiates an object from the class B, and then calls that object’s hello method.

requirejs([
    'Magento_Ui/js/lib/core/class',
], function (Class) {
    'use strict';

    var A = Class.extend({
        initialize: function () {
            this._super();
            console.log("Called A's initialize/constructor");
            this.foo = "foo";
            this.bar = "bar";

        },

        hello: function(){
            console.log("Hello");    
        }
    });

    var B = A.extend({
        initialize: function () {
            this._super();
            console.log("Called B's initialize/constructor");
            this.bar = "BIG BAR";
            this.baz = "baz";
        },

        hello: function(){
            this._super();
            console.log("Hello Again");    
        }
    });

    var object = new B;
    object.hello();
    console.log(object);
});

Magento aliases Magento_Ui/js/lib/core/class to the shorter uiClass.

vendor/magento/module-ui/view/base/requirejs-config.js
15:            uiClass:        'Magento_Ui/js/lib/core/class',

so this is equally valid.

requirejs([
    'uiClass',
], function (Class) {
    'use strict';
    o = new Class;
});

Finally, Magento often uses a pattern when one RequireJS module will extend an object from another RequireJS module which extends an object from another RequireJS, etc. back to the Magento_Ui/js/lib/core/class object. You can see this in the source of the lib/core/collection (aliased uiComponent) and lib/core/element/element (aliased uiElement) RequireJS modules.

The implementation of the base class is beyond the scope of a quickie – but the method extending is done by UnderscoreJS, and the _super implementation comes from the Magento mage/utils/wrapper RequireJS wrapper module at

lib/web/mage/utils/wrapper.js

Copyright © Alan Storm 1975 – 2019 All Rights Reserved

Originally Posted: 13th June 2016