javascript使用mixins · Magento企业级开发实战

mixin是一个类，其方法被添加到另一个类或与另一个类混合。基类包含来自mixin的方法，而不是从mixin继承。这允许您通过向基类添加不同的mixin来添加或增强基类的行为。本小节包含有关如何使用JavaScript混合来覆盖Magento中的组件方法的信息。 ***** **Mixin作用域** 模块mixin的作用域取决于其在视图目录下的目录位置。这允许您以Magento中特定区域的组件实例为目标。下表将目录位置映射到mixin影响的应用程序区域： <table style="table-layout:auto"> <thead> <tr> <th>Directory</th> <th>Scope</th> </tr> </thead> <tbody> <tr> <td><code class="language-plaintext highlighter-rouge">view/frontend</code></td> <td>Storefront</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">view/adminhtml</code></td> <td>Admin panel</td> </tr> <tr> <td><code class="language-plaintext highlighter-rouge">view/base</code></td> <td>All areas (unless a specific <code class="language-plaintext highlighter-rouge">frontend</code> or <code class="language-plaintext highlighter-rouge">adminhtml</code> entry exists)</td> </tr> </tbody> </table> ***** **Mixin files** mixin是位于特定于区域的目录下的web/js目录下的JavaScript文件。mixin文件可以嵌套在更多的目录下，只要这些目录在web/js下。 ***** **Mixin格式** Magento中的mixin被编写为返回回调函数的AMD模块。此函数接受目标组件（模块）作为参数，并返回模块。这允许您在应用程序中使用目标组件之前，返回目标组件的新实例及其附加的修改。 ***** ### **示例：** 扩展UI组件下面是一个mixin示例，它使用一个函数扩展目标组件，该函数向列元素引入新的blockVisibility属性。 `File:ExampleCorp/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小部件下面是一个mixin示例，它使用一个函数扩展了模态小部件，该函数添加了对模态关闭的确认。 `File: ExampleCorp/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对象 JS mixin的另一个用例是当基本Javascript文件返回一个对象时。在这种情况下，需要一个包装器。下面的示例MIXIN扩展了StaveNavigor对象的SthHASE方法。这里，this.\\u super（）是基本方法，如果需要，可以调用它。 `File: ExampleCorp/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示例，它向“处理结算”功能添加了其他功能。 `File: ExampleCorp/Sample/view/frontend/web/js/proceed-to-checkout-mixin.js` ``` 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 }); }; }); ``` 声明mixins mixin在requirejs-config.js配置文件的Mixins属性中声明。此文件必须在定义mixin的同一特定于区域的目录中创建。 requirejs-config.js中的mixin配置使用目标组件的路径将其与mixin关联。实例以下是requirejs-config.js文件的示例，该文件将前面示例中定义的columns-mixin、modal-widget-mixin、tep-navigator-mixin和proceed-to-checkout-mixin混合添加到grid column component, modal widget, step navigator object, and proceed to checkout function `File: ExampleCorp/Sample/view/base/requirejs-config.js` ``` var config = { config: { mixins: { 'Magento_Ui/js/grid/controls/columns': { 'ExampleCorp_Sample/js/columns-mixin': true }, 'Magento_Ui/js/modal/modal': { 'ExampleCorp_Sample/js/modal-widget-mixin': true }, 'Magento_Checkout/js/model/step-navigator': { 'ExampleCorp_Sample/js/model/step-navigator-mixin': true }, 'Magento_Checkout/js/proceed-to-checkout': { 'ExampleCorp_Sample/js/proceed-to-checkout-mixin': true } } } }; ``` 在Magento中mxins示例以下是Magento\_CheckoutAgreement模块中声明和定义修改签出行为的混合的文件列表： ``` view/frontend/requirejs-config.js view/frontend/web/js/model/place-order-mixin.js view/frontend/web/js/model/set-payment-information-mixin.js ```