实现微前端的十种方式 【第二种】

栏目: IT技术 · 发布时间: 4年前

实现微前端的十种方式 【二】

目前主流的微前端实现方式(基座加载式)

  • 以基座为入口,配置不同的子应用入口地址,达到实现微前端的效果

  • chunchao
    qiankun
    chunchao
    
  • 微前端基座模式配置

实现微前端的十种方式 【第二种】
  • 加载示意图

实现微前端的十种方式 【第二种】

如何实现基座模式加载子应用?

  • 劫持前端路由,重写 hashchangepopstate 事件
const HIJACK_EVENTS_NAME = /^(hashchange|popstate)$/i;
const EVENTS_POOL = {
hashchange: [],
popstate: [],
};

window.addEventListener('hashchange', loadApps);
window.addEventListener('popstate', loadApps);

const originalAddEventListener = window.addEventListener;
const originalRemoveEventListener = window.removeEventListener;
window.addEventListener = function (eventName, handler) {
if (
eventName &&
HIJACK_EVENTS_NAME.test(eventName) &&
typeof handler === 'function'
) {
EVENTS_POOL[eventName].indexOf(handler) === -1 &&
EVENTS_POOL[eventName].push(handler);
}
return originalAddEventListener.apply(this, arguments);
};
  • 根据不同的入口,去拉取子应用的 jscss 等资源 实现微前端的十种方式 【第二种】
  • 注册子应用后存入队列中


/**
*
* @param {string} entry
* @param {string} function
*/
const Apps = [] //子应用队列
function registryApp(entry,activeRule) {
Apps.push({
entry,
activeRule
})
}
  • 注册完了之后,就要找到需要加载的app,并且拉取资源

export async function loadApp() {
const shouldMountApp = Apps.filter(shouldBeActive);
const App = shouldMountApp.pop();
fetch(App.entry)
.then(function (response) {
return response.text();
})
.then(async function (text) {
const dom = document.createElement('div');
dom.innerHTML = text;
const entryPath = App.entry;
const scripts = dom.querySelectorAll('script');
const subapp = document.querySelector('#subApp-content');
const paromiseArr =
scripts &&
Array.from(scripts).map((item) => {
if (item.src) {
const url = window.location.protocol + '//' + window.location.host;
return fetch(`${entryPath}/${item.src}`.replace(url, '')).then(
function (response) {
return response.text();
}
);
} else {
return Promise.resolve(item.textContent);
}
});
subapp.appendChild(dom);
const res = await Promise.all(paromiseArr);
if (res && res.length > 0) {
res.forEach((item) => {
const script = document.createElement('script');
script.innerText = item;
subapp.appendChild(script);
});
}
});
}
  • shouldBeActive根据传入的规则去判断是否需要此时挂载:

export function shouldBeActive(app){
return app.activeRule(window.location)
}
  • 处理脚本文件

export async function handleScripts(entryPath,subapp,dom) {
const scripts = dom.querySelectorAll('script');
const paromiseArr =
scripts &&
Array.from(scripts).map((item) => {
if (item.src) {
const url = window.location.protocol + '//' + window.location.host;
return fetch(`${entryPath}/${item.src}`.replace(url, '')).then(
function (response) {
return response.text();
}
);
} else {
return Promise.resolve(item.textContent);
}
});
const res = await Promise.all(paromiseArr);
if (res && res.length > 0) {
res.forEach((item) => {
const script = document.createElement('script');
script.innerText = item;
subapp.appendChild(script);
});
}
}
  • 处理样式文件


export async function handleStyles(entryPath, subapp, dom) {
const arr = [];
const styles = dom.querySelectorAll('style');
const links = Array.from(dom.querySelectorAll('link')).filter(
(item) => item.rel === 'stylesheet'
);
const realArr = arr.concat(styles,links)
const paromiseArr =
arr &&
Array.from(realArr).map((item) => {
if (item.rel) {
const url = window.location.protocol + '//' + window.location.host;
return fetch(`${entryPath}/${item.href}`.replace(url, '')).then(
function (response) {
return response.text();
}
);
} else {
return Promise.resolve(item.textContent);
}
});
const res = await Promise.all(paromiseArr);
if (res && res.length > 0) {
res.forEach((item) => {
const style = document.createElement('style');
style.innerHTML = item;
subapp.appendChild(style);
});
}
}
  • 此时,我们已经可以加载不同的子应用了。

最后

  • 认真收藏这个系列吧,记得点个关注和在看,相信你能收获很多很多~

  • Peter
    IM
    APP
    
  • https://qianduan.life
    在看
    关注
    前端巅峰
    

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

重启

重启

米奇•乔尔 / 曲强 / 中信出版社 / 2014-6-10 / 45.00元

罗振宇、丹尼尔•平克、赛斯•高汀、丹•艾瑞里、谢家华、阿里安娜•赫芬顿强烈推荐! 美国亚马逊2013年年度商业&投资类图书榜前20名! 互联网时代五大剧变让企业和个人无处可逃 进化,或被扔在旧时代? 全球顶尖的数字预言家独特分享 商业转型与思维转型的实践指南 当个人变为互联世界中的一个节点,如何开启新的工作方式? 如何与顾客建立直接关系?如何进行实用主义营......一起来看看 《重启》 这本书的介绍吧!

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具