xx_sw_dp/public/static/MicroFrontend.js

/*
 * @Author: sjl
 * @Date: 2023-04-26 10:55:12
 * @Descripttion:
 */
class MicroFrontend {
  constructor() {
    this.apps = {}; // 存储子应用的信息
    this.globalData = {}; // 存储全局数据
    this.init();
  }

  // 初始化方法
  init() {
    // 监听子应用的消息
    window.addEventListener('message', (event) => {
      console.log('父消息：', event);
      const { data, source } = event;
      if (data.type === 'register') {
        // 子应用注册
        this.apps[data.name] = {
          source,
          loaded: false,
        };
      } else if (data.type === 'logout') {
        if (globalEvent.wlwLogin) {
          globalEvent.wlwLogin();
          globalEvent.wlwLogin = null;
        }
      } else if (data.type === 'js') {
        eval(data.message);
      } else if (data.type === 'loaded') {
        // 子应用加载完成
        this.apps[data.name].loaded = true;
      } else if (data.type === 'setGlobalData') {
        // 设置全局数据
        this.globalData[data.key] = data.value;
      } else if (data.type === 'getGlobalData') {
        // 获取全局数据
        const value = this.globalData[data.key];
        source.postMessage(
          {
            type: 'getGlobalData',
            key: data.key,
            value,
          },
          '*'
        );
      }
    });
    return this;
  }

  // 注册子应用
  register(name, id, url, callback) {
    const iframe = document.createElement('iframe');
    iframe.src = url;
    iframe.style.width = '100%';
    iframe.style.height = '100%';
    document.getElementById(id).appendChild(iframe);
    this.apps[name] = {
      source: iframe.contentWindow,
      loaded: false,
    };
    // 发送注册消息给子应用
    // iframe.contentWindow.postMessage({
    //   type: 'register',
    //   name,
    // }, '*');
    iframe.onload = function () {
      callback && callback();
    };
  }

  // 发送消息给子应用
  sendToApp(name, message) {
    const app = this.apps[name];
    // if (app && app.loaded) {
    if (app) {
      app.source.postMessage(message, '*');
    }
  }

  // 设置全局数据
  setGlobalData(key, value) {
    this.globalData[key] = value;
    // 发送设置全局数据的消息给所有子应用
    Object.values(this.apps).forEach((app) => {
      if (app.loaded) {
        app.source.postMessage(
          {
            type: 'setGlobalData',
            key,
            value,
          },
          '*'
        );
      }
    });
  }

  // 获取全局数据
  getGlobalData(key) {
    // 发送获取全局数据的消息给所有子应用
    Object.values(this.apps).forEach((app) => {
      if (app.loaded) {
        app.source.postMessage(
          {
            type: 'getGlobalData',
            key,
          },
          '*'
        );
      }
    });
  }
}