JavaScriptmixins

  • Z时代
  • 2024-01-10
  • 分类：综合

编程

mixin 是一个类，该类的方法被添加，混合进另外一个类。
一个基础类会包含mixin类的方法而不是继承它。这样你就可以使用不同的mixin类来增加或者增强基础类的功能。

这编内容包含怎么样使用javascript mixin来重写Magento组件的方法。

Mixin Scope
一个模块的作用域（scope）取决于其在view目录下的目录位置。这样你就可以定位magento特定位置的特定组件实例。

下表对minxin应用区域和其目录位置做了映射。

Directory

Scope

view/frontend

Storefront

view/adminhtml

Admin panel

view/base

All areas (unless a specific frontend or adminhtml entry exists)

Mixin文件
位置
Minxins是在特定区域目录web/js目录下的javascript文件。只要mixin文件在web/js目录下，它可被嵌套到多个目录。
格式
Magento内的mixin被写成一个返回回调方法的AMD模块。这个方法接收目标组件（模块）作为参数同时会返回一个模块。
举例：
扩展UI组件（component）
以下是minxin通过引入新的blockvisibility属性到一个列元素来扩展目标组件的一个示例。

File: OrangeCompany/Sample/view/base/web/js/columns-mixin.js

define(function () {
    "use strict";
    var mixin = {
        /**
         *
         * @param {Column} elem
         */
        isDisabled: function (elem) {
            return elem.blockVisibility || this._super();
        }
    };
    return function (target) { // target == Result that Magento_Ui/.../columns returns.
        return target.extend(mixin); // new result that all other modules receive
    };
});

扩展jQuery Widget
下面是一个mixin的示例，该mixin扩展了模态窗口小部件，并添加了模态关闭确认的功能。
文件：OrangeCompany/Sample/view/base/web/js/modal-widget-mixin.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

define(["jquery"], function ($) {
    "use strict";
    var modalWidgetMixin = {
        options: {
            confirmMessage: "Please, confirm modal closing."
        },
        /**
         * Added confirming for modal closing
         *
         * @returns {Element}
         */
        closeModal: function () {
            if (!confirm(this.options.confirmMessage)) {
                return this.element;
            }
            return this._super();
        }
    };
    return function (targetWidget) {
        // Example how to extend a widget by mixin object
        $.widget("mage.modal", targetWidget, modalWidgetMixin); // the widget alias should be like for the target widget
        return $.mage.modal; //  the widget by parent alias should be returned
    };
});

 扩展JS对象
另一个mixin的使用使用场景是当基础javascript文件返回一个对象。这种情况下，包装是必要的。以下mixin示例扩展step navigatior setHash方法。这里的this._super()是可以被调用的基础方法。
 

File: OrangeCompany/Sample/view/frontend/web/js/model/step-navigator-mixin.js 

1
2
3
4
5
6
7
8
9
10
11
12
13
14

define([
    "mage/utils/wrapper"
], function (wrapper) {
    "use strict";
    return function (stepNavigator) {
        stepNavigator.setHash = wrapper.wrapSuper(stepNavigator.setHash, function (hash) {
            this._super(hash);
            // add extended functionality here or modify method logic altogether
        });
        return stepNavigator;
    };
});

扩展js方法
以下是为mixin为proceed to checkout 方法添加额外方法的示例。

1
2
3
4
5
6
7
8
9
10
11
12

define([
    "mage/utils/wrapper"
], function (wrapper) {
    "use strict";
    return function (proceedToCheckoutFunction) {
        return wrapper.wrap(proceedToCheckoutFunction, function (originalProceedToCheckoutFunction, config, element) {
            originalProceedToCheckoutFunction(config, element);
            // add extended functionality here
        });
    };
});

声明一个mixin
Mixins是在requirejs-config.js配置文件的mixins属性里声明的。这个文件必须在该mixins属性指定的位置创建。
requirejs-config.js里的mixins配置会把目标组件和mixin通过路径相关联。

示例：

以下是一个requirejs-config.js文件的示例，该示例把上面定义的 columns-mixin, modal-widget-mixin, step-navigator-mixin, and proceed-to-checkout-mixin mixins添加到 grid column component, modal widget, step navigator object, and proceed to checkout function.
文件：
OrangeCompany/Sample/view/base/requirejs-config.js

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

var config = {
 config: {
     mixins: {
         "Magento_Ui/js/grid/controls/columns": {
             "OrangeCompany_Sample/js/columns-mixin": true
         },
         "Magento_Ui/js/modal/modal": {
             "OrangeCompany_Sample/js/modal-widget-mixin": true
         },
         "Magento_Checkout/js/model/step-navigator": {
             "OrangeCompany_Sample/js/model/step-navigator-mixin": true
         },
         "Magento_Checkout/js/proceed-to-checkout": {
             "OrangeCompany_Sample/js/proceed-to-checkout-mixin": true
         }
     }
 }
};

 Magento中Mixin示例
以下是Magento_CheckoutAgreement模块为修改结账行为，声明和定义mixin的文件列表。

  • view/frontend/requirejs-config.js

  • view/frontend/web/js/model/place-order-mixin.js

  • view/frontend/web/js/model/set-payment-information-mixin.js

 

 

 

以上是 JavaScriptmixins 的全部内容， 来源链接： utcz.com/z/512372.html

回到顶部