微前端 之 icestark 源码阅读
fengshi123 opened this issue · 0 comments
一、前言
在之前《微前端探索》文章中，我们分析了微前端框架 single-spa 和 qiankun 的一些源码、原理等，本文再对社区另外一个微前端框架 icestark 做一个简单整理分析，帮助各位想探索微前端的同学有个感性的认识。
二、 源码目录
icestark 源码的主要目录结构如下所示，主要包括 packages 和 src 两个目录，相关总结整理如下，我们不会一行一行去讲解代码，如果你对某一块很感兴趣，可以自己去 github 上面 clone 代码库，源码还是非常简单易懂的。
三、重要代码整理
1、子应用状态管理
我们学习 single-spa 的时候总结到 single-spa 是一个状态机，负责管理各个子应用的状态。所以 icestark 必然存在这个子应用的状态管理，相关的实现在 src/apps.ts 文件中，其包括以下几个主要过程/方法：
- registerMicroApp：注册子应用的方法，将子应用添加到全局 microApps 数组变量中；
- createMicroApp：创建子应用的方法，包括加载子应用的资源等；
- mountMicroApp：挂载子应用的方法，将子应用挂载到容器中；
- unmountMicroApp：卸载子应用的方法，将子应用从容器中卸载；
- unloadMicroApp：unload 子应用的方法，包括移除子应用的资源等；
- removeMicroApp：移除子应用的方法，将子应用从全局 microApps 数组中移除；
以上方法实现的思路还是比较简单的，定义个全局 microApps 数组变量来保存子应用，然后每个子应用分别有个对应的 status 变量来表示该子应用的状态是怎样的，然后进行下一步操作时会根据当前的状态进行对应的下一步操作，以下我们挑选个最“复杂”的方法 createMicroApp 来看下，我们对代码进行了相关注释，还是比较简单的，就不再赘述了。
export async function createMicroApp(app: string | AppConfig, appLifecyle?: AppLifecylceOptions) {
const appConfig = getAppConfigForLoad(app, appLifecyle);
const appName = appConfig && appConfig.name;
if (appConfig && appName) {
if (appConfig.status === NOT_LOADED || appConfig.status === LOAD_ERROR ) {
// 如果该子应用的当前状态是未加载或加载失败，执行以下逻辑
if (appConfig.title) document.title = appConfig.title;
// 更新子应用的状态
updateAppConfig(appName, { status: LOADING_ASSETS });
let lifeCycle: ModuleLifeCycle = {};
try {
// 加载子应用资源
lifeCycle = await loadAppModule(appConfig);
// in case of app status modified by unload event
if (getAppStatus(appName) === LOADING_ASSETS) {
// 更新子应用配置
updateAppConfig(appName, { ...lifeCycle, status: NOT_MOUNTED });
}
} catch (err){
// 出错，更新子应用配置
updateAppConfig(appName, { status: LOAD_ERROR });
}
if (lifeCycle.mount) {
// 进行子应用挂载
await mountMicroApp(appConfig.name);
}
} else if (appConfig.status === UNMOUNTED) {
// 如果当前的子应用是卸载状态执行以下逻辑
if (!appConfig.cached) {
// 加载 js/css 资源
await loadAndAppendCssAssets(appConfig.appAssets || { cssList: [], jsList: []});
}
// 进行挂载
await mountMicroApp(appConfig.name);
} else if (appConfig.status === NOT_MOUNTED) {
// 如果当前的子应用是没有挂载状态，则进行挂载
await mountMicroApp(appConfig.name);
} else {
console.info(`[icestark] current status of app ${appName} is ${appConfig.status}`);
}
// 返回创建的子应用的信息
return getAppConfig(appName);
} else {
console.error(`[icestark] fail to get app config of ${appName}`);
}
return null;
}2、路由劫持
我们都知道 react、vue、angular 等单应用路由劫持的实现都是：history 路由通过监听 popstate 事件、hash 路由通过监听 hashchange 路由来实现的，那么 icestark 的路由劫持是怎么做的呢，嗯哼，他们也没有变出花来，也是一样的实现原理，代码位置在 src/start.js 文件中，相关源码如下所示
const hijackHistory = (): void => {
// 监听对应的路由事件，urlChange 为事件回调函数
window.addEventListener('popstate', urlChange, false);
window.addEventListener('hashchange', urlChange, false);
};3、沙箱隔离
在微前端容器中，存在多个子应用共有一个 window 对象的情况，如果不进行隔离，可能多个子应用之间会存在互相影响的情况。icestark 基于 Proxy 为每个子应用启用了一个沙箱环境，代码位置在 packages/icestark-sandbox/src/index.js 文件中，相关代码实现如下所示
createProxySandbox(injection?: object) {
const { propertyAdded, originalValues, multiMode } = this;
const proxyWindow = Object.create(null) as Window;
const originalWindow = window;
const originalAddEventListener = window.addEventListener;
const originalRemoveEventListener = window.removeEventListener;
const originalSetInerval = window.setInterval;
const originalSetTimeout = window.setTimeout;
// hijack addEventListener
proxyWindow.addEventListener = (eventName, fn, ...rest) => {
const listeners = this.eventListeners[eventName] || [];
listeners.push(fn);
return originalAddEventListener.apply(originalWindow, [eventName, fn, ...rest]);
};
// hijack removeEventListener
proxyWindow.removeEventListener = (eventName, fn, ...rest) => {
const listeners = this.eventListeners[eventName] || [];
if (listeners.includes(fn)) {
listeners.splice(listeners.indexOf(fn), 1);
}
return originalRemoveEventListener.apply(originalWindow, [eventName, fn, ...rest]);
};
// hijack setTimeout
proxyWindow.setTimeout = (...args) => {
const timerId = originalSetTimeout(...args);
this.timeoutIds.push(timerId);
return timerId;
};
// hijack setInterval
proxyWindow.setInterval = (...args) => {
const intervalId = originalSetInerval(...args);
this.intervalIds.push(intervalId);
return intervalId;
};
const sandbox = new Proxy(proxyWindow, {
set(target: Window, p: PropertyKey, value: any): boolean {
target[p] = value;
},
get(target: Window, p: PropertyKey): any {
const targetValue = target[p];
if (targetValue) {
// case of addEventListener, removeEventListener, setTimeout, setInterval setted in sandbox
return targetValue;
}
},
has(target: Window, p: PropertyKey): boolean {
return p in target || p in originalWindow;
},
});
this.sandbox = sandbox;
}4、通信
icestark 提供了 event/store 通信，其无非是实现了个简单的 EventEmit 实例，代码位置在 packages/icestark-data/src/event.js 文件中，相关源代码实现逻辑如下，我们进行了些代码注释，就不再赘述。
class Event implements Hooks {
eventEmitter: object;
constructor() {
this.eventEmitter = {};
}
// 事件触发
emit(key: string, ...args) {
const keyEmitter = this.eventEmitter[key];
// 执行事件注册的回调方法
keyEmitter.forEach(cb => {
cb(...args);
});
}
// 事件监听
on(key: string, callback: (value: any) => void) {
if (!this.eventEmitter[key]) {
this.eventEmitter[key] = [];
}
// 将事件回调方法放入数组中
this.eventEmitter[key].push(callback);
}
// 取消注册
off(key: string, callback?: (value: any) => void) {
if (callback === undefined) {
this.eventEmitter[key] = undefined;
return;
}
this.eventEmitter[key] = this.eventEmitter[key].filter(cb => cb !== callback);
}
has(key: string) {
const keyEmitter = this.eventEmitter[key];
return isArray(keyEmitter) && keyEmitter.length > 0;
}
}四、总结
经过以上代码整理分析，我们可以看到，其实 icestark 跟 single-spa、qiankun 这些微前端框架做的事情/原理大同小异，icestark 自己去实现了子应用的状态管理，然后也去实现了沙箱、通信等这些辅助功能。
辛苦整理良久，还望手动点赞鼓励~
博客 github地址为：github.com/fengshi123/blog ，汇总了作者的所有博客，欢迎关注及 star ~