简介

随着项目的发展，前端SPA应用的规模不断加大、业务代码耦合、编译慢，导致日常的维护难度日益增加。同时前端技术的发展迅猛，导致功能扩展吃力，重构成本高，稳定性低。

为了能够将前端模块解耦，通过相关技术调研，最终选择了无界微前端框架作为物流客服系统解耦支持。为了更好的使用无界微前端框架，我们对其运行机制进行了相关了解，以下是对无界运行机制的一些认识。

基本用法

主应用配置

import WujieVue from 'wujie-vue2';

const { setupApp,preloadApp,bus } = WujieVue;
/*设置缓存*/
setupApp({
});
/*预加载*/
preloadApp({
  name: 'vue2'
})
<WujieVue width="100%" height="100%" name="vue2" :url="vue2Url" :sync="true" :alive="true"></WujieVue

具体实践详细介绍参考：

http://3.cn/1GyPHN-i/shendeng

https://wujie-micro.github.io/doc/guide/start.html

无界源码解析

1 源码包目录结构

packages 包里包含无界框架核心代码wujie-core和对应不同技术栈应用包

examples 使用案例，main-xxx对应该技术栈主应用的使用案例，其他代表子应用的使用案例

2 wujie-vue2组件

该组件默认配置了相关参数，简化了无界使用时的一些配置项，作为一个全局组件被主引用使用

这里使用wujie-vue2示例，其他wujie-react,wujie-vue3大家可自行阅读，基本作用和wujie-vue2相同都是用来简化无界配置，方便快速使用

import Vue from "vue";
import { bus,startApp as rawStartApp,destroyApp,setupApp } from "wujie";

const wujieVueOptions = {
  name: "WujieVue",props: {
       /*传入配置参数*/
  },data() {
    return {
      startAppQueue: Promise.resolve(),};
  },mounted() {
    bus.$onAll(this.handleEmit);
    this.execStartApp();
  },methods: {
    handleEmit(event,...args) {
      this.$emit(event,...args);
    },async startApp() {
      try {
        // $props 是vue 2.2版本才有的属性，所以这里直接全部写一遍
        await rawStartApp({
          name: this.name,url: this.url,el: this.$refs.wujie,loading: this.loading,alive: this.alive,fetch: this.fetch,props: this.props,attrs: this.attrs,replace: this.replace,sync: this.sync,prefix: this.prefix,fiber: this.fiber,degrade: this.degrade,plugins: this.plugins,beforeLoad: this.beforeLoad,beforeMount: this.beforeMount,afterMount: this.afterMount,beforeUnmount: this.beforeUnmount,afterUnmount: this.afterUnmount,activated: this.activated,deactivated: this.deactivated,loadError: this.loadError,});
      } catch (error) {
        console.log(error);
      }
    },execStartApp() {
      this.startAppQueue = this.startAppQueue.then(this.startApp);
    },destroy() {
      destroyApp(this.name);
    },},beforeDestroy() {
    bus.$offAll(this.handleEmit);
  },render(c) {
    return c("div",{
      style: {
        width: this.width,height: this.height,ref: "wujie",});
  },};

const WujieVue = Vue.extend(wujieVueOptions);

WujieVue.setupApp = setupApp;
WujieVue.preloadApp = preloadApp;
WujieVue.bus = bus;
WujieVue.destroyApp = destroyApp;
WujieVue.install = function (Vue) {
  Vue.component("WujieVue",WujieVue);
};
export default WujieVue;

3 入口defineWujieWebComponent和StartApp

首先从入口文件index看起，defineWujieWebComponent

import { defineWujieWebComponent } from "./shadow";
// 定义webComponent容器
defineWujieWebComponent();

// 定义webComponent  存在shadow.ts 文件中
export function defineWujieWebComponent() {
  class WujieApp extends HTMLElement {
    connectedCallback(){
      if (this.shadowRoot) return;
      const shadowRoot = this.attachShadow({ mode: "open" });
      const sandbox = getWujieById(this.getattribute(WUJIE_DATA_ID));
      patchElementEffect(shadowRoot,sandbox.iframe.contentWindow);
      sandbox.shadowRoot = shadowRoot;
    }
    disconnectedCallback() {
      const sandbox = getWujieById(this.getattribute(WUJIE_DATA_ID));
      sandbox?.unmount();
    }
  }
  customElements?.define("wujie-app",WujieApp);
}

startApp方法

startApp(options) {
  const newSandbox = new WuJie({ name,url,attrs,degradeAttrs,fiber,degrade,plugins,lifecycles });
  const { template,getExternalScripts,getExternalStyleSheets } = await importHTML({
    url,html,opts: {
      fetch: fetch || window.fetch,plugins: newSandbox.plugins,loadError: newSandbox.lifecycles.loadError,});
  const processedHtml = await processCssLoader(newSandbox,template,getExternalStyleSheets);
  await newSandbox.active({ url,sync,prefix,template: processedHtml,el,props,alive,fetch,replace });
  await newSandbox.start(getExternalScripts);
  return newSandbox.destroy;

4 实例化

4-1,wujie （sandbox.ts）

// wujie
class wujie {
  constructor(options) {
    /** iframeGenerator在 iframe.ts中**/
    this.iframe = iframeGenerator(this,mainHostPath,appHostPath,appRoutePath);

    if (this.degrade) { // 降级模式
      const { proxyDocument,proxyLocation } = localGenerator(this.iframe,urlElement,appHostPath);
      this.proxyDocument = proxyDocument;
      this.proxyLocation = proxyLocation;
    } else {           // 非降级模式
      const { proxyWindow,proxyDocument,proxyLocation } = proxyGenerator();
      this.proxy = proxyWindow;
      this.proxyDocument = proxyDocument;
      this.proxyLocation = proxyLocation;
    }
    this.provide.location = this.proxyLocation;
    addSandboxCacheWithWujie(this.id,this);
  }
}

4-2.非降级Proxygenerator

非降级模式window、document、location代理

window代理拦截，修改this指向

export function proxyGenerator(
  iframe: HTMLIFrameElement,urlElement: HTMLAnchorElement,mainHostPath: string,appHostPath: string
): {
  proxyWindow: Window;
  proxyDocument: Object;
  proxyLocation: Object;
} {
  const proxyWindow = new Proxy(iframe.contentWindow,{
    get: (target: Window,p: PropertyKey): any => {
      // location进行劫持
      /*xxx*/
      // 修正this指针指向
      return getTargetvalue(target,p);
    },set: (target: Window,p: PropertyKey,value: any) => {
      checkProxyFunction(value);
      target[p] = value;
      return true;
    },/**其他方法属性**/
  });

  // proxy document
  const proxyDocument = new Proxy(
    {},{
      get: function (_fakeDocument,propKey) {
        const document = window.document;
        const { shadowRoot,proxyLocation } = iframe.contentWindow.__WUJIE;
        const rawCreateElement = iframe.contentWindow.__WUJIE_RAW_DOCUMENT_CREATE_ELEMENT__;
        const rawCreateTextNode = iframe.contentWindow.__WUJIE_RAW_DOCUMENT_CREATE_TEXT_NODE__;
        // need fix
        /* 包括元素创建，元素选择操作等
         createElement,createTextNode,documenturi，URL，querySelector，querySelectorAll
         documentElement，scrollingElement ，forms，images，links等等
        */
        // from shadowRoot
        if (propKey === "getElementById") {
          return new Proxy(shadowRoot.querySelector,{
            // case document.querySelector.call
            apply(target,ctx,args) {
              if (ctx !== iframe.contentDocument) {
                return ctx[propKey]?.apply(ctx,args);
              }
              return target.call(shadowRoot,`[id="${args[0]}"]`);
            },});
        }
      },}
  );

  // proxy location
  const proxyLocation = new Proxy(
    {},{
      get: function (_fakeLocation,propKey) {
        const location = iframe.contentWindow.location;
        if (
          propKey === "host" || propKey === "hostname" || propKey === "protocol" || propKey === "port" ||
          propKey === "origin"
        ) {
          return urlElement[propKey];
        }
        /** 拦截相关propKey,返回对应lication内容
        propKey =="href","reload","replace"
        **/
        return getTargetvalue(location,propKey);
      },set: function (_fakeLocation,propKey,value) {
        // 如果是跳转链接的话重开一个iframe
        if (propKey === "href") {
          return locationHrefSet(iframe,value,appHostPath);
        }
        iframe.contentWindow.location[propKey] = value;
        return true;
      }
    }
  );
  return { proxyWindow,proxyLocation };
}

4-3，降级模式localGenerator

export function localGenerator(
){
  // 代理 document
  Object.defineProperties(proxyDocument,{
    createElement: {
      get: () => {
        return function (...args) {
          const element = rawCreateElement.apply(iframe.contentDocument,args);
          patchElementEffect(element,iframe.contentWindow);
          return element;
        };
      },});
  // 普通处理
  const {
    modifyLocalProperties,modifyProperties,ownerProperties,shadowProperties,shadowMethods,documentProperties,documentMethods,} = documentProxyProperties;
  modifyProperties
    .filter((key) => !modifyLocalProperties.includes(key))
    .concat(ownerProperties,documentMethods)
    .forEach((key) => {
      Object.defineProperty(proxyDocument,key,{
        get: () => {
          const value = sandbox.document?.[key];
          return isCallable(value) ? value.bind(sandbox.document) : value;
        },});
    });

  // 代理 location
  const proxyLocation = {};
  const location = iframe.contentWindow.location;
  const locationKeys = Object.keys(location);
  const constantKey = ["host","hostname","port","protocol","port"];
  constantKey.forEach((key) => {
    proxyLocation[key] = urlElement[key];
  });
  Object.defineProperties(proxyLocation,{
    href: {
      get: () => location.href.replace(mainHostPath,appHostPath),set: (value) => {
        locationHrefSet(iframe,appHostPath);
      },reload: {
      get() {
        warn(WUJIE_TIPS_RELOAD_DISABLED);
        return () => null;
      },});
  return { proxyDocument,proxyLocation };
}

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

5 importHTML入口文件解析

importHtml方法（entry.ts）

export default function importHTML(params: {
  url: string;
  html?: string;
  opts: ImportEntryOpts;
}): Promise<htmlParseResult> {
  /*xxxx*/
  const getHtmlParseResult = (url,htmlLoader) =>
    (html
      ? Promise.resolve(html)
      : fetch(url).then( /** 使用fetch Api 加载子应用入口**/
          (response) => response.text(),(e) => {
            embedHTMLCache[url] = null;
            loadError?.(url,e);
            return Promise.reject(e);
          }
        )
    ).then((html) => {
      const assetPublicPath = getPublicPath(url);
      const { template,scripts,styles } = processTpl(htmlLoader(html),assetPublicPath);
      return {
        template: template,assetPublicPath,getExternalScripts: () =>
          getExternalScripts(
            scripts
              .filter((script) => !script.src || !isMatchUrl(script.src,jsExcludes))
              .map((script) => ({ ...script,ignore: script.src && isMatchUrl(script.src,jsIgnores) })),loadError,fiber
          ),getExternalStyleSheets: () =>
          getExternalStyleSheets(
            styles
              .filter((style) => !style.src || !isMatchUrl(style.src,cssExcludes))
              .map((style) => ({ ...style,ignore: style.src && isMatchUrl(style.src,cssIgnores) })),loadError
          ),};
    });

  if (opts?.plugins.some((plugin) => plugin.htmlLoader)) {
    return getHtmlParseResult(url,htmlLoader);
    // 没有html-loader可以做缓存
  } else {
    return embedHTMLCache[url] || (embedHTMLCache[url] = getHtmlParseResult(url,htmlLoader));
  }
}

importHTML结构如图：

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

6 CssLoader和样式加载优化

export async function processCssLoader(
  sandbox: Wujie,template: string,getExternalStyleSheets: () => StyleResultList
): Promise<string> {
  const curUrl = getcurUrl(sandbox.proxyLocation);
  /** css-loader */
  const composeCssLoader = compose(sandbox.plugins.map((plugin) => plugin.cssLoader));
  const processedCssList: StyleResultList = getExternalStyleSheets().map(({ src,ignore,contentPromise }) => ({
    src,contentPromise: contentPromise.then((content) => composeCssLoader(content,src,curUrl)),}));
  const embedHTML = await getEmbedHTML(template,processedCssList);
  return sandbox.replace ? sandbox.replace(embedHTML) : embedHTML;
}

7 子应用active

active方法主要用于做子应用激活，同步路由，动态修改iframe的fetch,准备shadow,准备子应用注入

7-1， active方法(sandbox.ts)

public async active(options){
    /**  options的检查  **/
    // 处理子应用自定义fetch
    // TODO fetch检验合法性
    const iframeWindow = this.iframe.contentWindow;
    iframeWindow.fetch = iframeFetch;
    this.fetch = iframeFetch;
   

    // 处理子应用路由同步
    if (this.execflag && this.alive) {
      // 当保活模式下子应用重新激活时，只需要将子应用路径同步回主应用
      syncUrlToWindow(iframeWindow);
    } else {
      // 先将url同步回iframe，然后再同步回浏览器url
      syncUrlToIframe(iframeWindow);
      syncUrlToWindow(iframeWindow);
    }

    // inject template
    this.template = template ?? this.template;

    /* 降级处理 */
    if (this.degrade) {
      return;
    }

    if (this.shadowRoot) {
      this.el = renderElementToContainer(this.shadowRoot.host,el);
      if (this.alive) return;
    } else {
      // 预执行无容器，暂时插入iframe内部触发Web Component的connect
      // rawDocumentQuerySelector.call(iframeWindow.document,"body") 相当于Document.prototype.querySelector('body')
      const iframeBody = rawDocumentQuerySelector.call(iframeWindow.document,"body") as HTMLElement;
        
      this.el = renderElementToContainer(createWujieWebComponent(this.id),el ?? iframeBody);
    }

    await renderTemplateToShadowRoot(this.shadowRoot,iframeWindow,this.template);
    this.patchCssRules();

    // inject shadowRoot to app
    this.provide.shadowRoot = this.shadowRoot;
  }

7-2，createWujieWebComponent,renderElementToContainer,renderTemplateToShadowRoot

// createWujieWebComponent
export function createWujieWebComponent(id: string): HTMLElement {
  const contentElement = window.document.createElement("wujie-app");
  contentElement.setattribute(WUJIE_DATA_ID,id);
  contentElement.classList.add(WUJIE_IFRAME_CLASS);
  return contentElement;
}

/**
 * 将准备好的内容插入容器
 */
export function renderElementToContainer(
  element: Element | ChildNode,selectorOrElement: string | HTMLElement
): HTMLElement {
  const container = getcontainer(selectorOrElement);
  if (container && !container.contains(element)) {
    // 有 loading 无需清理，已经清理过了
    if (!container.querySelector(`div[${LOADING_DATA_flaG}]`)) {
      // 清除内容
      clearChild(container);
    }
    // 插入元素
    if (element) {
      //  rawElementAppendChild = HTMLElement.prototype.appendChild;
      rawElementAppendChild.call(container,element);
    }
  }
  return container;
}
/**
 * 将template渲染到shadowRoot
 */
export async function renderTemplateToShadowRoot(
  shadowRoot: ShadowRoot,iframeWindow: Window,template: string
): Promise<void> {
  const html = renderTemplateToHtml(iframeWindow,template);
  // 处理 css-before-loader 和 css-after-loader
  const processedHtml = await processCssLoaderForTemplate(iframeWindow.__WUJIE,html);
  // change ownerDocument
  shadowRoot.appendChild(processedHtml);
  const shade = document.createElement("div");
  shade.setattribute("style",WUJIE_SHADE_STYLE);
  processedHtml.insertBefore(shade,processedHtml.firstChild);
  shadowRoot.head = shadowRoot.querySelector("head");
  shadowRoot.body = shadowRoot.querySelector("body");

  // 修复 html parentNode
  Object.defineProperty(shadowRoot.firstChild,"parentNode",{
    enumerable: true,configurable: true,get: () => iframeWindow.document,});

  patchRenderEffect(shadowRoot,iframeWindow.__WUJIE.id,false);
}
/**
 * 将template渲染成html元素
 */
function renderTemplateToHtml(iframeWindow: Window,template: string): HTMLHtmlElement {
  const sandbox = iframeWindow.__WUJIE;
  const { head,body,execflag } = sandbox;
  const document = iframeWindow.document;
  let html = document.createElement("html");
  html.innerHTML = template;
  // 组件多次渲染，head和body必须一直使用同一个来应对被缓存的场景
  if (!alive && execflag) {
    html = replaceHeadAndBody(html,head,body);
  } else {
    sandbox.head = html.querySelector("head");
    sandbox.body = html.querySelector("body");
  }
  const ElementIterator = document.createTreeWalker(html,NodeFilter.SHOW_ELEMENT,null,false);
  let nextElement = ElementIterator.currentNode as HTMLElement;
  while (nextElement) {
    patchElementEffect(nextElement,iframeWindow);
    const relativeAttr = relativeElementTagAttrMap[nextElement.tagName];
    const url = nextElement[relativeAttr];
    if (relativeAttr) nextElement.setattribute(relativeAttr,getabsolutePath(url,nextElement.baseURI || ""));
    nextElement = ElementIterator.nextNode() as HTMLElement;
  }
  if (!html.querySelector("head")) {
    const head = document.createElement("head");
    html.appendChild(head);
  }
  if (!html.querySelector("body")) {
    const body = document.createElement("body");
    html.appendChild(body);
  }
  return html;
}
/*
// 保存原型方法
// 子应用的Document.prototype已经被改写了
export const rawElementAppendChild = HTMLElement.prototype.appendChild;
export const rawElementRemoveChild = HTMLElement.prototype.removeChild;
export const rawHeadInsertBefore = HTMLHeadElement.prototype.insertBefore;
export const rawBodyInsertBefore = HTMLBodyElement.prototype.insertBefore;
export const rawAddEventListener = Node.prototype.addEventListener;
export const rawRemoveEventListener = Node.prototype.removeEventListener;
export const rawWindowAddEventListener = window.addEventListener;
export const rawWindowRemoveEventListener = window.removeEventListener;
export const rawAppendChild = Node.prototype.appendChild;
export const rawDocumentQuerySelector = window.__POWERED_BY_WUJIE__
  ? window.__WUJIE_RAW_DOCUMENT_QUERY_SELECTOR__
  : Document.prototype.querySelector;
*/

8 子应用启动执行start

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

public async start(getExternalScripts: () => ScriptResultList): Promise<void> {
    this.execflag = true;
    // 执行脚本
    const scriptResultList = await getExternalScripts();
    const iframeWindow = this.iframe.contentWindow;
    // 标志位，执行代码前设置
    iframeWindow.__POWERED_BY_WUJIE__ = true;
    // 用户自定义代码前 
    const beforeScriptResultList: ScriptObjectLoader[] = getPresetLoaders("jsBeforeLoaders",this.plugins);
    // 用户自定义代码后
    const afterScriptResultList: ScriptObjectLoader[] = getPresetLoaders("jsAfterLoaders",this.plugins);
    // 同步代码
    const syncScriptResultList: ScriptResultList = [];
    // async代码无需保证顺序，所以不用放入执行队列
    const asyncScriptResultList: ScriptResultList = [];
    // defer代码需要保证顺序并且DOMContentLoaded前完成，这里统一放置同步脚本后执行
    const deferScriptResultList: ScriptResultList = [];
    scriptResultList.forEach((scriptResult) => {
      if (scriptResult.defer) deferScriptResultList.push(scriptResult);
      else if (scriptResult.async) asyncScriptResultList.push(scriptResult);
      else syncScriptResultList.push(scriptResult);
    });

    // 插入代码前
    beforeScriptResultList.forEach((beforeScriptResult) => {
      this.execQueue.push(() =>
        this.fiber
          ? requestIdleCallback(() => insertScriptToIframe(beforeScriptResult,iframeWindow))
          : insertScriptToIframe(beforeScriptResult,iframeWindow)
      );
    });
    // 同步代码
    syncScriptResultList.concat(deferScriptResultList).forEach((scriptResult) => {
      /**xxxxx**/
    });

    // 异步代码
    asyncScriptResultList.forEach((scriptResult) => {
      scriptResult.contentPromise.then((content) => {
        this.fiber
          ? requestIdleCallback(() => insertScriptToIframe({ ...scriptResult,content },iframeWindow))
          : insertScriptToIframe({ ...scriptResult,iframeWindow);
      });
    });

    //框架主动调用mount方法
    this.execQueue.push(this.fiber ? () => requestIdleCallback(() => this.mount()) : () => this.mount());

    //触发 DOMContentLoaded 事件
    const domContentLoadedTrigger = () => {
      eventTrigger(iframeWindow.document,"DOMContentLoaded");
      eventTrigger(iframeWindow,"DOMContentLoaded");
      this.execQueue.shift()?.();
    };
    this.execQueue.push(this.fiber ? () => requestIdleCallback(domContentLoadedTrigger) : domContentLoadedTrigger);

    // 插入代码后
    afterScriptResultList.forEach((afterScriptResult) => {
      /**xxxxx**/
    });

    //触发 loaded 事件
    const domLoadedTrigger = () => {
      eventTrigger(iframeWindow.document,"readystatechange");
      eventTrigger(iframeWindow,"load");
      this.execQueue.shift()?.();
    };
    this.execQueue.push(this.fiber ? () => requestIdleCallback(domLoadedTrigger) : domLoadedTrigger);
    // 由于没有办法准确定位是哪个代码做了mount，保活、重建模式提前关闭loading
    if (this.alive || !isFunction(this.iframe.contentWindow.__WUJIE_UnmOUNT)) removeLoading(this.el);
    this.execQueue.shift()();

    // 所有的execQueue队列执行完毕，start才算结束，保证串行的执行子应用
    return new Promise((resolve) => {
      this.execQueue.push(() => {
        resolve();
        this.execQueue.shift()?.();
      });
    });
  }

// getExternalScripts
export function getExternalScripts(
  scripts: ScriptObject[],fetch: (input: RequestInfo,init?: RequestInit) => Promise<Response> = 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,false,loadError).then(resolve,reject))
          : fetchAssets(src,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,loadError);
    }
    return { ...script,contentPromise };
  });
}

// 加载assets资源 
// 如果存在缓存则从缓存中获取
const fetchAssets = (
  src: string,cache: Object,init?: RequestInit) => Promise<Response>,cssflag?: boolean,loadError?: loadErrorHandler
) =>
  cache[src] ||
  (cache[src] = fetch(src)
    .then((response) => {
     /**status > 400按error处理**/
      return response.text();
    })
 }));

// insertScriptToIframe
export function insertScriptToIframe(
  scriptResult: ScriptObject | ScriptObjectLoader,rawElement?: HTMLScriptElement
) {
  const { src,content,crossorigin,crossoriginType,callback,onload } =
    scriptResult as ScriptObjectLoader;
  const scriptElement = iframeWindow.document.createElement("script");
  const nextScriptElement = iframeWindow.document.createElement("script");
  const { replace,proxyLocation } = iframeWindow.__WUJIE;
  const jsLoader = getJsLoader({ plugins,replace });
  let code = jsLoader(content,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.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 (/^<!DOCTYPE html/i.test(code)) {
    error(WUJIE_TIPS_SCRIPT_ERROR_REQUESTED,scriptResult);
    return !async && container.appendChild(nextScriptElement);
  }
  container.appendChild(scriptElement);

  // 调用回调
  callback?.(iframeWindow);
  // 执行 hooks
  execHooks(plugins,"appendOrInsertElementHook",scriptElement,rawElement);
  // 外联转内联调用手动触发onload
  content && onload?.();
  // async脚本不在执行队列，无需next操作
  !async && container.appendChild(nextScriptElement);
}

9 子应用销毁

/** 销毁子应用 */
  public destroy() {
    this.bus.$clear();
    // thi.xxx = null;
    // 清除 dom
    if (this.el) {
      clearChild(this.el);
      this.el = null;
    }
    // 清除 iframe 沙箱
    if (this.iframe) {
      this.iframe.parentNode?.removeChild(this.iframe);
    }
    // 删除缓存
    deleteWujieById(this.id);
  }