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();

我已经考虑过几种不同的方法来做到这一点，但是我敢肯定，这已经足够普遍了，并且有一种正确的方法可以使用香草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)) {
  //...
 }

模块化JS中的类扩展

1 个答案: