微前端无界机制浅析

禹翔

简介

随着项目的发展，前端SPA应用的规模不断加大、业务代码耦合、编译慢，导致日常的维护难度日益增加。同时前端技术的发展迅猛，导致功能扩展吃力，重构成本高，稳定性低。
为了能够将前端模块解耦，通过相关技术调研，最终选择了无界微前端框架作为物流客服系统解耦支持。为了更好的使用无界微前端框架，我们对其运行机制进行了相关了解，以下是对无界运行机制的一些认识。
基本用法

主应用配置

1. import WujieVue from 'wujie-vue2';
3. const { setupApp, preloadApp, bus } = WujieVue;
4. /*设置缓存*/
5. setupApp({
6. });
7. /*预加载*/
8. preloadApp({
9.   name: 'vue2'
10. })
11. <WujieVue width="100%" height="100%" name="vue2" :url="vue2Url" :sync="true" :alive="true"></WujieVue

复制代码

4-3，降级模式localGenerator

1. import Vue from "vue";
2. import { bus, preloadApp, startApp as rawStartApp, destroyApp, setupApp } from "wujie";
4. const wujieVueOptions = {
5.   name: "WujieVue",
6.   props: {
7.        /*传入配置参数*/
8.   },
9.   data() {
10.     return {
11.       startAppQueue: Promise.resolve(),
12.     };
13.   },
14.   mounted() {
15.     bus.$onAll(this.handleEmit);
16.     this.execStartApp();
17.   },
18.   methods: {
19.     handleEmit(event, ...args) {
20.       this.$emit(event, ...args);
21.     },
22.     async startApp() {
23.       try {
24.         // $props 是vue 2.2版本才有的属性，所以这里直接全部写一遍
25.         await rawStartApp({
26.           name: this.name,
27.           url: this.url,
28.           el: this.$refs.wujie,
29.           loading: this.loading,
30.           alive: this.alive,
31.           fetch: this.fetch,
32.           props: this.props,
33.           attrs: this.attrs,
34.           replace: this.replace,
35.           sync: this.sync,
36.           prefix: this.prefix,
37.           fiber: this.fiber,
38.           degrade: this.degrade,
39.           plugins: this.plugins,
40.           beforeLoad: this.beforeLoad,
41.           beforeMount: this.beforeMount,
42.           afterMount: this.afterMount,
43.           beforeUnmount: this.beforeUnmount,
44.           afterUnmount: this.afterUnmount,
45.           activated: this.activated,
46.           deactivated: this.deactivated,
47.           loadError: this.loadError,
48.         });
49.       } catch (error) {
50.         console.log(error);
51.       }
52.     },
53.     execStartApp() {
54.       this.startAppQueue = this.startAppQueue.then(this.startApp);
55.     },
56.     destroy() {
57.       destroyApp(this.name);
58.     },
59.   },
60.   beforeDestroy() {
61.     bus.$offAll(this.handleEmit);
62.   },
63.   render(c) {
64.     return c("div", {
65.       style: {
66.         width: this.width,
67.         height: this.height,
68.       },
69.       ref: "wujie",
70.     });
71.   },
72. };
74. const WujieVue = Vue.extend(wujieVueOptions);
76. WujieVue.setupApp = setupApp;
77. WujieVue.preloadApp = preloadApp;
78. WujieVue.bus = bus;
79. WujieVue.destroyApp = destroyApp;
80. WujieVue.install = function (Vue) {
81.   Vue.component("WujieVue", WujieVue);
82. };
83. export default WujieVue;

复制代码

实例化化主要是建立起js运行时的沙箱iframe, 通过非降级模式下proxy和降级模式下对document，location,window等全局操作属性的拦截修改将其和对应的js沙箱操作关联起来

5 importHTML入口文件解析

importHtml方法（entry.ts）

1. import { defineWujieWebComponent } from "./shadow";
2. // 定义webComponent容器
3. defineWujieWebComponent();
5. // 定义webComponent  存在shadow.ts 文件中
6. export function defineWujieWebComponent() {
7.   class WujieApp extends HTMLElement {
8.     connectedCallback(){
9.       if (this.shadowRoot) return;
10.       const shadowRoot = this.attachShadow({ mode: "open" });
11.       const sandbox = getWujieById(this.getAttribute(WUJIE_DATA_ID));
12.       patchElementEffect(shadowRoot, sandbox.iframe.contentWindow);
13.       sandbox.shadowRoot = shadowRoot;
14.     }
15.     disconnectedCallback() {
16.       const sandbox = getWujieById(this.getAttribute(WUJIE_DATA_ID));
17.       sandbox?.unmount();
18.     }
19.   }
20.   customElements?.define("wujie-app", WujieApp);
21. }

复制代码

importHTML结构如图：

注意点： 通过Fetch url加载子应用资源，这里也是需要子应用支持跨域设置的原因
6 CssLoader和样式加载优化

1. startApp(options) {
2.   const newSandbox = new WuJie({ name, url, attrs, degradeAttrs, fiber, degrade, plugins, lifecycles });
3.   const { template, getExternalScripts, getExternalStyleSheets } = await importHTML({
4.     url,
5.     html,
6.     opts: {
7.       fetch: fetch || window.fetch,
8.       plugins: newSandbox.plugins,
9.       loadError: newSandbox.lifecycles.loadError,
10.       fiber,
11.     },
12.   });
13.   const processedHtml = await processCssLoader(newSandbox, template, getExternalStyleSheets);
14.   await newSandbox.active({ url, sync, prefix, template: processedHtml, el, props, alive, fetch, replace });
15.   await newSandbox.start(getExternalScripts);
16.   return newSandbox.destroy;

复制代码

7 子应用active

active方法主要用于做 子应用激活， 同步路由，动态修改iframe的fetch, 准备shadow, 准备子应用注入
7-1， active方法(sandbox.ts)

1. // wujie
2. class wujie {
3.   constructor(options) {
4.     /** iframeGenerator在 iframe.ts中**/
5.     this.iframe = iframeGenerator(this, attrs, mainHostPath, appHostPath, appRoutePath);
7.     if (this.degrade) { // 降级模式
8.       const { proxyDocument, proxyLocation } = localGenerator(this.iframe, urlElement, mainHostPath, appHostPath);
9.       this.proxyDocument = proxyDocument;
10.       this.proxyLocation = proxyLocation;
11.     } else {           // 非降级模式
12.       const { proxyWindow, proxyDocument, proxyLocation } = proxyGenerator();
13.       this.proxy = proxyWindow;
14.       this.proxyDocument = proxyDocument;
15.       this.proxyLocation = proxyLocation;
16.     }
17.     this.provide.location = this.proxyLocation;
18.     addSandboxCacheWithWujie(this.id, this);
19.   }
20. }

复制代码

7-2，createWujieWebComponent, renderElementToContainer, renderTemplateToShadowRoot

1. export function proxyGenerator(
2.   iframe: HTMLIFrameElement,
3.   urlElement: HTMLAnchorElement,
4.   mainHostPath: string,
5.   appHostPath: string
6. ): {
7.   proxyWindow: Window;
8.   proxyDocument: Object;
9.   proxyLocation: Object;
10. } {
11.   const proxyWindow = new Proxy(iframe.contentWindow, {
12.     get: (target: Window, p: PropertyKey): any => {
13.       // location进行劫持
14.       /*xxx*/
15.       // 修正this指针指向
16.       return getTargetValue(target, p);
17.     },
18.     set: (target: Window, p: PropertyKey, value: any) => {
19.       checkProxyFunction(value);
20.       target[p] = value;
21.       return true;
22.     },
23.     /**其他方法属性**/
24.   });
26.   // proxy document
27.   const proxyDocument = new Proxy(
28.     {},
29.     {
30.       get: function (_fakeDocument, propKey) {
31.         const document = window.document;
32.         const { shadowRoot, proxyLocation } = iframe.contentWindow.__WUJIE;
33.         const rawCreateElement = iframe.contentWindow.__WUJIE_RAW_DOCUMENT_CREATE_ELEMENT__;
34.         const rawCreateTextNode = iframe.contentWindow.__WUJIE_RAW_DOCUMENT_CREATE_TEXT_NODE__;
35.         // need fix
36.         /* 包括元素创建，元素选择操作等
37.          createElement,createTextNode, documentURI，URL，querySelector，querySelectorAll
38.          documentElement，scrollingElement ，forms，images，links等等
39.         */
40.         // from shadowRoot
41.         if (propKey === "getElementById") {
42.           return new Proxy(shadowRoot.querySelector, {
43.             // case document.querySelector.call
44.             apply(target, ctx, args) {
45.               if (ctx !== iframe.contentDocument) {
46.                 return ctx[propKey]?.apply(ctx, args);
47.               }
48.               return target.call(shadowRoot, `[id="${args[0]}"]`);
49.             },
50.           });
51.         }
52.       },
53.     }
54.   );
56.   // proxy location
57.   const proxyLocation = new Proxy(
58.     {},
59.     {
60.       get: function (_fakeLocation, propKey) {
61.         const location = iframe.contentWindow.location;
62.         if (
63.           propKey === "host" || propKey === "hostname" || propKey === "protocol" || propKey === "port" ||
64.           propKey === "origin"
65.         ) {
66.           return urlElement[propKey];
67.         }
68.         /** 拦截相关propKey, 返回对应lication内容
69.         propKey =="href","reload","replace"
70.         **/
71.         return getTargetValue(location, propKey);
72.       },
73.       set: function (_fakeLocation, propKey, value) {
74.         // 如果是跳转链接的话重开一个iframe
75.         if (propKey === "href") {
76.           return locationHrefSet(iframe, value, appHostPath);
77.         }
78.         iframe.contentWindow.location[propKey] = value;
79.         return true;
80.       }
81.     }
82.   );
83.   return { proxyWindow, proxyDocument, proxyLocation };
84. }

复制代码

8 子应用启动执行start

start 开始执行子应用，运行js,执行无界js插件列表

1. export function localGenerator(
2. ){
3.   // 代理 document
4.   Object.defineProperties(proxyDocument, {
5.     createElement: {
6.       get: () => {
7.         return function (...args) {
8.           const element = rawCreateElement.apply(iframe.contentDocument, args);
9.           patchElementEffect(element, iframe.contentWindow);
10.           return element;
11.         };
12.       },
13.     },
14.   });
15.   // 普通处理
16.   const {
17.     modifyLocalProperties,
18.     modifyProperties,
19.     ownerProperties,
20.     shadowProperties,
21.     shadowMethods,
22.     documentProperties,
23.     documentMethods,
24.   } = documentProxyProperties;
25.   modifyProperties
26.     .filter((key) => !modifyLocalProperties.includes(key))
27.     .concat(ownerProperties, shadowProperties, shadowMethods, documentProperties, documentMethods)
28.     .forEach((key) => {
29.       Object.defineProperty(proxyDocument, key, {
30.         get: () => {
31.           const value = sandbox.document?.[key];
32.           return isCallable(value) ? value.bind(sandbox.document) : value;
33.         },
34.       });
35.     });
37.   // 代理 location
38.   const proxyLocation = {};
39.   const location = iframe.contentWindow.location;
40.   const locationKeys = Object.keys(location);
41.   const constantKey = ["host", "hostname", "port", "protocol", "port"];
42.   constantKey.forEach((key) => {
43.     proxyLocation[key] = urlElement[key];
44.   });
45.   Object.defineProperties(proxyLocation, {
46.     href: {
47.       get: () => location.href.replace(mainHostPath, appHostPath),
48.       set: (value) => {
49.         locationHrefSet(iframe, value, appHostPath);
50.       },
51.     },
52.     reload: {
53.       get() {
54.         warn(WUJIE_TIPS_RELOAD_DISABLED);
55.         return () => null;
56.       },
57.     },
58.   });
59.   return { proxyDocument, proxyLocation };
60. }

复制代码

[code]// getExternalScriptsexport function getExternalScripts(  scripts: ScriptObject[],  fetch: (input: RequestInfo, init?: RequestInit) => Promise = defaultFetch,  loadError: loadErrorHandler,  fiber: boolean): ScriptResultList {  // module should be requested in iframe  return scripts.map((script) => {    const { src, async, defer, module, ignore } = script;    let contentPromise = null;    // async    if ((async || defer) && src && !module) {      contentPromise = new Promise((resolve, reject) =>        fiber          ? requestIdleCallback(() => fetchAssets(src, scriptCache, fetch, false, loadError).then(resolve, reject))          : fetchAssets(src, scriptCache, fetch, false, loadError).then(resolve, reject)      );      // module || ignore    } else if ((module && src) || ignore) {      contentPromise = Promise.resolve("");      // inline    } else if (!src) {      contentPromise = Promise.resolve(script.content);      // outline    } else {      contentPromise = fetchAssets(src, scriptCache, fetch, false, loadError);    }    return { ...script, contentPromise };  });}// 加载assets资源 // 如果存在缓存则从缓存中获取const fetchAssets = (  src: string,  cache: Object,  fetch: (input: RequestInfo, init?: RequestInit) => Promise,  cssFlag?: boolean,  loadError?: loadErrorHandler) =>  cache[src] ||  (cache[src] = fetch(src)    .then((response) => {     /**status > 400按error处理**/      return response.text();    }) }));// insertScriptToIframeexport function insertScriptToIframe(  scriptResult: ScriptObject | ScriptObjectLoader,  iframeWindow: Window,  rawElement?: HTMLScriptElement) {  const { src, module, content, crossorigin, crossoriginType, async, callback, onload } =    scriptResult as ScriptObjectLoader;  const scriptElement = iframeWindow.document.createElement("script");  const nextScriptElement = iframeWindow.document.createElement("script");  const { replace, plugins, proxyLocation } = iframeWindow.__WUJIE;  const jsLoader = getJsLoader({ plugins, replace });  let code = jsLoader(content, src, getCurUrl(proxyLocation));  // 内联脚本处理  if (content) {    // patch location    if (!iframeWindow.__WUJIE.degrade && !module) {      code = `(function(window, self, global, location) {      ${code}}).bind(window.__WUJIE.proxy)(  window.__WUJIE.proxy,  window.__WUJIE.proxy,  window.__WUJIE.proxy,  window.__WUJIE.proxyLocation,);`;    }  } else {    // 外联自动触发onload    onload && (scriptElement.onload = onload as (this: GlobalEventHandlers, ev: Event) => any);    src && scriptElement.setAttribute("src", src);    crossorigin && scriptElement.setAttribute("crossorigin", crossoriginType);  }  // esm 模块加载  module && scriptElement.setAttribute("type", "module");  scriptElement.textContent = code || "";  // 执行script队列检测  nextScriptElement.textContent =    "if(window.__WUJIE.execQueue && window.__WUJIE.execQueue.length){ window.__WUJIE.execQueue.shift()()}";  const container = rawDocumentQuerySelector.call(iframeWindow.document, "head");  if (/^