微前端之实践子应用的注册、路由拦截和获取首个子应用

一、微前端之实践子应用的注册、路由拦截和获取首个子应用

1. 子应用的注册，如下所示：

• 首先需要一个子应用注册的列表，在主应用 main 的 store 文件夹中，新建 sub.js，对外暴露 subNavList 这个子应用的列表。subNavList 是一个数组，每一个子元素都是一个子应用，name 是子应用名称，唯一 ID； entry 是子应用的入口，获取到子应用的文件；container 是子应用的渲染内容，显示在哪个容器中；activeRule 是子应用激活路由，根路由内容，激活的规则，loading 是子应用的加载状态；loading 是每一个子应用的信息，sub.js，代码如下：

import { loading } from '../store'
import * as appInfo from '../store'

export const subNavList = [
  {
    name: 'react15',
    entry: '//localhost:9002/', 
    loading,
    container: '#micro-container', 
    activeRule: '/react15', 
    appInfo,
  },
  {
    name: 'react16',
    entry: '//localhost:9003/',
    loading,
    container: '#micro-container',
    activeRule: '/react16',
    appInfo,
  },
  {
    name: 'vue2',
    entry: '//localhost:9004/',
    loading,
    container: '#micro-container',
    activeRule: '/vue2',
    appInfo,
  },
  {
    name: 'vue3',
    entry: '//localhost:9005/',
    loading,
    container: '#micro-container',
    activeRule: '/vue3',
    appInfo,
  },
];

• 在主应用 main 的 store 文件夹中，有 header.js、loading.js、nav.js、sub.js 和 index.js，loading.js，代码如下：

import { ref } from 'vue';
export let loadingStatus = ref(true);
export const changeLoading = type => loadingStatus.value = type;

• header.js，代码如下：

import { ref } from 'vue';
export const headerStatus = ref(true);
export const changeHeader = type => headerStatus.value = type;

• nav.js，代码如下：

import { ref } from 'vue';
export const navStatus = ref(true);
export const changeNav = type => navStatus.value = type;

• index.js，代码如下：

export * as loading from './loading';
export * as header from './header';
export * as nav from './nav';

• 在主应用 main 中，main.js，通过 registerApp 将 subNavList 注册到 util 下的 index.js，微前端框架中，main.js，代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { subNavList } from './store/sub'
import { registerApp } from './util'

registerApp(subNavList);
createApp(App).use(router()).mount('#micro_web_main_app');

• 在主应用 main 中，util 下的 index.js，对外暴露 registerApp，通过将传入的子应用注册列表 list 注册到微前端框架里，registerMicroApps，同时也传入了主应用的生命周期，beforeLoad 开始加载，mounted 渲染完成，destoryed 卸载完成。通过调用 start 开启微前端框架，util 下的 index.js，代码如下：

import { registerMicroApps, start, createStore } from '../../micro'

import { loading } from '../store'

const store = createStore()
// const storeData = store.getStore()

window.store = store
store.subscribe((newValue, oldValue) => {
  console.log(newValue, oldValue, '---')
})
// store.update({ ...storeData, a: 1 })

export const registerApp = (list) => {
  registerMicroApps(list, {
    beforeLoad: [
      () => {
        loading.changeLoading(true)
        console.log('开始加载')
      }
    ],
    mounted: [
      () => {
        loading.changeLoading(false)
        console.log('渲染完成')
      }
    ],
    destoryed: [
      () => {
        console.log('卸载完成')
      }
    ]
  })

  start()
}

• 在 micro 微前端框架中，之前调用的，registerMicroApps 在 micro 下的 start.js 中，它需要使用到 micro 下的 const 的 subApps.js，其中 list 是统一管理子应用列表，getList 是获取子应用列表，setList 是将子应用列表注册到 list 中，subApps.js，代码如下：

let list = [] 
export const getList = () => list 
export const setList = appList => list = appList 

• 在 micro 下的 start.js 中，对外暴露 registerMicroApps 这个方法，传入子应用注册列表 appList 和主应用的生命周期 lifeCycle，分别调用 setList 和 setMainLifecycle 进行注册设置，代码如下：

export const registerMicroApps = (appList, lifeCycle) => {
  setList(appList);
  setMainLifecycle(lifeCycle);
  // window.appList = appList;
}

2. 路由拦截，如下所示：

• 首先需要在 micro 微前端框架中的 start.js，调用 rewriteRouter 方法实现路由拦截。在 router 下的 rewriteRouter.js 中，对外暴露出 rewriteRouter，重写 window 的路由跳转。patchRouter 接收两个参数，原生的事件、事件的名称，所有触发 pushState 和 replaceState 的事件都会被监听到，window.history.pushState 和 window.history.replaceState。通过 window.addEventListener 事件绑定 micro_push 和 micro_replace，通过 window.onpopstate 事件监听，监听返回事件，当点了返回按钮后 turnApp 就会执行，rewriteRouter.js，代码如下：

import { patchRouter } from '../utils'
import { turnApp } from './routerHandle'

export const rewriteRouter = () => {
  window.history.pushState = patchRouter(window.history.pushState, 'micro_push');
  window.history.replaceState = patchRouter(window.history.replaceState, 'micro_replace');

  window.addEventListener('micro_push', turnApp);
  window.addEventListener('micro_replace', turnApp);

  window.onpopstate = async function () {
    await turnApp()
  }
}

• patchRouter 是在 micro 下的 util 中的 index.js，给当前的路由跳转打补丁。通过 new Event 创建新的事件，通过 globalEvent.apply 传递过来的原生事件 globalEvent，代替函数的执行，通过 window.dispatchEvent 触发创建的事件，代码如下：

export const patchRouter = (globalEvent, eventName) => {
  return function () {
    const e = new Event(eventName)
    globalEvent.apply(this, arguments) 
    window.dispatchEvent(e) 
  }
}

• turnApp 是在 micro 下的 router 中的 routerHandle.js，如果子应用发生改变在里面可以执行微前端的生命周期执行，代码如下：

import { isTurnChild } from '../utils'
import { lifecycle } from '../lifeCycle'
export const turnApp = async () => {
  if (isTurnChild()) {
    await lifecycle()
  }
}

3. 获取首个子应用，如下所示：

• 在 registerApp 中调用 micro 下的 start.js，对外暴露的 start 方法启动微前端框架。通过 getList 首先验证当前子应用列表是否为空，如果子应用列表为空，抛出异常。如果子应用列表非空，有子应用的内容， 查找到符合当前路由的子应用。如果当前没有在使用的子应用， 抛出一个错误，请访问正确的连接，访问一个默认的路由，通常为首页或登录页面，window.history.pushState 跳转到对应的 url 上。若查找到子应用的内容并且 hash 值存在，进行标记，将当前 app 的内容设置为 app.activeRule，start.js，代码如下：

import { setList, getList } from './const/subApps'
import { currentApp } from './utils'
import { rewriteRouter } from './router/rewriteRouter'
import { setMainLifecycle } from './const/mainLifeCycle'
import { prefetch } from './loader/prefetch'
import { Custom } from './customevent'

const custom = new Custom()
custom.on('test', (data) => {
  console.log(data)
})

window.custom = custom;

rewriteRouter();

export const registerMicroApps = (appList, lifeCycle) => {
  setList(appList);
  setMainLifecycle(lifeCycle);
  // window.appList = appList;
}

export const start = () => {
  const apps = getList();
  if (!apps.length) {
    throw Error('子应用列表为空， 请正确注册');
  }
  const app = currentApp();
  const { pathname, hash } = window.location;

  if (!hash) {
    window.history.pushState(null, null, '/vue3#/index'); 
  }

  if (app && hash) {
    const url = pathname + hash;
    window.__CURRENT_SUB_APP__ = app.activeRule;
    window.history.pushState('', '', url);
  }

  prefetch();
}

• 调用 currentApp 时，是在 micro 的 utils 下的 index.js，通过 window.location.pathname 获取到当前子应用的路由 activeRule，调用 filterApp 子应用在命中后就会返回，isTurnChild 是判断子应用是否做了切换，index.js，代码如下：

import { getList } from "../const/subApps";
export const patchRouter = (globalEvent, eventName) => {
  return function () {
    const e = new Event(eventName); 
    globalEvent.apply(this, arguments); 
    window.dispatchEvent(e); 
  }
}

export const currentApp = () => {
  const currentUrl = window.location.pathname;
  return filterApp('activeRule', currentUrl);
}

export const findAppByRoute = (router) => {
  return filterApp('activeRule', router);
}

export const filterApp = (key, value) => {
  const currentApp = getList().filter(item => item[key] === value);
  return currentApp && currentApp.length ? currentApp[0] : {};
}

export const isTurnChild = () => {
  const { pathname, hash } = window.location;
  const url = pathname + hash;
  const currentPrefix = url.match(/(\/\w+)/g);

  if (
    currentPrefix &&
    (currentPrefix[0] === window.__CURRENT_SUB_APP__) &&
    hash === window.__CURRENT_HASH__
  ) {
    return false;
  }
  window.__ORIGIN_APP__ = window.__CURRENT_SUB_APP__;
  const currentSubApp = window.location.pathname.match(/(\/\w+)/);

  if (!currentSubApp) {
    return false
  }
  window.__CURRENT_SUB_APP__ = currentSubApp[0];
  window.__CURRENT_HASH__ = hash;
  return true;
}