V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
aos
V2EX  ›  前端开发

一行代码实现微前端

  •  
  •   aos · 2021-08-01 19:43:24 +08:00 · 1857 次点击
    这是一个创建于 1211 天前的主题,其中的信息可能已经有所发展或是发生改变。

    看到标题,大家首先想到的应该是 iframe,诚然 iframe 的确可以做到,但是我们今天要讲的并不是它,而是新推出的一款微前端框架micro-app。至于为什么不用 iframe,可以参考Why Not Iframe

    micro-app 是什么

    micro-app 是一款基于类 WebComponent 进行渲染的微前端框架,它从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它是目前市面上接入微前端成本最低的框架,并且提供了 JS 沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

    micro-app 的基本实现思路和 single-spa 、qiankun 类似,但它借鉴了 WebComponent 的思想,使用 CustomElement 和自定义的 shadowDom,将微前端封装在一个类 WebComponent 组件中,从而简化了渲染步骤。

    如何使用?

    1 、安装依赖

    yarn add @micro-zoe/micro-app
    

    2 、引入 micro-app

    // index.js
    import microApp from '@micro-zoe/micro-app'
    
    microApp.start()
    

    3 、在页面中使用

    <template>
      <div id="app">
        <!--micro-app 标签最终会渲染为一个微前端应用-->
        <micro-app name='app1' url='http://localhost:3000/'></micro-app>
      </div>
    </template>
    

    渲染效果

    可以看出 micro-app 的使用方式和 iframe 一样简单,渲染后的 html 结构和 WebComponent 类似,那为什么不直接使用 WebComponent 呢?

    主要是因为 WebComponent 的核心 API-ShadowDom 的兼容性太差,在 react 框架下无法正常运行。ShadowDom 主要提供两种功能:样式隔离和元素隔离,即子应用和基座应用可以拥有相同的 class 、id 而不会相互影响。

    micro-app 模拟实现了 ShadowDom 的功能,使得子应用的样式和元素作用域固定在micro-app元素内部,micro-app元素就拥有了类似 ShadowDom 的能力。

    细心的童鞋看到这里就会发现了,你这明明是三行代码,和标题不符,你这个标题党!

    是的😂。微前端的使用场景非常复杂,如果子应用只有一个页面,只需要插入 micro-app 标签即可渲染,如果子应用是多页面应用,还需要修改路由配置。但修改路由配置非常简单,只需几行代码即可搞定,详情请参考这里。即便你从未接触过微前端,也可以在一个小时内搞定所有事情。

    数据通信

    除了微前端的渲染,数据通信是最麻烦的事情,所幸 micro-app 的数据通信非常简单,其传递方式和组件属性类似。

    <template>
      <div id="app">
        <!--data 数据每次更新时都会发送给子应用-->
        <micro-app name='app1' url='http://localhost:3000/' :data='mydata'></micro-app>
      </div>
    </template>
    
    <script>
    export default {
      data() {
        return {
          mydata: {
            type: '发送给子应用的数据'
          },
        }
      },
     }
    </script>
    

    子应用通过事件绑定获取数据

    // 子应用
    window.microApp?.addDataListener((data) => {
      console.log("来自基座应用的数据", data)
    })
    

    总结

    micro-app 的使用方式和 iframe 一样简单,但却规避了 iframe 存在的问题。除了这些,micro-app 还提供了丰富的功能,可以满足任何业务需求,同时可以适用于任何框架。

    有兴趣的童鞋快来尝试吧!

    相关地址

    micro-app 代码地址: https://github.com/micro-zoe/micro-app

    1 条回复    2021-08-01 20:03:00 +08:00
    felixin
        1
    felixin  
       2021-08-01 20:03:00 +08:00 via Android
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2901 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:12 · PVG 20:12 · LAX 04:12 · JFK 07:12
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.