天天看點

優維低代碼實踐:Context / State

作者:優維科技
優維低代碼實踐:Context / State
優維低代碼實踐:Context / State

優維低代碼技術專欄,是一個全新的、技術為主的專欄,由優維技術委員會成員執筆,基于優維7年低代碼技術研發及運維成果,主要介紹低代碼相關的技術原理及架構邏輯,目的是給廣大運維人提供一個技術交流與學習的平台。

優維低代碼實踐連載第12期

《Context / State》

在開發中有一項重要的工作是維護和管理我們的資料,比如頁面需要擷取遠端的資料進行渲染或者聲明變量,然後動态更新資料等,這些都需要我們能提供一套聲明和消費資料的機制。對此,我們平台提供了 Context 和 State 兩種資料的管理方式。

Context 為全局的狀态資料,在一個路由的頁面周期中都有效,作用域為整個路由範圍内,相當于我們的全局變量;而 State 是局部的狀态資料,相當于我們的局部變量,其隻應用于模闆的内部。同時引用的這些狀态資料還能支援實時更新的能力,這對于我們編排來說可謂是如虎添翼。

Context

context 通常聲明在某一個路由下,表示在該路由下可使用的變量,我們來看一下 context 具體使用方式。

1.1 context 定義

優維低代碼實踐:Context / State
優維低代碼實踐:Context / State
優維低代碼實踐:Context / State

上述圖中,我們發現 context 還有一些配置項,分别是 if,onchange,track,和 provider 相關的 transform 和 onReject,我們接下來詳細說明下該配置項的用途。

1.2 配置詳解

Context 級别的配置,我們以 yaml 的配置形式來介紹。

1.2.1 basic settings

if 條件配置

可以配置 if 來按條件決定是否執行對應的 Context

優維低代碼實踐:Context / State

onChange

有時候我們希望聲明一個 Context 變量,但不對它立即指派,而是通過特定事件觸發指派,并且希望能監聽其變更事件。

可以在聲明 Context 時定義 onChange, 然後在特定條件發生時再對其指派,當 Context 發生變化時,onChange 注冊的事件處理器将被調用。圖中的EVENT.detail為該 Context 的值,

優維低代碼實踐:Context / State

track

依賴追蹤,也就是說目前 contextA 下有依賴的其他的contextB,當 ContextB 變化後(通過 context.replace/context.refresh等), contextA 的值會重新計算。

優維低代碼實踐:Context / State
優維低代碼實踐:Context / State

1.2.2 Provider settings

transform/onReject

當 context 為 provider/contract 類型時,針對該請求的傳回可配置 transform, onReject 和 lazy 項,

transform 顧名思義是對傳回的接口做資料處理用,而 OnReject 則對請求報錯時額外做的特殊處理,正常情況我們一般不會配置 OnReject,因為系統會統一捕獲并顯示錯誤資訊。

優維低代碼實踐:Context / State

lazy

對于 provider 中的 lazy 項,我們稱之為懶加載。預設情況下,我們的請求都會在頁面加載前發起并會阻塞渲染,但有些資料并不着急需要,可能隻需在特定條件下發起請求即可(例如打開抽屜和彈窗)。這時,可以标記為 lazy: true 将它設定為懶加載,該資料将不會預設發送請求,需要在特定條件下主動觸發 context.load /context.refresh 來發起請求。

優維低代碼實踐:Context / State
優維低代碼實踐:Context / State

1.2.3 PATH

PATH 的配置項是給 context 分組用的,當一個路由管理的 context 很多時,為了友善管理和查找,我們可以給每一個 context 進行分類,這樣同一類下的 context 會放在同一目錄下展示。

優維低代碼實踐:Context / State

1.3 context 使用

當我們定義好 context 後,就可以在編排中直接使用了,在使用時需要加上 CTX 的字首,同時我們使用 context 的地方也支援了 track context 的能力,隻要在表達式前面添加一句 "track context" 構件的屬性就能跟随 Context 變化而自動重新計算并指派。

優維低代碼實踐:Context / State

State

State 的能力和 Context 幾乎完全一緻,不同的是,Context 的作用域是整個頁面、是全局的,我們的自定義模闆,同一個模闆在頁面中可能有多個執行個體,如果直接使用 Context,則多個執行個體間的資料會互相影響。另外,使用全局的 Context 也會破壞模闆的封裝,削弱應用的可維護性,并帶來潛在的問題。

是以 State 正是為了解決這個問題,它用于管理自定義模闆内的資料,其作用域是模闆的執行個體,多個模闆執行個體之間的資料互相隔離。同時,在能力上完全與 Context 對等。

優維低代碼實踐:Context / State

State 的定義也和 Context 一緻,它隻能在模闆的頁面中使用,與 Context 不同的是 State 有屬于自己的狀态更新的 action,它與 context 一一對應。

繼續閱讀