【微前端】qiankun 到底是個(gè)什么鬼

singleSpa.registerApplication(
  'appName',
  () => System.import('appName'),
  location => location.pathname.startsWith('appName'),
);

registerMicroApps([
  {
    name: 'react app', // 子應(yīng)用名
    entry: '//localhost:7100', // 子應(yīng)用 html 或網(wǎng)址
    container: '#yourContainer', // 掛載容器選擇器
    activeRule: '/yourActiveRule', // 激活路由
  },
]);

start(); // Go

import importHTML from 'import-html-entry';

importHTML('./subApp/index.html')
  .then(res => {
    console.log(res.template); // 拿到 HTML 模板

    res.execScripts().then(exports => { // 執(zhí)行 JS 腳本
      const mobx = exports; // 獲取 JS 的輸出內(nèi)容
      // 下面就是拿到 JS 入口的內(nèi)容，并用來(lái)做一些事
      const { observable } = mobx;
      observable({
        name: 'kuitos'
      })    
    })
});

// 解析 HTML，獲取 html，js，css 文本
const {htmlText, jsText, cssText} = importHTMLEntry('https://xxxx.com')

// 創(chuàng)建容器
const $= document.querySelector(container)
$container.innerHTML = htmlText

// 創(chuàng)建 style 和 js 標(biāo)簽
const $style = createElement('style', cssText)
const $script = createElement('script', jsText)

$container.appendChild([$style, $script])

  if (strictStyleIsolation) {
    if (!supportShadowDOM) {
      // 報(bào)錯(cuò)
      // ...
    } else {
      // 清除原有的內(nèi)容
      const { innerHTML } = appElement;
      appElement.innerHTML = '';

      let shadow: ShadowRoot;

      if (appElement.attachShadow) {
        // 添加 shadow DOM 節(jié)點(diǎn)
        shadow = appElement.attachShadow({ mode: 'open' });
      } else {
        // deprecated 的操作
        // ...
      }
      // 在 shadow DOM 節(jié)點(diǎn)添加內(nèi)容
      shadow.innerHTML = innerHTML;
    }
  }

.container {
  background: red;
}

div {
  color: red;
}

.subApp.container {
  background: red;
}

.subApp div {
  color: red;
}

class SnapshotSandbox {
  ...

  active() {
    // 記錄當(dāng)前快照
    this.windowSnapshot = {} as Window;
    getKeys(window).forEach(key => {
      this.windowSnapshot[key] = window[key];
    })

    // 恢復(fù)之前的變更
    getKeys(this.modifyPropsMap).forEach((key) => {
      window[key] = this.modifyPropsMap[key];
    });

    this.sandboxRunning = true;
  }

  inactive() {
    this.modifyPropsMap = {};

    // 記錄變更，恢復(fù)環(huán)境
    getKeys(window).forEach((key) => {
      if (window[key] !== this.windowSnapshot[key]) {
        this.modifyPropsMap[key] = window[key];
        window[key] = this.windowSnapshot[key];
      }
    });

    this.sandboxRunning = false;
  }
}

class SingularProxySandbox {
  /** 沙箱期間新增的全局變量 */
  private addedPropsMapInSandbox = new Map<PropertyKey, any>();

  /** 沙箱期間更新的全局變量 */
  private modifiedPropsOriginalValueMapInSandbox = new Map<PropertyKey, any>();

  /** 持續(xù)記錄更新的(新增和修改的)全局變量的 map，用于在任意時(shí)刻做 snapshot */
  private currentUpdatedPropsValueMap = new Map<PropertyKey, any>();

  active() {
    if (!this.sandboxRunning) {
      // 恢復(fù)子應(yīng)用修改過的值
      this.currentUpdatedPropsValueMap.forEach((v, p) => setWindowProp(p, v));
    }

    this.sandboxRunning = true;
  }

  inactive() {
    // 恢復(fù)加載子應(yīng)用前的 window 值
    this.modifiedPropsOriginalValueMapInSandbox.forEach((v, p) => setWindowProp(p, v));
    // 刪掉子應(yīng)用期間新加的 window 值 
    this.addedPropsMapInSandbox.forEach((_, p) => setWindowProp(p, undefined, true));

    this.sandboxRunning = false;
  }

  constructor(name: string) {
    this.name = name;
    this.type = SandBoxType.LegacyProxy;
    const { addedPropsMapInSandbox, modifiedPropsOriginalValueMapInSandbox, currentUpdatedPropsValueMap } = this;

    const rawWindow = window;
    const fakeWindow = Object.create(null) as Window;

    const proxy = new Proxy(fakeWindow, {
      set: (_: Window, key: PropertyKey, value: any): boolean => {
        if (this.sandboxRunning) {
          if (!rawWindow[key]) {
            addedPropsMapInSandbox.set(key, value); // 將沙箱期間新加的值記錄下來(lái)
          } else if (!modifiedPropsOriginalValueMapInSandbox.has(key)) {
            modifiedPropsOriginalValueMapInSandbox.set(key, rawWindow[key]); // 記錄沙箱前的值
          }

          currentUpdatedPropsValueMap.set(key, value); // 記錄沙箱后的值

          // 必須重新設(shè)置 window 對(duì)象保證下次 get 時(shí)能拿到已更新的數(shù)據(jù)
          (rawWindow as any)[key] = value;
        }
      },

      get(_: Window, key: PropertyKey): any {
        return rawWindow[key]
      },
    }
  }
}

class ProxySandbox {
  ...

  active() { // +1 廢話
    if (!this.sandboxRunning) activeSandboxCount++;
    this.sandboxRunning = true;
  }

  inactive() { // -1 廢話
    if (--activeSandboxCount === 0) {
      variableWhiteList.forEach((p) => {
        if (this.proxy.hasOwnProperty(p)) {
          delete window[p]; // 刪除白名單里子應(yīng)用添加的值
        }
      });
    }

    this.sandboxRunning = false;
  }

  constructor(name: string) {
    ...
    const rawWindow = window; // 原 window 對(duì)象
    const { fakeWindow, propertiesWithGetter } = createFakeWindow(rawWindow); // 將真 window 上的 key-value 復(fù)制到假 window 對(duì)象上

    const proxy = new Proxy(fakeWindow, { // 代理復(fù)制出來(lái)的 window
      set: (target: FakeWindow, key: PropertyKey, value: any): boolean => {
        if (this.sandboxRunning) {
          target[key] = value // 修改 fakeWindow 上的值

          if (variableWhiteList.indexOf(key) !== -1) {
            rawWindow[key] = value; // 白名單的話，修改真 window 上的值
          }

          updatedValueSet.add(p); // 記錄修改的值
        }
      },

      get(target: FakeWindow, key: PropertyKey): any {
        return target[key] || rawWindow[key] // 在 fakeWindow 上找，找不到從直 window 上找
      },
    }
  }
}

// patch(element)
switch (element.tagName) {
  case LINK_TAG_NAME:  // <link> 標(biāo)簽
  case STYLE_TAG_NAME: { // <style> 標(biāo)簽
    if (scopedCSS) { // 使用 Scoped CSS
      if (element.href;) { // 處理如 <link rel="icon" href="favicon.ico"> 的玩意
        stylesheetElement = convertLinkAsStyle( // 獲取 <link> 里的 CSS 文本，并使用 css.process 添加前綴
          element,
          (styleElement) => css.process(mountDOM, styleElement, appName), // 添加前綴回調(diào)
          fetch,
        );
        dynamicLinkAttachedInlineStyleMap.set(element, stylesheetElement); // 緩存，下次加載沙箱時(shí)直接吐出來(lái)
      } else { // 處理如 <style>.container { background: red }</style> 的玩意
        css.process(mountDOM, stylesheetElement, appName);
      }
    }

    return rawDOMAppendOrInsertBefore.call(mountDOM, stylesheetElement, referenceNode); // 插入到掛載容器上
  }

  case SCRIPT_TAG_NAME: {
    const { src, text } = element as HTMLScriptElement;

    if (element.src) { // 處理外鏈 JS
      execScripts(null, [src], proxy, { // 獲取并執(zhí)行 JS
        fetch,
        strictGlobal,
      });

      return rawDOMAppendOrInsertBefore.call(mountDOM, dynamicScriptCommentElement, referenceNode); // 插入到掛載容器上
    }

    // 處理內(nèi)聯(lián) JS
    execScripts(null, [`<script>${text}</script>`], proxy, { strictGlobal });
    return rawDOMAppendOrInsertBefore.call(mountDOM, dynamicInlineScriptCommentElement, referenceNode);
  }

  default:
    break;
}

if (window. __POWERED_BY_QIANKUN__) {
  console.log('微前端場(chǎng)景')
  renderAsSubApp()
} else {
  console.log('單體場(chǎng)景')
  previousRenderApp()
}

// getAddOn
export default function getAddOn(global: Window): FrameworkLifeCycles<any> {
  return {
    async beforeLoad() {
      // eslint-disable-next-line no-param-reassign
      global.__POWERED_BY_QIANKUN__ = true;
    },

    async beforeMount() {
      // eslint-disable-next-line no-param-reassign
      global.__POWERED_BY_QIANKUN__ = true;
    },

    async beforeUnmount() {
      // eslint-disable-next-line no-param-reassign
      delete global.__POWERED_BY_QIANKUN__;
    },
  };
}

// loadApp
const addOnLifeCycles = getAddOn(window)

return {
  load: [addOnLifeCycles.beforeLoad, subApp.load],
  mount: [addOnLifeCycles.mount, subApp.mount],
  unmount: [addOnLifeCycles.unmount, subApp.unmount]
}

requestIdleCallback(async () => {
  const { getExternalScripts, getExternalStyleSheets } = await importEntry(entry, opts);
  requestIdleCallback(getExternalStyleSheets);
  requestIdleCallback(getExternalScripts);
});

export function doPrefetchStrategy(
  apps: AppMetadata[],
  prefetchStrategy: PrefetchStrategy,
  importEntryOpts?: ImportEntryOpts,
) {
  const appsName2Apps = (names: string[]): AppMetadata[] => apps.filter((app) => names.includes(app.name));

  if (Array.isArray(prefetchStrategy)) {
    // 全部都在第一個(gè)子應(yīng)用加載后才預(yù)加載
    prefetchAfterFirstMounted(appsName2Apps(prefetchStrategy as string[]), importEntryOpts);
  } else if (isFunction(prefetchStrategy)) {
    (async () => {
      // 一半一半
      const { criticalAppNames = [], minorAppsName = [] } = await prefetchStrategy(apps);
      prefetchImmediately(appsName2Apps(criticalAppNames), importEntryOpts);
      prefetchAfterFirstMounted(appsName2Apps(minorAppsName), importEntryOpts);
    })();
  } else {
    switch (prefetchStrategy) {
      case true: // 全部都在第一個(gè)子應(yīng)用加載后才預(yù)加載
        prefetchAfterFirstMounted(apps, importEntryOpts);
        break;

      case 'all': // 全部子應(yīng)用都立馬預(yù)加載
        prefetchImmediately(apps, importEntryOpts);
        break;

      default:
        break;
    }
  }
}

let gloablState = {}
let deps = {}

// 觸發(fā)全局監(jiān)聽
function emitGlobal(state: Record<string, any>, prevState: Record<string, any>) {
  Object.keys(deps).forEach((id: string) => {
    if (deps[id] instanceof Function) {
      deps[id](cloneDeep(state), cloneDeep(prevState));
    }
  });
}

// 添加全局狀態(tài)變化的監(jiān)聽器
function onGlobalStateChange(callback: OnGlobalStateChangeCallback, fireImmediately?: boolean) {
  deps[id] = callback;
  if (fireImmediately) {
    const cloneState = cloneDeep(globalState);
    callback(cloneState, cloneState);
  }
}

// 更新 globalState
function setGlobalState(state: Record<string, any> = {}) {
  const prevState = globalState
  globalState = {...cloneDeep(globalState), ...state}
  emitGlobal(globalState, prevState);
}

// 注銷該應(yīng)用下的依賴
function offGlobalStateChange() {
  delete deps[id];
}

export function addGlobalUncaughtErrorHandler(errorHandler: OnErrorEventHandlerNonNull): void {
  window.addEventListener('error', errorHandler);
  window.addEventListener('unhandledrejection', errorHandler);
}

export function removeGlobalUncaughtErrorHandler(errorHandler: (...args: any[]) => any) {
  window.removeEventListener('error', errorHandler);
  window.removeEventListener('unhandledrejection', errorHandler);
}