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 ```