微内核/插件化的架构设计

app.use(pinia)

classmyWebpackPlugin{  apply(compiler) {    // 该钩子在输出资源到目标目录前被触发    compiler.hooks.emit.tapAsync('myWebpackPlugin', (compilation, callback) => {      // 执行插件的具体功能      callback()    })  }}

// 计算器核心class Calculator {  constructor() {    // 存储计算规则    this.rules = new Map();  }  // 注册规则  use({ name, fn }) {    this.rules.set(name, fn);  }  // 调用者，不负责具体处理逻辑  calc(ruleName, ...args) {    const calcFn = this.rules.get(ruleName);    if (!calcFn) {      throw new Error("不存在这个计算规则");    }    return calcFn(...args);  }}

const add = {  name: "add",  fn: (a, b) => a + b,};// 减法规则插件协议const sub = {  name: "sub",  fn: (a, b) => a - b,};

const calculator = new Calculator();// 像 Vue 一样注册插件calculator.use(add);calculator.use(sub);// 使用计算器const res1 = calculator.calc("add", 5, 5);console.log(res1); // 10const res2 = calculator.calc("sub", 5, 2);console.log(res2); // 3

const multiply = {  name: "multiply",  fn: (a, b) => a * b,};calculator.use(multiply)const res3 = calculator.calc("multiply", 3, 2);console.log(res3); // 6