微前端框架是怎么导入加载子应用的

微前端似乎是最近一个很火的话题，我们也即将使用在生产环境中，接下来会更新一系列微前端源码分析、手写微前端文章

创新互联公司是一家集网站建设,临城企业网站建设,临城品牌网站建设,网站定制,临城网站建设报价,网络营销,网络优化,临城网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

废话不多说，直接参考目前的微前端框架注册子应用模块代码

下面代码，我指定的entry,就是子应用的访问入口地址

微前端到底是怎么回事呢？  我画了一张图

我们今天不谈其他的实现技术细节，坑点，就谈整体架构，这张图就能完全解释清楚

那么registerMicroApps,到底做了什么呢？

源码解析下，只看重要部分今天：

lifeCycles是我们自己传入的生命周期函数（这里先不解释），跟react这种框架一样，微前端针对每个子应用，也封装了一些生命周期，如果你是小白，那我就用最简单的话告诉你，生命周期钩子，其实在框架源码就是一个函数编写调用顺序而已（有的分异步和同步）

apps就是我们传入的数组，子应用集合

代码里做了一些防重复注册、数据处理等

看源码，不要全部都看，那样很费时间，而且你也得不到利益最大化，只看最精髓、重要部分

无论上面做了上面子应用去重、数据处理，我只要盯着每个子应用，即app这个对象即可

看到了loadApp这个方法，我们可以大概猜测到，是通过这个方法加载

下面__rest是对数据进行处理

loadApp这个函数有大概300行，挑最重点地方看

registerApplication是single-spa的方法，我们这里通过loadApp这个方法，对数据进行处理

上面这个函数，应该是整个微前端框架最复杂的地方，它最终会返回一个函数，当成函数传递给single-spa这个库的registerApplication方法使用

它的内部是switch case逻辑，然后返回一个数组

这是一个逻辑判断

 
 
 
 
    
  
  
  
  
  1. case 0:  
    2.   
  
  
  
  2.           entry = app.entry, appappName = app.name;  
    3.   
  
  
  
  3.           _b = configuration.singular, singular = _b === void 0 ? false : _b, _c = configuration.sandbox, sandbox = _c === void 0 ? true : _c, importEntryOpts = __rest(configuration, ["singular", "sandbox"]); 
    4.   
  
  
  
  4.  return [4  
    5.   
  
  
  
  5. /*yield*/  
    6.   
  
  
  
  6.           , importEntry(entry, importEntryOpts)]; 
    7.

重点来了

会通过importEntry 去加载entry（子应用地址）

上面代码里最重要的，如果我们entry传入字符串，那么就会使用这个函数去加载HTML内容（其实微前端的所有子应用加载，都是把dom节点加载渲染到基座的index.html文件中的一个div标签内）

importHTML这个函数，就是我们今晚最重要的一个点

传入url地址，发起fetch请求（此时由于域名或者端口不一样，会出现跨域，所有子应用的热更新开发模式下，webpack配置要做以下处理，部署也要考虑这个问题）

整个importHTML函数好像很长很长，但是我们就看最重要的地方，一个框架（库），流程线很长+版本迭代原因，需要兼容老的版本，所以很多源码对于我们其实是无用的

整个函数，最后返回了一个对象，这里很明显，通过fetch请求，获取了对应子应用entry入口的资源文件后，转换成了字符串

这里processTpl其实就是对这个子应用的dom模版（字符串格式）进行一个数据拼装，其实也不是很复杂，由于时间关系，可以自己看看过程，重点看结果

这里的思想，是redux的中间件源码思想，将数据进行了一层包装，高可用使用

 
 
 
 
    
  
  
  
  
  1. function processTpl(tpl, baseURI) {  
    2.   
  
  
  
  2. var scripts = [];  
    3.   
  
  
  
  3. var styles = [];  
    4.   
  
  
  
  4. var entry = null;  
    5.   
  
  
  
  5. var template = tpl  
    6.   
  
  
  
  6. /*  
    7.   
  
  
  
  7.   remove html comment first  
    8.   
  
  
  
  8.   */  
    9.   
  
  
  
  9.   .replace(HTML_COMMENT_REGEX, '').replace(LINK_TAG_REGEX, function (match) {  
    10.   
  
  
  
  10. /*  
    11.   
  
  
  
  11.     change the css link  
    12.   
  
  
  
  12.     */  
    13.   
  
  
  
  13. var styleType = !!match.match(STYLE_TYPE_REGEX);  
    14.   
  
  
  
  14. if (styleType) {  
    15.   
  
  
  
  15. var styleHref = match.match(STYLE_HREF_REGEX);  
    16.   
  
  
  
  16. var styleIgnore = match.match(LINK_IGNORE_REGEX);  
    17.   
  
  
  
  17. if (styleHref) {  
    18.   
  
  
  
  18. var href = styleHref && styleHref[2];  
    19.   
  
  
  
  19. var newHref = href;  
    20.   
  
  
  
  20. if (href && !hasProtocol(href)) {  
    21.   
  
  
  
  21.           newHref = getEntirePath(href, baseURI);  
    22.   
  
  
  
  22.         }  
    23.   
  
  
  
  23. if (styleIgnore) {  
    24.   
  
  
  
  24. return genIgnoreAssetReplaceSymbol(newHref);  
    25.   
  
  
  
  25.         }  
    26.   
  
  
  
  26.         styles.push(newHref);  
    27.   
  
  
  
  27. return genLinkReplaceSymbol(newHref);  
    28.   
  
  
  
  28.       }  
    29.   
  
  
  
  29.     }  
    30.   
  
  
  
  30. var preloadOrPrefetchType = match.match(LINK_PRELOAD_OR_PREFETCH_REGEX) && match.match(LINK_HREF_REGEX);  
    31.   
  
  
  
  31. if (preloadOrPrefetchType) {  
    32.   
  
  
  
  32. var _match$matchmatch = match.match(LINK_HREF_REGEX),  
    33.   
  
  
  
  33.           _match$match2 = (0, _slicedToArray2["default"])(_match$match, 3),  
    34.   
  
  
  
  34.           linkHref = _match$match2[2];  
    35.   
  
  
  
  35. return genLinkReplaceSymbol(linkHref, true);  
    36.   
  
  
  
  36.     }  
    37.   
  
  
  
  37. return match;  
    38.   
  
  
  
  38.   }).replace(STYLE_TAG_REGEX, function (match) {  
    39.   
  
  
  
  39. if (STYLE_IGNORE_REGEX.test(match)) {  
    40.   
  
  
  
  40. return genIgnoreAssetReplaceSymbol('style file');  
    41.   
  
  
  
  41.     }  
    42.   
  
  
  
  42. return match;  
    43.   
  
  
  
  43.   }).replace(ALL_SCRIPT_REGEX, function (match) {  
    44.   
  
  
  
  44. var scriptIgnore = match.match(SCRIPT_IGNORE_REGEX); // in order to keep the exec order of all javascripts  
    45.   
  
  
  
  45. // if it is a external script  
    46.   
  
  
  
  46. if (SCRIPT_TAG_REGEX.test(match) && match.match(SCRIPT_SRC_REGEX)) {  
    47.   
  
  
  
  47. /* 
    48.   
  
  
  
  48.       collect scripts and replace the ref  
    49.   
  
  
  
  49.       */  
    50.   
  
  
  
  50. var matchmatchedScriptEntry = match.match(SCRIPT_ENTRY_REGEX);  
    51.   
  
  
  
  51. var matchmatchedScriptSrcMatch = match.match(SCRIPT_SRC_REGEX);  
    52.   
  
  
  
  52. var matchedScriptSrc = matchedScriptSrcMatch && matchedScriptSrcMatch[2];  
    53.   
  
  
  
  53. if (entry && matchedScriptEntry) {  
    54.   
  
  
  
  54. throw new SyntaxError('You should not set multiply entry script!');  
    55.   
  
  
  
  55.       } else {  
    56.   
  
  
  
  56. // append the domain while the script not have an protocol prefix  
    57.   
  
  
  
  57. if (matchedScriptSrc && !hasProtocol(matchedScriptSrc)) {  
    58.   
  
  
  
  58.           matchedScriptSrc = getEntirePath(matchedScriptSrc, baseURI);  
    59.   
  
  
  
  59.         }  
    60.   
  
  
  
  60.         entryentry = entry || matchedScriptEntry && matchedScriptSrc;  
    61.   
  
  
  
  61.       }  
    62.   
  
  
  
  62. if (scriptIgnore) {  
    63.   
  
  
  
  63. return genIgnoreAssetReplaceSymbol(matchedScriptSrc || 'js file');  
    64.   
  
  
  
  64.       }  
    65.   
  
  
  
  65. if (matchedScriptSrc) {  
    66.   
  
  
  
  66. var asyncScript = !!match.match(SCRIPT_ASYNC_REGEX);  
    67.   
  
  
  
  67.         scripts.push(asyncScript ? {  
    68.   
  
  
  
  68.           async: true,  
    69.   
  
  
  
  69.           src: matchedScriptSrc  
    70.   
  
  
  
  70.         } : matchedScriptSrc);  
    71.   
  
  
  
  71. return genScriptReplaceSymbol(matchedScriptSrc, asyncScript);  
    72.   
  
  
  
  72.       }  
    73.   
  
  
  
  73. return match;  
    74.   
  
  
  
  74.     } else {  
    75.   
  
  
  
  75. if (scriptIgnore) {  
    76.   
  
  
  
  76. return genIgnoreAssetReplaceSymbol('js file');  
    77.   
  
  
  
  77.       } // if it is an inline script  
    78.   
  
  
  
  78. var code = (0, _utils.getInlineCode)(match); // remove script blocks when all of these lines are comments.  
    79.   
  
  
  
  79. var isPureCommentBlock = code.split(/[\r\n]+/).every(function (line) {  
    80.   
  
  
  
  80. return !line.trim() || line.trim().startsWith('//');  
    81.   
  
  
  
  81.       });  
    82.   
  
  
  
  82. if (!isPureCommentBlock) { 
    83.   
  
  
  
  83.          scripts.push(match);  
    84.   
  
  
  
  84.       }  
    85.   
  
  
  
  85. return inlineScriptReplaceSymbol;  
    86.   
  
  
  
  86.     }  
    87.   
  
  
  
  87.   });  
    88.   
  
  
  
  88.   scriptsscripts = scripts.filter(function (script) {  
    89.   
  
  
  
  89. // filter empty script  
    90.   
  
  
  
  90. return !!script;  
    91.   
  
  
  
  91.   });  
    92.   
  
  
  
  92. return {  
    93.   
  
  
  
  93.     template: template,  
    94.   
  
  
  
  94.     scripts: scripts,  
    95.   
  
  
  
  95.     styles: styles,  
    96.   
  
  
  
  96. // set the last script as entry if have not set  
    97.   
  
  
  
  97.     entry: entry || scripts[scripts.length - 1]  
    98.   
  
  
  
  98.   };  
    99.   
  
  
  
  99. } 
    100.

最终返回了一个对象，此时已经不是一个纯html的字符串了，而是一个对象，而且脚本样式都分离了

这个是框架帮我们处理的，必须要设置一个入口js文件

 
 
 
 
    
  
  
  
  
  1. // set the last script as entry if have not set 
    2.

下面是真正的single-spa源码，注册子应用，用apps这个数组去收集所有的子应用（数组每一项已经拥有了脚本、html、css样式的内容）

此时我们只要根据我们之前编写的activeRule和监听前端路由变化去控制展示子应用即可，原理如下:(今天不做过多讲解这块)

 
 
 
 
    
  
  
  
  
  1. window.addEventListener('hashchange', reroute);  
    2.   
  
  
  
  2. window.addEventListener('popstate', reroute);  
    3.   
  
  
  
  3. // 拦截所有注册的事件，以便确保这里的事件总是第一个执行  
    4.   
  
  
  
  4. const originalAddEventListener = window.addEventListener;  
    5.   
  
  
  
  5. const originalRemoveEventListener = window.removeEventListener;  
    6.   
  
  
  
  6. window.addEventListener = function (eventName, handler, args) {  
    7.   
  
  
  
  7.     if (eventName && HIJACK_EVENTS_NAME.test(eventName) && typeof handler === 'function') {  
    8.   
  
  
  
  8.         EVENTS_POOL[eventName].indexOf(handler) === -1 && EVENTS_POOL[eventName].push(handler); 
    9.   
  
  
  
  9.     }  
    10.   
  
  
  
  10.     return originalAddEventListener.apply(this, arguments);  
    11.   
  
  
  
  11. };  
    12.   
  
  
  
  12. window.removeEventListener = function (eventName, handler) {  
    13.   
  
  
  
  13.     if (eventName && HIJACK_EVENTS_NAME.test(eventName) && typeof handler === 'function') {  
    14.   
  
  
  
  14.         let eventList = EVENTS_POOL[eventName];  
    15.   
  
  
  
  15.         eventList.indexOf(handler) > -1 && (EVENTS_POOL[eventName] = eventList.filter(fn => fn !== handler));  
    16.   
  
  
  
  16.     }  
    17.   
  
  
  
  17.     return originalRemoveEventListener.apply(this, arguments);  
    18.   
  
  
  
  18. }; 
    19.

也是redux的中间件思想，劫持了事件，然后进行派发，优先调用微前端框架的路由事件，然后进行过滤展示子应用：

 
 
 
 
    
  
  
  
  
  1. export function getAppsToLoad() {  
    2.   
  
  
  
  2.     return APPS.filter(notSkipped).filter(withoutLoadError).filter(isntLoaded).filter(shouldBeActive);  
    3.   
  
  
  
  3. } 
    4.

整个微前端的触发流程

名称栏目：微前端框架是怎么导入加载子应用的
链接分享：http://www.shufengxianlan.com/qtweb/news6/41606.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站设计公司知识

各行业网站

雪茄烟　　 　平昌做网站　　 　成都企业网站定制　　 　成都网站建设　　 　成都网站制作　　 　域名申请　　 　成都做商城网站　　 　网络推广公司　　 　鑫友邦火锅桌　　 　雅安机房托管　　 　宜宾网站建设　　 　响应式网站　　 　成都建网站　　 　响应式网站　　 　成都商城开发　　 　成都电信服务器托管　　 　吉安网站建设　　 　营山网站建设　　 　成都网站建设　　 　木包装箱