對遠(yuǎn)程組件進(jìn)一步的設(shè)計和思考

遠(yuǎn)程組件杉武，是 Genesis 提出的一個概念辙诞，它是指通過接口，調(diào)用一個另一個服務(wù)的組件轻抱，它可以是一個按鈕飞涂、一個模塊或者一個頁面。

嵌入式調(diào)用

除了嵌入圖片、視頻之類的较店，在日常開發(fā)士八，嵌入調(diào)用最多的還是 iframe。
而遠(yuǎn)程組件梁呈，可以讓你在服務(wù)端婚度、客戶端都能無縫的嵌入另外一個服務(wù)的頁面。
如下圖：

image

<template>
    <remote-view :id="1000" @myEvent="onMyEvent" :fetch="fetch" />
</template>
<script>
export default {
    methods: {
        fetch () {
            // 調(diào)用其它服務(wù)的組件
            const res = await axios.get('/api/ssr-服務(wù)名稱/render?url=/demo');
            if (res.status === 200) {
                return res.data;
            }
            return null
        },
        onMyEvent () {
            // 處理遠(yuǎn)程組件的事件
        }
    }
}
</script>

API 形式調(diào)用

假設(shè)你有這樣的一個彈框
如下圖：

image

const res = await Popup.show(options);
switch (res) {
    case 'cancel':
        // 用戶點擊[取消]的時候做些什么
        break;
    case 'confirm':
        // 用戶點擊[確定]的時候做些什么
        break;
}

看到上面哮翘，是不是很像我們的接口調(diào)用的方式，只不過這次調(diào)的不是接口仔涩，而是一個 UI 組件忍坷。

而遠(yuǎn)程組件，就可以為我們將這樣的 UI 組件熔脂，抽象出一個真正類似于接口的組件佩研，所以它的調(diào)用可能是下面這樣子的

const res = await remote.get('/api/ssr-服務(wù)名稱/render?url=/popup');
switch (res) {
    case 'cancel':
        // 用戶點擊[取消]的時候做些什么
        break;
    case 'confirm':
        // 用戶點擊[確定]的時候做些什么
        break;
}

微服務(wù)

其實 Genesis 最核心的能力在于它可以真正的實現(xiàn)前端版本的微服務(wù)架構(gòu)，獨(dú)立部署霞揉、獨(dú)立運(yùn)行旬薯、服務(wù)和服務(wù)之間的調(diào)用，通過 API 的形式通信适秩，它將大大的提升了前端的創(chuàng)造力绊序。而微前端的概念，只是它順便支持的功能而已秽荞。

為什么需要它骤公？
隨著前端 SPA 應(yīng)用的發(fā)展，項目越來越大扬跋，我們需要極其靈活的服務(wù)拆分方案阶捆，利用分治的思想，將一個大的應(yīng)用钦听，不斷的拆解成一個小的應(yīng)用洒试，通過接口的形式，可以讓我們的應(yīng)用拆分做得更加的靈活朴上。

最后

Genesis 已經(jīng)推廣了這么多次垒棋，但是絲毫沒有引起社區(qū)的關(guān)注，其實我倒是很樂意這個概念痪宰、這個設(shè)計的思想普及到叼架，能誕生出更多成熟的微服務(wù)架構(gòu)的解決方案畔裕。
個人的寫作能力有點差，如有疑問碉碉，歡迎在 issues 討論柴钻。
如果對本項目感興趣的話，歡迎 Star 基于 Vue SSR 的微前端垢粮、微服務(wù)贴届、輕量級的解決方案

傳輸門

• 文章來源