JavaScript mixins

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

来源：赣州网站优化