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

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

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 方法添加额外方法的示例。

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

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

来源：赣州网站优化

巴特西

JavaScript mixins

最新文章

热门文章