一行代碼實現微前端

本文轉載自查看原文 2021-08-01 19:31 307 前端框架/ 前端

看到標題，大家首先想到的應該是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還提供了豐富的功能，可以滿足任何業務需求，同時可以適用於任何框架。

有興趣的童鞋快來嘗試吧！