JavaScript mixins | 易学教程

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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的文件列表。

来源：oschina

链接：https://my.oschina.net/u/3623541/blog/3153639

标签

jquery widget

magento

requirejs

jquery

Entry