qiankun微前端架构图 qiankun微前端原理

qiankun框架的底层原理

现在我们手写一个简易的qiankun框架，实现基础的父应用中切换路径跳转子应用、沙箱隔离等qiankun框架的功能。

我们在已经配置好的qiankun主应用中不使用qinakun框架，而是引入我们自己手写的简易框架来实现本有的qiankun框架功能比如路由跳转、沙箱隔离、css样式隔离等。

// 引入qinakun框架内的方法
// import { registerMicroApps, start } from "qiankun"
// 引入自己写的src路径下的微前端框架micro_qiankun
import { registerMicroApps, start } from "./micro_qiankun"

手写qiankun的registerMicroApps()和start()方法

registerMicroApps是用来根据传入的子应用的信息数组来注册子应用；start使用启动这些子应用。

微前端的运行原理：1. 监听路由变化 2.匹配子应用 3.加载子应用 4.渲染子应用

项目目录，其中micro-qiankun就是自己仿照qinakun功能写的一个简易版微前端库。下面我把里面包含的api列出来，可详细看。

入口：index.js:

import { handleRouter } from "./handle-router"
import { rewriteRouter } from "./rewrite-router"
// 暂存的apps，主要考虑到外部要拿这个要注册的子应用
let _apps = []
// 外部拿到子应用列表所要执行的方法
const getApps = function () {
    return _apps
}

// 注册子应用的方法
const registerMicroApps = function (apps) {
    _apps = apps
    console.log(apps);
}

// 启动子应用的方法
const start = function () {
    // 微前端的运行原理，1. 监听路由变化 2.匹配子应用 3.加载子应用 4.渲染子应用
    // 1. 监听路由变化
    rewriteRouter()
    // 初始执行匹配
    handleRouter()
    // 2.匹配子应用
    // 3.加载子应用
    // 4.渲染子应用
}

// 导出
export { registerMicroApps, start, getApps }

handle-router.js：

// 此函数用来处理路由跳转后，让其处理子应用即匹配子应用、加载子应用、渲染子应用
import { getApps } from ".";
import { importHTML } from "./import-html";
import { getNextRoute, getPrevRoute } from "./rewrite-router";
export const handleRouter = async function () {
    const apps = getApps() //获取当前子应用列表数组
    // 需要先判断是否还有上一个子应用
    let preRoute = getPrevRoute() //获取上一个路由路径window.location.pathname
    let nextRoute = getNextRoute() //获取跳转后的路由路径

    // 获取上一个路由的子应用
    const preApp = apps.find(item => preRoute.startsWith(item.activeRule))

    // 2.2 然后子apps子应用中查找
    // [name, entry, container, activeRule, mount, unmout, bootStrap]
    // 获取跳转后的子应用
    const app = apps.find(item => nextRoute.startsWith(item.activeRule))//str.startWith(str1)，字符串str如果以str1开头，那么就返回true
    // 如果有上一个应用，那么就先销毁，然后再加载当前的子应用
    if (preApp) {
        await unmount(preApp)//此时preApp已经有自己的声明周期钩子的，这是在上一个子应用中已经设置的
    }
    if (!app) { //如果当前路由路径pathname没有子应用，直接return返回
        return
    }
    // 2.匹配子应用
    // 2.1 首先获取当前的路由路径 window.location.pathname
    // console.log(window.location.pathname)


    // 3.加载子应用
    // 加载子应用就是请求获取app的entry资源，资源有很多种，有HTML、css、js，所以我们要一个个来处理
    // 先来请求html资源,可以使用很多异步请求方式：ajax、aiox、fetch
    // const html = await fetch(app.entry).then(res => res.text()) //res为请求的所有资源，res.text()为请求到的数据的普通文本即页面的html
    // console.log(html)

    // 配置全局环境变量
    window.__POWERED_BY_QIANKUN__ = true
    window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ = app.entry + "/"

    //获取自己封装的加载子应用的api 
    const {
        template, //teplate为处理之后的html模板字符串
        getExternalScripts, //调用它会得到所有的script脚本
        execScripts //用来执行文档中所有的script脚本
    } = await importHTML(app.entry) //这里必须是异步调用

    // // 4.渲染子应用，渲染到container中
    // // 获取渲染的容器
    const container = document.querySelector(app.container)
    container.append(template)

    // // 拿到html中的script脚本
    // getExternalScripts().then(res => {
    // })
    // 执行获取到的脚本，用于获取声明周期
    const appExports = await execScripts()
    // console.log(appExports);
    app.bootstrap = appExports.bootstrap
    app.mount = appExports.mount
    app.unmount = appExports.unmount
    console.log(app.mount)
    // 调用子应用的声明周期钩子函数来进行渲染
    await bootstrap(app)
    await mount(app)
    // container.innerHTML = template  //虽然此时在container中已经含有此html页面了，但是依然不能够在页面中渲染出页面
    //以上不能渲染成功的原因如下：
    // a.客户端渲染需要通过js来生成内容
    // b. 浏览器处于安全考虑，innerHTML中的script不会加载执行 ，所以需要我们手动加载执行
    // 手动加载子应用的script，执行script中的代码
    // 执行script中的字符串代码可以使用：1.使用eval（str)函数来执行字符串str的js内容；2：使用new Function
}
async function mount(app) {
    app.mount && (await app.mount({
        container: document.querySelector(app.container)
    }))
}


async function unmount(app) {
    app.unmount && (await app.unmount(app.container))
}

async function bootstrap(app) {
    app.bootstrap && (await app.bootstrap(app.container))
}

rewrite-router.js

// 重写路由监听的函数，主要是实现pushState和replaceState在实现路由跳转时，popState事件监听函数不能够监听到其跳转，所以需要重写这两个路由跳转方法

// 引入handleRouter函数，用来处理路由跳转后，让其匹配子应用、加载子应用、渲染子应用
import { handleRouter } from "./handle-router";

// 用于记录上一个路由
let preRoute = ""
let nextRoute = window.location.pathname
const getPrevRoute = function () {
    return preRoute
}
const getNextRoute = function () {
    return nextRoute
}
export {
    getPrevRoute,
    getNextRoute
}

export const rewriteRouter = function () {
    // 路由的两种模式：hash、history
    // 监听hash路由使用window.onhashchange
    // 这里我们使用history路由来实现，采用history.go、history.back、history.forword方法来进行路由跳转
    // 在history路由中我们使用onpopstate事件函数来监听history路由的变化，但是popstate事件函数只能监听到history.go、forward、back的切换路由方式，
    window.addEventListener("popstate", () => {
        // popState触发的时候，路由已经完成导航了
        // 且之前的路由preRoute的就等于之前的nextRoute，
        preRoute = nextRoute
        // 而跳转的nextRoute路由就是的当前最新的window.loacation.pathname
        nextRoute = window.location.pathname
        handleRouter()
    })
    // 但是它不能够监听到pushState添加历史记录（就是在页面中点击某个a标签进行跳转的方式，点击页面顺序：a->b->c，记录的历史记录中a、b、c都存在，而replaceState则不同）、replaceState（点击页面顺序：a->b->c，记录的历史记录中只有a->c，即用c代替了b记录，b记录被删除了）切换路由的方式
    // 对于pushState、replaceState需要通过函数重写的方式进行劫持，也就是说我们重写pushState和replaceState
    // 但是我们一般都是pushState来跳转链接，是通过this.$router.replace()来触发；而pushState()是通过this.$router.push()来触发
    // 重写pushState方法
    const rawPushState = window.history.pushState
    window.history.pushState = function (...args) {
        // 导航前
        preRoute = window.location.pathname //记录跳转前的路由路径
        rawPushState.apply(window.history, args) //使用pushState进行跳转
        // 导航后
        nextRoute = window.location.pathname //记录跳转后的路由路径
        handleRouter()

        console.log("终于监视到pushState了");
    }
    // 重写replaceState方法
    const rawReplaceState = window.history.replaceState
    window.history.replaceState = function (...args) {
        // 导航前
        preRoute = window.location.pathname //记录跳转前的路由路径
        rawReplaceState.apply(window.history, args)
        // 导航后
        nextRoute = window.location.pathname //记录跳转后的路由路径
        handleRouter()
        console.log("终于监视到replaceState了");
    }
}

import-html.js：

// 用于解析出html代码中的script脚本的方法
// 其实qiankun框架里面有用一个库即import-html-entry，其封装了一些从html文件中提取script标签，并动态执行script脚本的方法，而且这个库中也封装了沙箱机制

import { fetchResource } from "./fetch-resource"

// 这里我们仿造import-html-entry库，然后自己手写几个类似的方法
export const importHTML = async function (url) {
    // 加载子应用就是请求获取app的entry资源，资源有很多种，有HTML、css、js，所以我们要一个个来处理
    const html = await fetchResource(url)
    // 先来请求html资源,可以使用很多异步请求方式：ajax、aiox、fetch
    const template = document.createElement("div")
    template.innerHTML = html
    // 获取template的dom下的所有script脚本
    const scripts = template.querySelectorAll("script")
    // 获取所有script标签脚本代码，最后返回一个数组的形式
    const getExternalScripts = function () {
        console.log(scripts)
        // promise.all的返回值是一个promise数组
        return Promise.all(Array.from(scripts).map(script => {
            const src = script.getAttribute("src")
            if (!src) {//如果script脚本没有src，那么就是普通的script标签里面的script代码
                // 那么就只返回script里面的代码，并封装成promise对象
                return Promise.resolve(script.innerHTML)
            } else {//表示此script脚本是外链的资源，资源在src中
                return fetchResource(//需要判断src是以http开头比如http://www.nativejs.com，则资源是http外网资源;
                    // 如果是一种相对路径资源比如：/src/res则需要手动加上子应用的域名
                    src.startsWith("http") ? src : url + src
                )//直接发送异步请求
            }
        }))
    }
    // 获取并执行所有的script脚本代码
    const execScripts = async function () {
        // 拿到html中的scripts脚，它是一个script代码字符串构成的数组
        const scripts = await getExternalScripts()

        // 手动的构造一个commonJs环境，commonJs规则，里面有一个module对象，还有一个exports对象并且指向module.exports对象
        const module = { exports: {} }
        const exports = module.exports

        console.log(scripts);
        // 执行scripts数组中的script字符串代码，这里依然是使用eval函数来执行字符串代码
        scripts.forEach(script => {
            // eval执行的代码可以访问外部代码
            eval（script)
        })
        // 由于子模块到出的库格式为umd库，并且将返回的数据挂载到了window对象上，
        // 所以我们可以在window对象上拿到子应用的生命周期钩子函数，需要注意的是生命周期钩子必须写在子应用的入口文件main.js，然后webpack打包的时候首先进入入口文件，然后再递归查找依赖的文件进行打包
        // 因为我们自己构造了commonJs环境，那么我就能够通过module.exports拿到回调函数factory()返回的结果
        console.log(module.exports)
        return module.exports
    }

    return {
        template, //teplate为处理之后的html模板字符串
        getExternalScripts, //调用它会得到所有的script脚本
        execScripts //用来执行文档中所有的script脚本
    }
}

fetch-resource.js

// 异步请求函数
export const fetchResource = function (url) {
    const html = fetch(url).then(res => res.text()) //res为请求的所有资源，res.text()为请求到的数据的普通文本即页面的html
    return html
}

qinakun的样式隔离如何实现？

shadowDom实现

其实是因为start()函数中有一个sandbox沙箱。其中使用shadow dom来解决样式冲突，shadow dom就是一个隔离的环境，他会把子应用的所有内容放在shadowdom里面，shadow dom中的样式不会影响外部的样式。

shadow DOM并不是一个特别新的概念，html中的video标签就是使用shadow DOM的一个案例。使用它时，你在html只会看到一个video标签，但实际上播放器上还有一系列按钮和其他操作，这些就都是封装到shadow dom中的，对外界是不可见的。

shadow使用 subApp.attachShadow({ mode: “open” })创建。之后再在里面添加子元素或者innerHTML。

举个shadow dom样式隔离的案例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    p {
        color: red;
    }

    #shadow-root p {
        color: green;
    }
</style>

<body>
    <!-- 现在我将使用shadow dom来使得子应用和主应用之间的样式不会发生冲突 -->
    <p>wh</p>
    <!-- 子应用内容 -->
    <div id="subApp">
        <p>子应用wh</p>
    </div>

    <script>
        let subApp = document.querySelector("#subApp")
        // shadow dom就相当于一个普通的dom，你可以拿到并操作它，并且不会有样式冲突
        const shadow = subApp.attachShadow({ mode: "open" })//创建shadow dom，mode指是否可以通过js拿到子应用的dom  
        shadow.innerHTML = `
        <p>这是通过shadow dom添加的内容</p>
    	
    	//这里也可以放置style标签，设置shadow dom的样式
        <style>
            p {
                color: green;
            }
        </style>
        `
    </script>
</body>

</html>

浏览器页面：

除了shadowdom可以通过添加选择器范围来解决样式冲突。

也就是子应用在子应用类下的某个盒子，相当于 div span指代div下的span，和这种方式一样

qiankun的js沙箱如何实现

js沙箱隔离主要分为三种，snapshot sandbox（快照沙箱）、Proxy sandbox(代理沙箱)、lagacySandBox(遗留沙箱)。

snapshot沙箱

快照沙箱的核心思想：即在子应用挂载前对当前主应用的全局变量保存，然后恢复之前的子应用环境，在子应用运行期间正常get和set，在子应用卸载时保存当前变量恢复主应用变量，整个过程类似于中断和中断恢复。

原理就是在子应用激活 / 卸载时分别去经过快照的形式记录/还原状态来实现沙箱的。总结起来，对当前的 window 和记录的快照作 diff 来实现沙箱。

但是快照沙箱明显的缺点就是每次切换时需要去遍历window，这种做法会有较大的时间消耗。

我的总结：也就是在挂载子应用之前，主应用首先深拷贝一份window对象即snapshotWindow，并且将之前子应用的状态modifyWindow赋值给当前window即恢复之前的子应用状态，子应用运行期间的操作都是对这个window正常set和get操作，然后子应用卸载的时候就将当前window保存为modifyWindow以供下次子应用挂载时渲染modifyWindow，同时把之前保存的snapShotWindow重新渲染在主应用window中。

lagacy沙箱

import type { SandBox } from '../interfaces';
import { SandBoxType } from '../interfaces';

function iter(obj: typeof window, callbackFn: (prop: any) => void) {
  // eslint-disable-next-line guard-for-in, no-restricted-syntax
  for (const prop in obj) {
    // patch for clearInterval for compatible reason, see #1490
    if (obj.hasOwnProperty(prop) || prop === 'clearInterval') {
      callbackFn(prop);
    }
  }
}

/**
 * 基于 diff 方式实现的沙箱，用于不支持 Proxy 的低版本浏览器
 */
export default class SnapshotSandbox implements SandBox {
  proxy: WindowProxy;
  name: string;
  type: SandBoxType;
  sandboxRunning = true;
  private windowSnapshot!: Window;
  private modifyPropsMap: Record<any, any> = {};
  constructor(name: string) {
    this.name = name;
    this.proxy = window;
    this.type = SandBoxType.Snapshot;
  }

  active() {
    // 记录当前快照
    this.windowSnapshot = {} as Window;
    iter(window, (prop) => {
      this.windowSnapshot[prop] = window[prop];
    });

    // 恢复之前的变更
    Object.keys(this.modifyPropsMap).forEach((p: any) => {
      window[p] = this.modifyPropsMap[p];
    });

    this.sandboxRunning = true;
  }

  inactive() {
    this.modifyPropsMap = {};

    iter(window, (prop) => {
      if (window[prop] !== this.windowSnapshot[prop]) {
        // 记录变更，恢复环境
        this.modifyPropsMap[prop] = window[prop];
        window[prop] = this.windowSnapshot[prop];
      }
    });

    if (process.env.NODE_ENV === 'development') {
      console.info(`[qiankun:sandbox] ${this.name} origin window restore...`, Object.keys(this.modifyPropsMap));
    }

    this.sandboxRunning = false;
  }
}

proxy沙箱

子应用主应用间如何通信

qiankun官方提供了actions通信，qiankun内部使用initGlobalState(state)定义全局状态，该方法执行后返回一个MicroAppStateActions实例，实例中包含三个方法，分别是onGlobalStateChange、setGlobalState、offGlobalStateChange。

MicroAppStateActions
onGlobalStateChange: (callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) => void //在当前应用监听全局状态，有变更触发 callback，fireImmediately = true 立即触发 callback
setGlobalState: (state: Record<string, any>) => boolean， //按一级属性设置全局状态，微应用中只能修改已存在的一级属性（就是用来修改全局状态的
offGlobalStateChange: () => boolean  //移除当前应用的状态监听，微应用 umount 时会默认调用

实战：父子应用之间相互通信：

==第一步：==首先需要在父应用中使用initGlobalState设置全局状态actions并导出供其他组件使用。

src/action.js:

// 此action文件为定义微应用之间全局状态
// 引入qiankun的应用间通信方法initGlobalState
import { initGlobalState, MicroAppStateActions } from 'qiankun'

const initialState = {
    // 这里可以写初始化数据

}
const actions = initGlobalState(initialState) //初始化state

// 监听actions全局公共状态数据的变化
actions.onGlobalStateChange((state, prevState) => {
    console.log("主应用变更前：", prevState);
    console.log("主应用变更后：", state);
    this.$store.commit("setProject", state) //将获取的最新的公共状态保存到vuex中
})

export default actions

==第二步：==然后在main.js中引入actions实例并在注册子应用时通过props传递全局状态actions：

main.js

// 注册的应用列表
const apps = [
  // 子应用vue应用
  {
    name: 'vueApp',  //应用名字
    // 默认请求的url，并解析里面的js，因为此时父应用请求了子应用里面的资源，所以子应用必须支持跨域
    entry: "http://localhost:8001",
    //容器名，子应用挂载到哪个元素
    container: "#container",
    //路由匹配激活规则，当路由匹配到activeRule时，就会请求获取entry资源，然后渲染到container容器中
    activeRule: '/vue',
    // 通过props实现通信传递值
    props: { actions, msg: "w" }   //向子应用传递创建的全局状态
  }
]

第三步：

主应用中的组件要修改全局状态actions，就在此组件中引入actions实例

Home.vue:

<template>
  <div class="home">
    <button @click="handle1">点击向子应用发送消息</button>
    <button @click="handle2">点击向子应用发送消息</button>
    <p>当前显示的项目：{{ project }}</p>
  </div>
</template>

<script>
import HelloWorld from "@/components/HelloWorld.vue"; //引入的HelloWorld组件
import actions from "../action";

export default {
  name: "Home",
  data() {
    return {
      mes1: {
        project_id: "项目1",
      },
      mes2: {
        project_id: "项目2",
      },
    };
  },
  computed: {
    project() {
      return this.$store.state.project_id;
    },
  },
  mounted() {
    // 需要在mounted钩子函数中注册qiankun的观察者函数
    // 注册一个观察者函数
    // 一旦修改actions的内容就会触发这个onGlobalStateChange监听函数
    actions.onGlobalStateChange((state, prevState) => {
      // state为变更后的状态，prevState为变更前的状态
      console.log("主应用观察者，改变前的state为：", prevState);
      console.log("主应用观察者，改变后的state为：", state);
    });
  },
  methods: {
    handle1() {
      actions.setGlobalState(this.mes1); //修改全局的actions
      this.$router.push("/vue"); //跳转到vue子应用中
    },
    handle2() {
      actions.setGlobalState(this.mes2); //修改全局的actions
      this.$router.push("/vue"); //跳转到vue子应用中
    },
  },

  components: {
    HelloWorld, //注册组件
  },
};
</script>

第四步：配置子应用的全局状态Actions，子应用中的全局状态必须要跟主应用中的全局状态变量属性名相同，比如主应用中全局状态变量为{project_id: “项目2”}，则子应用中也需要保证在setGloabalState时也需要设定相同的变量名。

先在子应用中配置一个空的actions实例为以后重新赋值从主应用中传递过来的actions：

actions.js

function emptyAction() {
    // 警告：提示当前使用的是空 Action
    console.warn("Current execute action is empty!");
}

// 我们首先设置一个用于通信的Actions类

class Actions {
    actions = {
        onGlobalStateChange: emptyAction,
        setGlobalState: emptyAction
    }
    constructor() {

    }
    // 默认值为空Action

    // 设置actions
    setActions(actions) {
        this.actions = actions
    }

    // 映射
    onGlobalStateChange(...args) {
        return this.actions.onGlobalStateChange(...args)
    }
    // 映射
    setGlobalState(...args) {
        return this.actions.setGlobalState(...args)
    }
}

const actions = new Actions()
export default actions

然后在mounted的生命周期里注入actions实例：

main.js

function render(props) {
  if (props) {
    actions.setActions(props)
  }
  const { container } = props
  // 渲染的时候赋值
  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector("#app") : '#app') //这里是挂载到自己的html中，基座会拿到这个挂载后的html，将其插入进去
}

子应用向主应用发送数据（子应用中修改数据，可以在主应用中监听到）

子应用的组件Home.vue：

<template>
  <div class="home">
    <button @click="handle">快点我向父应用发送数据</button>
    <p>{{ msg }}</p>
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import actions from "../actions";
export default {
  name: "Home",
  data() {
    return {
      msg: "2",
    };
  },
  mounted() {
    // console.log("cccc");
    // console.log(actions);
    actions.onGlobalStateChange((state) => {
      console.log("我是子应用，我检测到数据了：", state);
      this.msg = state;
    }, true); //onGlobalStateChange的第二个参数设置为true，则会立即触发一次观察者函数
  },
  methods: {
    handle() {
      actions.setGlobalState({ project_id: "项目520" });
    },
  },

  components: {
    HelloWorld,
  },
};
</script>