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

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

嵌入式調(diào)用

除了嵌入圖片、視頻之類的，在日常開發(fā)，嵌入調(diào)用最多的還是 iframe。
而遠(yuǎn)程組件，可以讓你在服務(wù)端、客戶端都能無縫的嵌入另外一個(gè)服務(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è)你有這樣的一個(gè)彈框
如下圖：

image

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

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

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

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

微服務(wù)

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

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

最后

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

傳輸門

• 文章來源