微前端的十种实现方式[2]实现微前端，我想了想，大概有十种方式供想学习微前端的朋友参考。大家可以看我之前对微前端源码的分析，加载方式，还有我的开源。微前端框架chunchao源码简单易懂，感觉不错。记得阅读和注意。目前主流的微前端实现方式（基座加载式）以base为入口，配置不同的子应用入口地址。实现微前端的效果，目前开源的微前端框架：春潮、qiankun，其中春潮仅用200行代码实现，是值得定制开发的微前端原型框架。架构加载子应用程序？劫持前端路由，重写hashchange和popstate事件constHIJACK_EVENTS_NAME=/^(hashchange|popstate)$/i;constEVENTS_POOL={hashchange:[],popstate:[],};window.addEventListener('hashchange',loadApps);window.addEventListener('popstate',loadApps);constoriginalAddEventListener=window.addEventListener;constoriginalRemoveEventListener=window.removeEventListener;window.addEventListener=function(eventName,handler){如果(eventName&typeevent&HIJACK_EV)==='function'){EVENTS_POOL[eventName].indexOf(handler)===-1&&EVENTS_POOL[eventName].push(handler);}returnoriginalAddEventListener.apply(this,arguments);};根据不同的词条，去拉获取子应用的js、css等资源并注册子应用存入队列/****@param{string}entry*@param{string}function*/constApps=[]//子应用队列函数registryApp(entry,activeRule){Apps.push({entry,activeRule})}注册后，找到需要加载的app，拉取资源exportasyncfunctionloadApp(){constshouldMountApp=Apps.filter(shouldBeActive);constApp=shouldMountApp.pop();fetch(App.entry).then(function(response){returnresponse.text();}).then(asyncfunction(text){constdom=document.createElement('div');dom.innerHTML=text;constentryPath=App.entry;constscripts=dom.querySelectorAll('script');constsubapp=document.querySelector('#subApp-content');constparomiseArr=scripts&&Array.from(scripts).map((项目)=>{if(item.src){consturl=window.location.protocol+'//'+window.location.host;returnfetch(`${entryPath}/${item.src}`.replace(网址，''））.then(函数(响应){returnresponse.text();});}else{returnPromise.resolve(item.textContent);}});subapp.appendChild(dom);constres=awaitPromise.all(paromiseArr);如果(res&&res.length>0){res.forEach((item)=>{constscript=document.createElement('script');script.innerText=item;subapp.appendChild(script);});}});}shouldBeActive根据传入的规则判断此时是否需要挂载：constscripts=dom.querySelectorAll('脚本');constparomiseArr=scripts&&Array.from(scripts).map((item)=>{if(item.src){consturl=window.location.protocol+'//'+window.location.host;returnfetch(`${entryPath}/${item.src}`.replace(url,'')).then(function(response){returnresponse.text();});}else{returnPromise.resolve(item.textContent);}});constres=awaitPromise.all(paromiseArr);如果(res&&res.length>0){res.forEach((item)=>{constscript=document.createElement('script');script.innerText=item;subapp.appendChild(script);});}}处理样式文件exportasyncfunctionhandleStyles(entryPath,subapp,dom){constarr=[];conststyles=dom.querySelectorAll('style');constlinks=Array.from(dom.querySelectorAll('link')).filter((item)=>item.rel==='stylesheet');constrealArr=arr.concat(styles,links)constparomiseArr=arr&&Array.from(realArr).map((item)=>{if(item.rel){consturl=window.location.protocol+'//'+window.location.host;returnfetch(`${entryPath}/${item.href}`.replace(url,'')).then(function(response){returnresponse.text();});}else{returnPromise.resolve(item.textContent);}});constres=awaitPromise.all(paromiseArr);if(res&&res.length>0){res.forEach((item)=>{conststyle=document.createElement('style');style.innerHTML=item;subapp.appendChild(style);});}}此时，我们已经可以加载不同的子应用程序了。最后，认真收藏这个系列，记得关注和观看，相信你会收获很多~我是Peter，我设计过桌面跨平台IM软件，重Saas平台和移动端跨平台APP，我的微信：CALASFxiaotan另外，欢迎收藏我的资料网址：前端生活社区：https://qianduan.life，感觉对你有帮助，可以点击右下角观看，关注一波公众号的：【前端巅峰】
