微前端工程之間的通訊
原理
使用發(fā)布訂閱者模式：一方訂閱，一方發(fā)布冤灾。
使用單例模式：一個(gè)工程內(nèi)使用同一個(gè)實(shí)例前域。
微前端加載，首先加載父工程韵吨，隨后根據(jù)配置加載對(duì)應(yīng)的一個(gè)或者多個(gè)子工程话侄。
父工程先一步生成實(shí)例，并傳遞給子工程学赛。子工程則使用這個(gè)實(shí)例初始化自己的實(shí)例。 共享同一個(gè)實(shí)例吞杭。
代碼
import { getState } from "./utils";
let instance: BusInstance | null = null;
class BusInstance {
private queue: Function[] = [];
subscription = (cb: Function) => {
this.queue.push(cb);
};
unsubscription = (cb: Function) => {
this.queue = this.queue.filter((item) => item !== cb);
};
notify = (data: any) => {
this.queue.forEach((cb) => {
if ("[object Function]" === Object.prototype.toString.call(cb)) {
cb(data);
}
});
};
}
export function init(value: BusInstance) {
// 父工程將自己的 bus 實(shí)例盏浇，傳遞給子工程
// 子工程調(diào)用 init 函數(shù)，這樣父子工程共享同一個(gè)實(shí)例
instance = value;
}
export default function Bus() {
// 使用單例模式
// 除了第一次返回的都是同一個(gè)實(shí)例
if (!instance) {
instance = new BusInstance();
}
return instance;
}
export function subscription(func: Function) {
const bus = Bus();
bus.subscription(func);
}
export function unsubscription(func: Function) {
const bus = Bus();
bus.unsubscription(func);
}
export function notify(data: { type: string; payload: any }) {
const bus = Bus();
// 使用 setTimeout 原因是芽狗，防止在 reducer 中調(diào)用 notify 函數(shù)绢掰，導(dǎo)致觸發(fā)另外一個(gè)
reducers
setTimeout(() => {
bus.notify(data);
});
}
export function destory() {
instance = null;
}
export function initGlobal(global: any) {
setTimeout(() => {
const [state, store] = getState();
if (store) {
store.dispatch({ type: "global/initGlobal", payload: global() });
}
});
}
使用以 @umijs/plugin-qiankun 為例
本質(zhì)上使用 single-spa 用法一致，主要是需要共享實(shí)例。
主工程
import Bus from "@static/common/bus";
import { getState, cloneDeep } from "@static/common/utils";
export const qiankun = function () {
return Promise.resolve({
apps: window.SUB_APP_CONFIG.map(({ name, entry, base }) => ({
name,
entry,
base,
props: {
// 父工程生成實(shí)例傳遞給子工程
3 / 5
bus: Bus(),
global() {
const [state] = getState();
if (state) {
return cloneDeep(state.global);
}
return {};
},
},
})),
prefetch: true,
defer: true,
lifeCycles: {
beforeLoad() {
loadingFn(true);
},
beforeMount() {
loadingFn(false);
},
},
});
};
import { Effect, qiankunStart, Reducer } from "umi";
import { getSideOptions, getState } from "@static/common/utils";
import { notify, subscription } from "@static/common/bus";
import globalModel, { GlobalState } from "@static/models/global";
const { namespace, state, reducers, effects, subscriptions } = globalModel;
const newEffects: {
[index: string]: Effect;
} = {
...effects,
*authUserInfo(anyAction, effectsCommandMap) {
if (effects) {
yield effects.authUserInfo(anyAction, effectsCommandMap);
if (window.singleSpaNavigate) {
setTimeout(() => {
qiankunStart();
});
}
}
},
};
const newReduccers: {
[index: string]: Reducer<GlobalState | undefined>;
} = {
...reducers,
updateCollapsed(state, { payload }) {
4 / 5
if (!state) return state;
state.collapsed = payload;
// 發(fā)布消息
notify({ type: "global/updateCollapsed", payload });
if (payload) {
state.nav.openKeys = "";
} else {
const { openKeys } = getSideOptions(state.nav.data || []);
state.nav.openKeys = openKeys;
}
state.nav = { ...state.nav };
return { ...state };
},
};
export default {
namespace,
state,
reducers: newReduccers,
effects: newEffects,
subscriptions,
};
子工程
import {
initGlobal,
init,
destory,
subscription,
unsubscription,
} from "@static/common/bus";
import { getState } from "@static/common/utils";
function baseFunc(data: any) {
const [, store] = getState();
if (store) {
const { type, payload } = data;
if ("global/updateCollapsed" === type) {
store.dispatch({ type, payload });
}
}
}
export const qiankun = function () {
if (window.singleSpaNavigate) {
return {
async bootstrap(props: any) {
// 共享實(shí)例
init(props.bus);
// 訂閱
5 / 5
subscription(baseFunc);
},
async mount(props: any) {
initGlobal(props.global);
},
async unmount() {
// 取消訂閱
unsubscription(baseFunc);
destory();
},
};
}
return Promise.resolve();
};
注意：理論上只要共享了實(shí)例滴劲，可以是父子攻晒、兄弟等等之間互相發(fā)送消息
