在基於qiankun來進行微前端應用開發過程中，難免會碰到應用之間通訊的情況，如基於某個業態下某些定製化的業務需求。這時候就涉及到某個子應用需要知道當前的"宿主"是誰(標識是哪一個私有化專案定製的業務需求)，而要知道"宿主"是誰，就需要"宿主"主動告知某個子應用，這就需要涉及到主、子應用資料通訊。微前端下應用之間通訊方式
- 基於
qiankun框架自帶的通訊方式：通過api中的initGlobalState進行通訊 - 基於三方庫的通訊方式：如
@ice/stark-data進行通訊
基於qiankun自帶的通訊方式
基於@ice/stark-data通訊方式
基於@ice/stark-data的微前端架構模式下的通訊方式可以實現主、子應用之間互相的通訊方式(全雙工)，表現如下：
- 主->子：針對這種場景，可以使用
@/ice/stark-data庫中的store物件的set、get方式實現 - 子->主：針對這種場景，可以使用
@/ice/stark-data庫中的event物件的emit、on方式實現 - 子->子：針對這種場景，可以使用
@/ice/stark-data庫中的store物件的set、get方式實現
@ice/stark-data原始碼分析
我們知道在基於VueJs或ReactJs三方狀態管理庫vuex或redux等，其對資料的儲存都是儲存在記憶體中的(非永續性)。同樣@ice/stark-data在對資料進行儲存的時候，是通過基於某個名稱空間結合window物件進行儲存的，也是非永續性的。但@ice/startk-data 實現了簡單的釋出訂閱機制，通過全域性的 window 共享應用間的資料，一般情況下內容會比較簡單
而 vuex 和 redux 都是狀態管理方案在使用場景上是不同
注：當前解析的原始碼版本是0.1.3，倉庫地址：https://github.com/ice-lab/ic...
整個@ice/stark-data庫的原始碼其實比較簡單，由以下幾個部分組成：
utils.ts：工具集，總共包含三個函式isObject、isArray、warn，分別用於判斷某個變數是否是物件、陣列型別及警告資訊輸出的函式封裝。cache.ts：基於名稱空間ICESTARK及window全域性物件封裝的用於存取的函式setCache、getCache，這裡使用了名稱空間，在一定程度上也能夠避免了window全域性物件上變數的汙染問題。store.ts：主要實現了主應用與子應用、子應用與子應用單向資料通訊event.ts：主要實現了子應用與主應用單向資料通訊index.ts：將store、event進行按需匯出
可以看出，整個庫中的核心程式碼在store.ts與event.ts檔案中，接下來就專門針對這兩個檔案中的程式碼進行解析。
store.ts原始碼解析
當我們需要從主應用中傳遞資料給子應用時，基於@ice/stark-data的一般做法如下：
主應用設定資料
import { store } from '@ice/stark-data' store.set('someData', 'darkCode')子應用接收資料
import { store } from '@ice/stark-data' const data: any = store.get('someData')
在store.ts中。在第11到14行程式碼之間，定義了一個名為IO的介面。並在該介面中分別定義了set與get方法：
interface IO {
set(key: string | symbol | object, value?: any): void;
get(key?: StringSymbolUnion): void;
}其中set方法接收兩個引數，key的型別是一個聯合型別，value是任意型別的變數。該方法無返回值。
而get方法接收一個引數，key的型別是一個聯合型別。該方法也是無返回值？
在第16到20行程式碼之間，定義了一個名為Hooks的介面。並在該介面中分別定義了on、off、has三個方法：
interface Hooks {
on(key: StringSymbolUnion, callback: (value: any) => void, force?: boolean): void;
off(key: StringSymbolUnion, callback?: (value: any) => void): void;
has(key: StringSymbolUnion): boolean;
}介面Hooks的主要作用是用來針對資料進行訂閱釋出處理及針對對應的"事件"進行"銷燬"處理。
在程式碼的第22行，定義了Store類，該類同時實現了IO與Hooks這兩個介面。class Store implements IO, Hooks
在類Store中分別定義了store與storeEmitter兩個屬性，並在建構函式中對其進行初始化操作：
store: object;
storeEmitter: object;
constructor() {
this.store = {};
this.storeEmitter = {};
}接下來是定義了兩個"私有"方法，_setValue、_getValue分別對"資料"進行"寫入"及"輸出"。
_getValue(key: StringSymbolUnion) {
return this.store[key];
}
_setValue(key: StringSymbolUnion, value: any) {
this.store[key] = value;
this._emit(key);
}在_setValue的實現中，先對例項物件屬性store物件掛載key屬性，並設定其值為value。同時將該key通過呼叫_emit方法從_getValue中取出對應的值，並從屬性storeEmitter中取出對應的"觸發器"(keyEmitter)，然後對其遍歷執行對應的回撥。
接下來是重寫實現IO介面中的set與get方法。先來看set方法(67行到84行)的實現：
set<T>(key: string | symbol | object, value?: T) {
if (typeof key !== 'string'
&& typeof key !== 'symbol'
&& !isObject(key)) {
warn('store.set: key should be string / symbol / object');
return;
}
if (isObject(key)) {
Object.keys(key).forEach(k => {
const v = key[k];
this._setValue(k, v);
});
} else {
this._setValue(key as StringSymbolUnion, value);
}
}內部首先判斷引數key變數的型別，如果不是string、symbol、object型別之一，則之間進行return。反之，先判斷key變數如果是一個object型別，則獲取到key"物件"中的屬於"鍵"，並進行遍歷。在遍歷的過程中獲取k對應的v。在呼叫例項物件的內部方法_setValue來儲存資料(值)；如果key不是物件型別，之間呼叫例項物件的內部方法_setValue來儲存資料(值)。
而get方法是通過key來獲取對應儲存的資料(值)，先判斷引數key的型別如果不是string、symbol之一，則返回null。反之呼叫內部方法_getValue來獲取值
接下來是對實現介面Hooks中的三個方法進行重寫。先來看第一個方法on（在86行到106行）：
on(key: StringSymbolUnion, callback: (value: any) => void, force?: boolean) {
if (typeof key !== 'string' && typeof key !== 'symbol') {
warn('store.on: key should be string / symbol');
return;
}
if (callback === undefined || typeof callback !== 'function') {
warn('store.on: callback is required, should be function');
return;
}
if (!this.storeEmitter[key]) {
this.storeEmitter[key] = [];
}
this.storeEmitter[key].push(callback);
if (force) {
callback(this._getValue(key));
}
}on方法接收三個引數：
key：引數key是string與symbol的聯合型別callback：引數callback是一個回撥函式force：引數force是一個可選引數，型別是一個boolean型別
從原始碼實現可以看出，on方法的主要作用是基於key與callback引數來對storeEmitter進行元素儲存的過程。如果引數force為true，則通過引數key從方法_getValue中獲取對應的值作為回撥函式callback的引數，並執行回撥函式callback。
對於第二個方法off(在108行到125行)，實現如下：
off(key: StringSymbolUnion, callback?: (value: any) => void) {
if (typeof key !== 'string' && typeof key !== 'symbol') {
warn('store.off: key should be string / symbol');
return;
}
if (!isArray(this.storeEmitter[key])) {
warn(`store.off: ${String(key)} has no callback`);
return;
}
if (callback === undefined) {
this.storeEmitter[key] = undefined;
return;
}
this.storeEmitter[key] = this.storeEmitter[key].filter(cb => cb !== callback);
}off方法接收兩個引數：
key：引數key是string與symbol的聯合型別callback：引數callback是一個回撥函式
從原始碼實現可以看出，off方法的主要作用是基於例項物件的storeEmitter屬性結合key來過濾掉callback(類似從陣列中刪除某個元素。)
緊接著，通過呼叫函式getCache來建立變數store，如果變數store沒有值，則呼叫類Store建立一個例項物件賦值給store變數，並將該變數掛載到以storeNameSpace為名稱空間的window物件上。最後將該store變數匯出。
let store = getCache(storeNameSpace);
if (!store) {
store = new Store();
setCache(storeNameSpace, store);
}
export default store;小總結：
- 當我們呼叫
store.set方法通過鍵值對(key、value)的形式設定某個值的時候，內部先判斷key的型別，如果key是物件型別。那麼通過Object.keys方法獲取該物件上的所有屬性，並針對屬性集進行遍歷取出屬性(k)對應的值(v)，然後呼叫store例項內部的_setValue方法，將對應屬性(k)的值(v)賦值給例項store屬性。然後呼叫內部方法_emit方法，根據屬性k從例項屬性storeEmitter、及呼叫內部方法_getValue中獲取對應的值(keyEmitter、value)。最後遍歷陣列keyEmitter中的每一項元素(回撥函式)，並以value作為引數執行其回撥函式。 - 該庫的實現過程中，對於名稱空間的使用，目的在於隔離(直接)造成
window物件屬性的汙染。 - 當我們呼叫
store.get方法通過鍵|屬性(key)來獲取對應的值的時候，內部會先判斷key是否存在，不存在則之間返回例項物件的store屬性；如果key存在，但其型別不是string/symbol之一，則返回null。反之，呼叫例項內部的_getValue方法通過屬性key從例項屬性store中獲取到對應的值。 - 這裡
Store類中的兩個屬性store及storeEmitter在對其進行定義及值存取操作中，涉及到了佇列的操作。兩個屬性的型別都是"物件"型別，但也可以定義為陣列型別(從實現的角色來看)或者通過WeakMap處理會更好。
event.ts原始碼解析
在基於@ice/stark-data處理從子應用傳遞資料到主應用時，做法一般如下：
子應用：
import { event } from '@ice/stark-data' event.emit('refreshToken', 'cdacavfsasxxs')主應用
import { event } from '@ice/stark-data' event.on('refreshToken', (val: any) => { console.log('the value from subApp is:', val) })
這種實現是藉助釋出訂閱模式來實現，類似於VueJs中子元件與父元件之間通訊的情況。接下來從原始碼的角度去理解它們內部的實現細節。
在store.ts程式碼中，第6行程式碼定義了一個常量eventNameSpace的名稱空間const eventNameSpace = 'event';，在第8行程式碼定義了一個聯合型別StringSymbolUnion(型別的定義)，type StringSymbolUnion = string | symbol;
接著在第10行到15行定義了介面Hooks，並在其內部定義了四個方法，分別是：
emit：emit(key: StringSymbolUnion, value: any): void;該方法在實現階段的作用在於針對的訂閱"事件"，從佇列中遍歷出所以的"事件"，並執行對應的回撥。on：on(key: StringSymbolUnion, callback: (value: any) => void): void;該方法在實現階的作用在於將回撥函式callback儲存在佇列中off：off(key: StringSymbolUnion, callback?: (value: any) => void): void;該方法在實現階的作用在於從佇列中找到不屬於callback的元素進行移除(過濾)操作has：has(key: StringSymbolUnion): boolean;該方法在實現階的作用在於基於某個key判斷佇列中對應的"值"集合是否存在，並返回一個布林型別的值。
在event.ts檔案中的第17行定義了類Event並實現了Hooks介面class Event implements Hooks，該類Event中定義了屬性eventEmitter，並在建構函式中對其進行初始化操作。
eventEmitter: object;
constructor() {
this.eventEmitter = {};
}接下來就是對介面Hooks中定義的四個方法分別進行了重寫實現。先來看下on方法的實現：
on(key: StringSymbolUnion, callback: (value: any) => void) {
if (typeof key !== 'string' && typeof key !== 'symbol') {
warn('event.on: key should be string / symbol');
return;
}
if (callback === undefined || typeof callback !== 'function') {
warn('event.on: callback is required, should be function');
return;
}
if (!this.eventEmitter[key]) {
this.eventEmitter[key] = [];
}
this.eventEmitter[key].push(callback);
}從原始碼可以看出on方法的實現其實也很簡單，與store.ts程式碼中類Store中on方法的實現幾乎是一樣的。這裡就不在詳細說了。
至於另外三個方法的實現，也與之前提到的類Store中對應的這三個方法的實現幾乎一樣，也不細說。
最後通過呼叫函式getCache來建立一個物件型別的變數event，然後event不存在(值為null、undefined等)。則呼叫類Event通過new關鍵詞建立出來的物件例項賦值給變數event，同時呼叫setCache函式將變數event基於名稱空間常量eventNameSpace掛載到window物件上。然後匯出該變數event(物件型別)。
總結
- 基於
@ice/stark-data在微前端框架qiankun中實現的主、子應用之間全雙工通訊的實現很簡單，核心是基於釋出訂閱者模式去實現，以不同的名稱空間變數作為區分，將對應屬性(key)的值(value)掛載在全域性window物件上，這樣對於在同一個"應用"裡，只要知道了對應的名稱空間，就能夠訪問到其對應的值； @ice/stark-data原始碼的封裝存在一些不足的地方，比如在store.ts與event.ts中分別定義的Hooks介面，沒有達到複用的效果(各自都定義了一次，沒必要)。另外store.ts與event.ts中分別針對類Store、Event定義中部分方法程式碼的實現是一樣的，沒必要兩邊都各自實現一次，可以寫一個基類(父類)，然後從其進行繼承extends。針對需要重寫的方法再進行重寫會好很多；- 原始碼中對於程式碼健壯性的處理還是不錯的，比如類
Event中實現的四個方法中，對於key的判斷處理。