Vue 微前端&微服務解決方案， Genesis 對遠程組件進一步的設計和思考
對遠程組件進一步的設計和思考
遠程組件，是 Genesis 提出的一個概念，它是指通過接口，調用一個另一個服務的組件，它可以是一個按鈕、一個模塊或者一個頁面。
嵌入式調用
除了嵌入圖片、視頻之類的，在日常開發，嵌入調用最多的還是 iframe。
而遠程組件，可以讓你在服務端、客戶端都能無縫的嵌入另外一個服務的頁面。
如下圖：
它的使用方式是這樣子
<template>
<remote-view :id="1000" @myEvent="onMyEvent" :fetch="fetch" /> </template> <script> export default { methods: { fetch () { // 調用其它服務的組件 const res = await axios.get('/api/ssr-服務名稱/render?url=/demo'); if (res.status === 200) { return res.data; } return null }, onMyEvent () { // 處理遠程組件的事件 } } } </script> 復制代碼API 形式調用
假設你有這樣的一個彈框
如下圖：
這個彈窗只有兩種狀態，要么取消、要么確定，操作完成。那么它可以設計成類似於下面的 API
const res = await Popup.show(options); switch (res) { case 'cancel': // 用戶點擊[取消]的時候做些什么 break; case 'confirm': // 用戶點擊[確定]的時候做些什么 break; } 復制代碼看到上面，是不是很像我們的接口調用的方式，只不過這次調的不是接口，而是一個 UI 組件。
而遠程組件，就可以為我們將這樣的 UI 組件，抽象出一個真正類似於接口的組件，所以它的調用可能是下面這樣子的
const res = await remote.get('/api/ssr-服務名稱/render?url=/popup'); switch (res) { case 'cancel': // 用戶點擊[取消]的時候做些什么 break; case 'confirm': // 用戶點擊[確定]的時候做些什么 break; } 復制代碼微服務
其實 Genesis 最核心的能力在於它可以真正的實現前端版本的微服務架構，獨立部署、獨立運行、服務和服務之間的調用，通過 API 的形式通信，它將大大的提升了前端的創造力。而微前端的概念，只是它順便支持的功能而已。
為什么需要它？
隨着前端 SPA 應用的發展，項目越來越大，我們需要極其靈活的服務拆分方案，利用分治的思想，將一個大的應用，不斷的拆解成一個小的應用，通過接口的形式，可以讓我們的應用拆分做得更加的靈活。