前端组件通信新解：实例劫持+中介者模式，摒弃State和Context束缚

2024-01-12 05:19:01

在前端开发中，组件通信是一个常见且至关重要的课题。传统的方式通常依赖于状态管理工具（如 Redux、Vuex）或上下文（Context），但这可能会带来复杂性和性能问题。本文将探讨一种突破传统桎梏的创新组件通信方案——实例劫持和中介者模式，让你领略前端通信的别样天地。

实例劫持：巧用类属性

实例劫持是一种利用类属性来实现跨组件通信的技术。通过在类的原型中定义一个属性，我们可以直接访问另一个组件的实例。让我们举个例子：

class ComponentA {
  static instance; // 定义静态属性

  constructor() {
    this.data = '我是组件A';
  }

  getData() {
    return this.data;
  }
}

class ComponentB {
  constructor() {
    ComponentA.instance = this; // 劫持ComponentA实例
  }

  callComponentA() {
    const data = ComponentA.instance.getData(); // 调用ComponentA的方法
    console.log(data);
  }
}

在这个例子中，ComponentB通过实例劫持获得了对ComponentA实例的访问权限，从而可以调用ComponentA的方法和获取其数据。

中介者模式：协调全局通信

中介者模式是一种设计模式，它为各个对象之间提供了一个集中通信的平台。在组件通信中，我们可以使用中介者来协调各个组件之间的交互。

class Mediator {
  components = []; // 存储组件实例

  register(component) {
    this.components.push(component);
  }

  send(message, from, to) {
    const target = this.components.find(c => c.name === to);
    if (target) {
      target.receive(message, from);
    }
  }
}

class ComponentC {
  constructor() {
    this.name = 'ComponentC';
    mediator.register(this); // 注册到中介者
  }

  receive(message, from) {
    console.log(`收到来自${from}的消息：${message}`);
  }

  sendMessage(message, to) {
    mediator.send(message, this.name, to); // 通过中介者发送消息
  }
}

class ComponentD {
  constructor() {
    this.name = 'ComponentD';
    mediator.register(this); // 注册到中介者
  }

  receive(message, from) {
    console.log(`收到来自${from}的消息：${message}`);
  }
}