hello, 大家好, 我是徐小夕, 之前一直在研究可視化零代碼相關(guān)產(chǎn)品的技術(shù)落地, 也分享了很多可視化低代碼的 技術(shù)實踐, 今天和大家繼續(xù)分享一下低代碼平臺中組件通信的一些技術(shù)方案和實現(xiàn).

背景

聊到低代碼或零代碼大家也許并不陌生, 國內(nèi)外有很多優(yōu)秀的低代碼或零代碼產(chǎn)品, 可以幫助我們更低成本的搭建頁面或者應(yīng)用. 從完整的業(yè)務(wù)搭建流程上看, 低代碼的頁面搭建能力需要具備如下3點:

image.png

靜態(tài)頁面設(shè)計能力 和 組件交互能力 我之前也做過很多分享和開源, 感興趣的大家可以參考一下:

• 低代碼開發(fā)平臺核心功能設(shè)計——組件自定義交互實現(xiàn)
• 基于自然流布局的可視化拖拽搭建平臺設(shè)計方案
• 用第三方拖拽庫快速擼一個可視化搭建平臺
• 輕松教你搞定組件的拖拽, 縮放, 多控制點伸縮和拖拽數(shù)據(jù)上報

接下來我們重點介紹 跨組件通信能力.

為什么要實現(xiàn)跨組件通信

傳統(tǒng)的可視化搭建平臺更多的能力在于設(shè)計層, 我們使用它可以很好地搭建出靜態(tài)頁面, 比如易企秀, 早期的Dooring V1.0版本, 覆蓋的更多是宣傳頁, 電子相冊, 簡單的信息收集頁等:

image.png

為了讓可視化搭建平臺更多的滲透到業(yè)務(wù)層, 一定離不開以下兩點:

• 復(fù)雜的交互邏輯
• 與數(shù)據(jù)接口的打通

復(fù)雜的交互能力 意味著我們搭建的每個組件都不是孤立的個體, 而是可以相互影響聯(lián)動的, 更多的還原真實開發(fā)的體驗(比如 vue 開發(fā)中通過 vuex 來實現(xiàn)組件間數(shù)據(jù)互通與交互, react 中的redux 或者 mobx 等實現(xiàn)跨組件的數(shù)據(jù)傳遞和互通).

image.png

和數(shù)據(jù)接口的打通 意味著我們要在組件搭建層讓用戶配置自定義的api接口和數(shù)據(jù)自定義的能力, 那么基于這樣的背景, 我們就可以設(shè)計標(biāo)準(zhǔn)的 數(shù)據(jù)源 來解決. 有關(guān)數(shù)據(jù)源的一些實現(xiàn)方案我也在之前的文章中分享過, 感興趣的可以參考一下:

• (低代碼)可視化搭建平臺數(shù)據(jù)源設(shè)計剖析

所以目前主流低代碼或者側(cè)重業(yè)務(wù)層面的零代碼平臺一定會滿足以上兩個痛點, 這樣才能讓平臺更大程度的覆蓋業(yè)務(wù)場景, 實現(xiàn)降本增效的目標(biāo).

接下來我會分享一下如何基于數(shù)據(jù)源, 來實現(xiàn)跨組件通信.

效果演示

我們以常用的搜索功能來演示跨組件通信.

首先我們在搭建平臺拖拽1個搜索組件和一個商品組件:

2023-12-14 13.15.18.gif

然后將商品組件和搜索組件關(guān)聯(lián), 最后保存頁面訪問:

2023-12-14 13.18.25.gif

以上演示可以看到, 搜索組件可以將商品組件的內(nèi)容搜索出來, 進(jìn)而實現(xiàn)了組件聯(lián)動.

實現(xiàn)方案

image.png

我之前也分享了幾種常用的組件通信方案, 如下:

1. props/$emit
2. 子組件向父組件傳值
3. eventBus($emit/$on)
4. vuex / redux
5. $attrs/$listeners
6. provide/inject

具體的實現(xiàn)方式我在 低代碼平臺組件間通信方案復(fù)盤 有詳細(xì)的介紹, 這里和大家分享一下我最近設(shè)計的一種組件間通信的方案 —— 自定義事件通信.

沒錯, 我們用的就是 CustomEvent.

事件本質(zhì)上是一種通信方式，一種消息機(jī)制，我們在遇到多對象多模塊場景時，使用事件進(jìn)行通信是一種非常有效的方式。在多模塊化開發(fā)時，可以使用自定義事件進(jìn)行模塊間通信。

image.png

我們使用自定義事件也很簡單, 就像我上面畫的圖一樣, 我們只需要具備3個條件:

• 事件創(chuàng)建者
• 事件監(jiān)聽者
• 事件派發(fā)者

接下來我們用MDN的案例來說明如何使用它:

const form = document.querySelector("form");const textarea = document.querySelector("textarea");// 創(chuàng)建一個新事件，允許冒泡，并提供要傳遞給“detail”屬性的任何數(shù)據(jù)const eventAwesome = new CustomEvent("awesome", { bubbles: true, detail: { text: () => textarea.value },});// 表單（form）元素監(jiān)聽自定義的“awesome”事件，然后在控制臺打印傳遞的 text() 方法的輸出form.addEventListener("awesome", (e) => console.log(e.detail.text()));// 當(dāng)用戶輸入時，表單中的文本區(qū)域會分派/觸發(fā)事件，并以自身為事件的起點textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));

以上就實現(xiàn)了一下自定義事件的監(jiān)聽和派發(fā), 我們可以讓不同的元素監(jiān)聽同一個事件, 并進(jìn)行不同的邏輯處理.

同時它的兼容性也非常好, 主流瀏覽器都支持:

image.png

有了以上基礎(chǔ), 我們接下來來實現(xiàn)一下在低代碼中基于事件的組件通信模式.

基于數(shù)據(jù)源驅(qū)動的跨組件通信

上面介紹了跨組件通信, 但是我們?yōu)榱俗寴I(yè)務(wù)層能更好的接入低代碼或者零代碼, 我們需要設(shè)計統(tǒng)一的數(shù)據(jù)源規(guī)范.

image.png

對于數(shù)據(jù)源的設(shè)計, 根據(jù)實際的業(yè)務(wù)需求, 我們可以分為靜態(tài)數(shù)據(jù)源和動態(tài)數(shù)據(jù)源. 靜態(tài)數(shù)據(jù)源是用戶可以通過可視化的方式在低代碼平臺上創(chuàng)建的, 比如編輯數(shù)據(jù)表格等.

動態(tài)數(shù)據(jù)源是指用戶可以自定義的請求第三方的數(shù)據(jù)服務(wù), 組件消費數(shù)據(jù)源完全是動態(tài)調(diào)用的, 類似于我們傳統(tǒng)開發(fā)時使用的ajax請求.

image.png

當(dāng)然為了保持普適性和接入的規(guī)范性, 我們需要提前約定數(shù)據(jù)源的字段和字段格式, 這樣不同企業(yè)的業(yè)務(wù)數(shù)據(jù)都可以通過適配器來被通用的低代碼組件消費. 這里分享一下 Dooring 的零代碼創(chuàng)建數(shù)據(jù)源的模式:

image.png

數(shù)據(jù)源其實就是用戶的一個通過可視化的方式來創(chuàng)建管理的數(shù)據(jù)庫, 我們可以靜態(tài)的錄入數(shù)據(jù), 也可以動態(tài)的通過接口獲取數(shù)據(jù):

image.png

image.png

然后我們在組件配置面板中就可以一鍵綁定數(shù)據(jù)源了:

image.png

接下來我們來實現(xiàn)組件通信的部分, 效果如下圖:

2023-12-14 13.18.25.gif

首先在搜索組件中創(chuàng)建事件并派發(fā):

const handleSearch = () => { if(targetId) { document.dispatchEvent(new CustomEvent(`search_${targetId}`, { detail: textRef.current.value })) } }

為了保持事件被監(jiān)聽的對象可控, 我們需要通過組件id來明確指定組件的監(jiān)聽目標(biāo), 所有事件名可以用目標(biāo)id 業(yè)務(wù)詞來組成.

接下來我們可以在商品組件來設(shè)計統(tǒng)一的監(jiān)聽:

useEffect(() => { const eventName = `search_${id}`; function handleDataChange(event: any) { // 將數(shù)據(jù)傳遞給業(yè)務(wù)函數(shù) handleSearch(event.detail); } document.addEventListener(eventName, handleDataChange) return () => document.removeEventListener(eventName, handleDataChange) }, [])

這樣我們就能將 搜索組件的值通過 event.detail 方式傳遞給商品組件, 并在搜索按鈕中觸發(fā)事件的執(zhí)行, 從而影響商品組件的業(yè)務(wù)函數(shù)的執(zhí)行.

當(dāng)然這只是一個簡單的案例, 我們還可以利用這樣的機(jī)制設(shè)計更復(fù)雜的通信, 比如事件隊列, 讓一個組件依次執(zhí)行一系列的事件邏輯.

image.png

好啦,今天的內(nèi)容就分享到這, 后續(xù)還會持續(xù)分享低代碼零代碼的最佳實踐和技術(shù)復(fù)盤, 如果你也對它感興趣, 歡迎隨時交流溝通. 也可以關(guān)注 《低代碼可視化》, 獲取更多低代碼零代碼干貨.

更多推薦

• 用第三方拖拽庫快速擼一個可視化搭建平臺
• 前端工作7年了, 談?wù)劰ぷ?amp;開源&創(chuàng)業(yè)
• Dooring無代碼搭建平臺技術(shù)演進(jìn)之路