基于數據源驅動的跨組件通信最佳實踐(低碼篇)
hello, 大家好, 我是徐小夕, 之前一直在研究可視化零代碼相關產品的技術落地, 也分享了很多可視化低代碼的 技術實踐, 今天和大家繼續分享一下低代碼平臺中組件通信的一些技術方案和實現.
背景
聊到低代碼或零代碼大家也許并不陌生, 國內外有很多優秀的低代碼或零代碼產品, 可以幫助我們更低成本的搭建頁面或者應用. 從完整的業務搭建流程上看, 低代碼的頁面搭建能力需要具備如下3點:
圖片
接下來我們重點介紹 跨組件通信能力.
為什么要實現跨組件通信
傳統的可視化搭建平臺更多的能力在于設計層, 我們使用它可以很好地搭建出靜態頁面, 比如易企秀, 早期的Dooring V1.0版本, 覆蓋的更多是宣傳頁, 電子相冊, 簡單的信息收集頁等:
圖片
image.png
為了讓可視化搭建平臺更多的滲透到業務層, 一定離不開以下兩點:
- 復雜的交互邏輯
- 與數據接口的打通
復雜的交互能力 意味著我們搭建的每個組件都不是孤立的個體, 而是可以相互影響聯動的, 更多的還原真實開發的體驗(比如 vue 開發中通過 vuex 來實現組件間數據互通與交互, react 中的redux 或者 mobx 等實現跨組件的數據傳遞和互通).
圖片
和數據接口的打通 意味著我們要在組件搭建層讓用戶配置自定義的api接口和數據自定義的能力, 那么基于這樣的背景, 我們就可以設計標準的 數據源 來解決. 有關數據源的一些實現方案我也在之前的文章中分享過, 感興趣的可以參考一下:
- (低代碼)可視化搭建平臺數據源設計剖析
所以目前主流低代碼或者側重業務層面的零代碼平臺一定會滿足以上兩個痛點, 這樣才能讓平臺更大程度的覆蓋業務場景, 實現降本增效的目標.
接下來我會分享一下如何基于數據源, 來實現跨組件通信.
效果演示
我們以常用的搜索功能來演示跨組件通信.
首先我們在搭建平臺拖拽1個搜索組件和一個商品組件:
圖片
2023-12-14 13.15.18.gif
然后將商品組件和搜索組件關聯, 最后保存頁面訪問:
圖片
以上演示可以看到, 搜索組件可以將商品組件的內容搜索出來, 進而實現了組件聯動.
實現方案
圖片
我之前也分享了幾種常用的組件通信方案, 如下:
- props/$emit
- 子組件向父組件傳值
- eventBus($emit/$on)
- vuex / redux
- $attrs/$listeners
- provide/inject
具體的實現方式我在 低代碼平臺組件間通信方案復盤 有詳細的介紹, 這里和大家分享一下我最近設計的一種組件間通信的方案 —— 自定義事件通信.
沒錯, 我們用的就是 CustomEvent.
事件本質上是一種通信方式，一種消息機制，我們在遇到多對象多模塊場景時，使用事件進行通信是一種非常有效的方式。在多模塊化開發時，可以使用自定義事件進行模塊間通信。
我們使用自定義事件也很簡單, 就像我上面畫的圖一樣, 我們只需要具備3個條件:
- 事件創建者
- 事件監聽者
- 事件派發者
接下來我們用MDN的案例來說明如何使用它:
const form = document.querySelector("form");
const textarea = document.querySelector("textarea");
// 創建一個新事件，允許冒泡，并提供要傳遞給“detail”屬性的任何數據
const eventAwesome = new CustomEvent("awesome", {
bubbles: true,
detail: { text: () => textarea.value },
});
// 表單（form）元素監聽自定義的“awesome”事件，然后在控制臺打印傳遞的 text() 方法的輸出
form.addEventListener("awesome", (e) => console.log(e.detail.text()));
// 當用戶輸入時，表單中的文本區域會分派/觸發事件，并以自身為事件的起點
textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome));以上就實現了一下自定義事件的監聽和派發, 我們可以讓不同的元素監聽同一個事件, 并進行不同的邏輯處理.
同時它的兼容性也非常好, 主流瀏覽器都支持:
image.png
有了以上基礎, 我們接下來來實現一下在低代碼中基于事件的組件通信模式.
基于數據源驅動的跨組件通信
上面介紹了跨組件通信, 但是我們為了讓業務層能更好的接入低代碼或者零代碼, 我們需要設計統一的數據源規范.
對于數據源的設計, 根據實際的業務需求, 我們可以分為靜態數據源和動態數據源. 靜態數據源是用戶可以通過可視化的方式在低代碼平臺上創建的, 比如編輯數據表格等.
動態數據源是指用戶可以自定義的請求第三方的數據服務, 組件消費數據源完全是動態調用的, 類似于我們傳統開發時使用的ajax請求.
圖片
當然為了保持普適性和接入的規范性, 我們需要提前約定數據源的字段和字段格式, 這樣不同企業的業務數據都可以通過適配器來被通用的低代碼組件消費. 這里分享一下 Dooring 的零代碼創建數據源的模式:
圖片
數據源其實就是用戶的一個通過可視化的方式來創建管理的數據庫, 我們可以靜態的錄入數據, 也可以動態的通過接口獲取數據:
圖片
圖片
然后我們在組件配置面板中就可以一鍵綁定數據源了:
圖片
接下來我們來實現組件通信的部分, 效果如下圖:
圖片
首先在搜索組件中創建事件并派發:
const handleSearch = () => {
if(targetId) {
document.dispatchEvent(new CustomEvent(`search_${targetId}`, { detail: textRef.current.value }))
}
}為了保持事件被監聽的對象可控, 我們需要通過組件id來明確指定組件的監聽目標, 所有事件名可以用目標id + 業務詞來組成.
接下來我們可以在商品組件來設計統一的監聽:
useEffect(() => {
const eventName = `search_${id}`;
function handleDataChange(event: any) {
// 將數據傳遞給業務函數
handleSearch(event.detail);
}
document.addEventListener(eventName, handleDataChange)
return () => document.removeEventListener(eventName, handleDataChange)
}, [])這樣我們就能將 搜索組件的值通過 event.detail 方式傳遞給商品組件, 并在搜索按鈕中觸發事件的執行, 從而影響商品組件的業務函數的執行.
當然這只是一個簡單的案例, 我們還可以利用這樣的機制設計更復雜的通信, 比如事件隊列, 讓一個組件依次執行一系列的事件邏輯.
圖片
