Magento 2’s Base Javascript Class

原文地址

Magento 2 的核心 javascript library 实现了一个基于类的基础 object system(Magento 2’s core javascript library ships with a basic implementation of a class based object system),uiComponent 广泛地使用了这些基本类和对象。这个基本类就是 Magento_Ui/js/lib/core/class ,你可以通过 javascript 的 new 关键字来创建这个基础类的实例。

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

UiClass {ignoreTmpls: {…}}

你可以使用基础类的 extend 方法去创建子类。通过 extend 方法传递 key/function 对去定义方法。Magento 的对象有一个类似 constructor 的方法叫做 initialize,它在实例化对象的时候被调用。你可以通过 this._super() 来调用父类的方法。只能在方法体中调用 _super —— 该方法并不是”公有的” (not exposed publicly)

在下面的例子中,我们定义两个类 A 和 B 。 A 继承基础类,B 继承 A,定义好类以后,我们实例化一个 B 类,然后调用该对象的 hello 方法:

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);
});


Called A's initialize/constructor
Called B's initialize/constructor
Hello
Hello Again
UiClass {_super: undefined, ignoreTmpls: {…}, foo: "foo", bar: "BIG BAR", baz: "baz"}

Magento_Ui/js/lib/core/class 的别名是 uiClass

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

所以下面这样也是等价的:

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

lib/core/element/element(别名 uiElement) 继承自 Magento_Ui/js/lib/core/class,而 lib/core/collection (别名 uiComponent) 继承自 uiElement

讲解基础类的是怎么实现的超出了本文的范围。不过 extend 方法是通过 Underscore JS 实现的,_super 则来自于 mage/utils/wrapper (也就是 lib/web/mage/utils/wrapper.js)

发表评论

电子邮件地址不会被公开。 必填项已用*标注