一行程式碼實現微前端

cangdu發表於2021-08-01

看到標題，大家首先想到的應該是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是什麼

如何使用？

資料通訊

總結

相關地址

相關文章