手把手实现微前端

·  阅读 49
手把手实现微前端

目标:正常加载、卸载子应用

功能:

  1. 监听页面 URL 变化,切换子应用
  2. 根据当前 URL、子应用的触发规则来判断是否要加载、卸载子应用

原理:

// 当 location.pathname 以 /vue 为前缀时切换到 vue 子应用
https://www.xxx.com/vue/yyy
// 当 location.pathname 以 /react 为前缀时切换到 react 子应用
https://www.xxx.com/react/yyy
复制代码
  1. 重写 window.history.pushState()
  2. 重写 window.history.replaceState()
  3. 监听 popstate 事件
  4. 监听 hashchange 事件
// 执行下面代码后,浏览器的 URL 将从 https://www.xxx.com 变为 https://www.xxx.com/vue
window.history.pushState(null, '', '/vue')
复制代码

当用户手动点击浏览器上的前进后退按钮时,会触发 popstate 事件,所以对这个事件进行监听。同理,也需要监听 hashchange 事件。

export async function loadApps() {
    // 先卸载所有失活的子应用
    const toUnMountApp = getAppsWithStatus(AppStatus.MOUNTED)
    await Promise.all(toUnMountApp.map(unMountApp))

    // 初始化所有刚注册的子应用
    const toLoadApp = getAppsWithStatus(AppStatus.BEFORE_BOOTSTRAP)
    await Promise.all(toLoadApp.map(bootstrapApp))

    const toMountApp = [
        ...getAppsWithStatus(AppStatus.BOOTSTRAPPED),
        ...getAppsWithStatus(AppStatus.UNMOUNTED),
    ]
    // 加载所有符合条件的子应用
    await toMountApp.map(mountApp)
}
复制代码
import { loadApps } from '../application/apps'

const originalPushState = window.history.pushState
const originalReplaceState = window.history.replaceState

export default function overwriteEventsAndHistory() {
    window.history.pushState = function (state: any, title: string, url: string) {
        const result = originalPushState.call(this, state, title, url)
        // 根据当前 url 加载或卸载 app
        loadApps()
        return result
    }

    window.history.replaceState = function (state: any, title: string, url: string) {
        const result = originalReplaceState.call(this, state, title, url)
        loadApps()
        return result
    }

    window.addEventListener('popstate', () => {
        loadApps()
    }, true)

    window.addEventListener('hashchange', () => {
        loadApps()
    }, true)
}
复制代码

根据当前 URL、子应用的触发规则来判断是否要加载、卸载子应用

为了支持不同框架的子应用,所以规定了子应用必须向外暴露 bootstrap() mount() unmount() 这三个方法。bootstrap() 方法在第一次加载子应用时触发,并且只会触发一次,另外两个方法在每次加载、卸载子应用时都会触发。

不管注册的是什么子应用,在 URL 符合加载条件时就调用子应用的 mount() 方法,能不能正常渲染交给子应用负责。在符合卸载条件时则调用子应用的 unmount() 方法。

registerApplication({
    name: 'vue',
    // 初始化子应用时执行该方法
    loadApp() { 
        return {
            mount() {                
                // 这里进行挂载子应用的操作
                app.mount('#app')
            },
            unmount() {
                // 这里进行卸载子应用的操作 
                app.unmount()
            },
        }
    },
    // 如果传入一个字符串会被转为一个参数为 location 的函数
    // activeRule: '/vue' 会被转为 (location) => location.pathname === '/vue'
    activeRule: (location) => location.hash === '#/vue'
})
复制代码

完!

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改