微前端框架chunchao(春潮)开源啦

最新推荐文章于 2024-05-16 09:45:45 发布

Peter 谭

最新推荐文章于 2024-05-16 09:45:45 发布

阅读量1.2k

点赞数

分类专栏：前端巅峰文章标签： javascript typescript node.js reactjs vue.js

本文链接：https://blog.csdn.net/petertanjinjie/article/details/106743015

版权

写在开头

为了让大家更能理解微前端的工作模式，微前端的最佳实践应该还需要探索
乞丐版微前端框架chunchao源码开源,仅仅为了让大家学习微前端的工作模式而已，实际项目中，我们有使用Paas模式，web components，git submodule等模式都可以实现微前端,当然业内肯定有独特的、优于这些模式的微前端实现

正式开始

推荐你先看我之前的几篇文章，这样才能更好的阅读本文
如果你有什么问题想跟我交流，可以加入我们的专业微前端交流群/技术交流群

在上篇文章基础上修改，加载子应用方式

首先修改插入dom形式，在请求回来子应用的html内容:


export async function loadApp() {
  const shouldMountApp = Apps.filter(shouldBeActive);
  console.log(shouldMountApp, 'shouldMountApp');
  fetch(shouldMountApp[0].entry)
    .then(function (response) {
      return response.text();
    })
    .then(function (text) {
      const dom = document.createElement('div');
      dom.innerHTML = text;
      const subapp = document.querySelector('#subApp-content');
      subapp && subapp.appendChild(dom);
    });
}

直接将子应用的dom节点，渲染到基座的对应子应用节点中
那么子应用此时除了style、script标签，都加载进来了

加载`script`、`style`标签

样式隔离、沙箱隔离并不是难题，这里不着重实现，可以参考shadow dom,qiankun的proxy隔离代理window实现

在qiankun源码中，也是使用了fetch去加载·script、style`标签，然后用key-value形式缓存在一个对象中（方便缓存第二次直接获取）,他们的fetch还可以用闭包传入或者使用默认的fetch，这里不做过多源码解析

加载script标签

有直接写在html文件里的，有通过script标签引入的（webpack等工程化产物）,有async，preload,defer等特殊属性
改造子应用1的html文件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>subapp1</title>
</head>

<body>
    <div>subapp1</div>
</body>
<script src="/index.js"></script>

最低0.47元/天解锁文章

Peter 谭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
微前端框架chunchao(春潮)开源啦

写在开头为了让大家更能理解微前端的工作模式，微前端的最佳实践应该还需要探索乞丐版微前端框架chunchao源码开源,仅仅为了让大家学习微前端的工作模式而已，实际项目中，我们有使用Paas模式，web components，git submodule等模式都可以实现微前端,当然业内肯定有独特的、优于这些模式的微前端实现正式开始推荐你先看我之前的几篇文章，这样才能更好的阅读本文如果你有什么问题想跟我交流，可以加入我们的专业微前端交流群/技术交流群在上篇文章基础上修改，加载子应用方式
复制链接

扫一扫