javascript - 模块化 JS 中的类扩展

Question

假设我有一个通用类模块:

export class MyCalc {
    data = {}
    ...
}

并说我想扩展更多功能:

export class MyCalcLoader {
    load = some_data => {
        this.data = some_data;
    }
}

export class MyCalcUI {
    print = () => {
        document.write(JSON.stringify(this.data));
    }
}

扩展 MyCalc 并使用这些扩展/插件的适当方法是什么？

import {MyCalc} from "./MyCalc.js";
import {MyCalcLoader} from "./MyCalcLoader.js";
import {MyCalcUI} from "./MyCalcUI.js";

// TODO: MakeMyCalcExtendLoaderAndUi();

class BankingCalc extends MyCalc {
    config = {...}
    constructor() {
        super();
    }
}

const banking_calc = new BankingCalc();
banking_calc.load({...});
banking_calc.print();

我已经考虑了几种不同的笨拙方法来做到这一点，但我确信这很常见，并且有一个正确的方法可以使用 vanilla ES6 来做到这一点。

Answer 1

你可以使用 Mixins:

 export const MyCalcLoader = Super => class MyCalcLoader extends Super {
  load = some_data => {
    this.data = some_data;
  }
 }

 export const MyCalcUI = Super => class MyCalcUI extends Super {
   print = () => {
     document.write(JSON.stringify(this.data));
  }
}

然后将类组成为:

 class BankingCalc extends MyCalcLoader(MyCalcUI(MyCalc)) {
  //...
 }