关于前端:一行代码实现微前端

看到题目，大家首先想到的应该是 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/…