Class 模块化 JS 扩展

Question

假设我有一个通用 class 模块：

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 并使用那些 extensions/plugins 的适当方法是什么？

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为：

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

Class 模块化 JS 扩展

Class Extensions in Modular JS

javascript

extension-methods

class

ecmascript-6