Magento2 Knockout框架下组件如何实现逻辑继承与公共代码复用

针对你的场景，Magento2的UI组件体系原生支持两种逻辑复用方案，都可以满足需求，不需要用修改第三方组件的全局mixin：

方案1：创建公共基础组件（最适配你的场景） #

Magento2的UI组件本身基于原型继承设计，你可以把共享逻辑抽成一个基础父组件，两个业务组件直接继承该父组件即可，和PHP的类继承逻辑一致。

步骤1：抽离公共基础组件 #

在你的模块下新建 view/frontend/web/js/base/product-package-base.js，存放所有共享逻辑：

define(['uiComponent'], function (Component) {
    return Component.extend({
        store_id: 0,

        initialize: function (config) {
            this._super(); // 调用原生uiComponent的初始化逻辑
            this.store_id = config.store_id;
            this.initTranslations(config.productPackage);
        },
        initTranslations: function (productPackage) {
          // 公共的翻译逻辑统一放在这里
        },
        children: function(){
         // 公共的获取子项逻辑统一放在这里
        }
    });
});

步骤2：业务组件继承基础组件 #

你的ProductPackage组件改写为：

define(['你的模块名/js/base/product-package-base'], function (PackageBase) {
    return PackageBase.extend({
        // 这里只需要写ProductPackage独有的逻辑，公共逻辑不用重复写
        openPopup: function () {
            // 打开模态框的独有业务逻辑
        }
    });
});

同理ProductPackagePopup组件改写为：

define(['你的模块名/js/base/product-package-base'], function (PackageBase) {
    return PackageBase.extend({
        // 这里只需要写模态框独有的逻辑
        closePopup: function () {
            // 关闭模态框、渲染子项详情的独有逻辑
        }
    });
});

方案2：trait式对象混入（适合多源逻辑组合场景） #

如果你有多个无关联的组件需要复用部分零散逻辑，不想维护继承链，可以用原生支持的多对象混入，效果和PHP的trait完全一致。

步骤1：抽离独立的公共逻辑模块 #

比如你可以把翻译逻辑单独抽成一个混入模块，存为view/frontend/web/js/mixin/translation-mixin.js：

define([], function () {
    return {
        store_id: 0,
        initTranslations: function (productPackage) {
            // 公共翻译逻辑
        }
    };
});

步骤2：组件引入混入模块 #

需要用到该逻辑的组件直接把混入对象作为extend的参数传入即可，会自动合并到组件的原型上：

define(['uiComponent', '你的模块名/js/mixin/translation-mixin'], function (Component, translationMixin) {
    return Component.extend(translationMixin, {
        // 组件独有逻辑
        initialize: function (config) {
            this._super();
            this.store_id = config.store_id;
            this.initTranslations(config.productPackage);
        }
    });
});

内容的提问来源于stack exchange，提问作者user2594875