微前端框架 qiankun 源码解读 1.3 hijackers/动态加载标签

最新推荐文章于 2024-08-22 14:19:50 发布

Manggoo

最新推荐文章于 2024-08-22 14:19:50 发布

阅读量2.5k

点赞数

分类专栏： qiankun

本文链接：https://blog.csdn.net/q275757160/article/details/103702818

版权

本文深入探讨了微前端框架qiankun的源码，重点讲解了如何劫持HTMLHeadElement的appendChild方法。针对添加的style和script标签，文章详细阐述了在路由匹配时如何处理样式，并区分了通过src加载的js与内联js的执行策略，确保资源加载完毕后能正确通知监听器。

摘要由CSDN通过智能技术生成

import { execScripts } from 'import-html-entry';
import { isFunction } from 'lodash';
import { checkActivityFunctions } from 'single-spa';
import { Freer } from '../interfaces';

const styledComponentSymbol = Symbol('styled-component');

declare global {
  interface HTMLStyleElement {
    [styledComponentSymbol]?: CSSRuleList;
  }
}

const rawHtmlAppendChild = HTMLHeadElement.prototype.appendChild;

const SCRIPT_TAG_NAME = 'SCRIPT';
const LINK_TAG_NAME = 'LINK';
const STYLE_TAG_NAME = 'STYLE';

/**
 * Check if a style element is a styled-component liked.
 * A styled-components liked element is which not have textContext but keep the rules in its styleSheet.cssRules.
 * Such as the style element generated by styled-components and emotion.
 * @param element
 */
function isStyledComponentsLike(element: HTMLStyleElement) {
  return !element.textContent