上一篇文章我們講述了 EasyMABuilder 中的自定義模板，它是對(duì)構(gòu)件組合的封裝，和構(gòu)件一樣是組織 UI 界面結(jié)構(gòu)的可復(fù)用單元。

而在低代碼平臺(tái)中，除了組織基本的 UI 界面結(jié)構(gòu)外，還有一項(xiàng)重要的工作是維護(hù)和管理數(shù)據(jù)，特別是來(lái)自遠(yuǎn)端的異步數(shù)據(jù)、或者動(dòng)態(tài)變更的狀態(tài)數(shù)據(jù)。

對(duì)此，EasyMABuilder 提供了 Context 和 State 兩種數(shù)據(jù)管理方式。

(相關(guān)資料圖)

01Context

Context 在 EasyMABuilder 中用于管理全局的狀態(tài)數(shù)據(jù)，在一個(gè)路由頁(yè)面的生命周期中有效，其數(shù)據(jù)的初始化可以來(lái)自異步的遠(yuǎn)端請(qǐng)求的結(jié)果，也可以是靜態(tài)聲明的，這些數(shù)據(jù)可以在構(gòu)件的屬性或事件中引用，另一方面，它的值可以在頁(yè)面的交互過(guò)程中按需動(dòng)態(tài)更新，同時(shí)引用了相關(guān)數(shù)據(jù)的構(gòu)件的屬性也可以實(shí)時(shí)地獲得更新。

例如，假設(shè)我們的頁(yè)面需要一個(gè)顯示主機(jī)列表的表格，該數(shù)據(jù)來(lái)自 CMDB 中的主機(jī)模型，我們可以在頁(yè)面中聲明一個(gè) Context 數(shù)據(jù)：

然后在該頁(yè)面的構(gòu)件中就可以通過(guò)表達(dá)式來(lái)引用這些數(shù)據(jù)，例如賦值給表格的數(shù)據(jù)源屬性：

另一方面，該狀態(tài)數(shù)據(jù)可以在界面的交互過(guò)程中按需更新，例如通過(guò)某個(gè)特定事件來(lái)更改其狀態(tài)數(shù)據(jù)。假設(shè)我們頁(yè)面中有一個(gè)按鈕，點(diǎn)擊它將保存當(dāng)前表單中的數(shù)據(jù)，同時(shí)我們希望點(diǎn)擊它后立即禁用它，以防止連續(xù)點(diǎn)擊發(fā)生，并在請(qǐng)求完成后恢復(fù)按鈕狀態(tài)。我們可以先定義一個(gè) saving 的狀態(tài)數(shù)據(jù)，并賦值給按鈕的 disabled 屬性：

注意我們使用了逗號(hào)表達(dá)式并前置了字符串 "track context"，它提示系統(tǒng)在相關(guān)數(shù)據(jù)變更時(shí)自動(dòng)同步該屬性。

接著，我們?yōu)榘粹o添加一個(gè)點(diǎn)擊事件，并使用 context.replace 的動(dòng)作，將 CTX.saving 更新為 true：

最后在請(qǐng)求完成的事件中設(shè)置回調(diào)動(dòng)作，將 CTX.saving 重新設(shè)置為 false。

這樣在我們的頁(yè)面中，點(diǎn)擊該按鈕后，系統(tǒng)就會(huì)自動(dòng)禁用它，直到請(qǐng)求完成再將按鈕狀態(tài)恢復(fù)。

除了上述基本的能力外，Context 還支持對(duì)請(qǐng)求返回的數(shù)據(jù)進(jìn)行轉(zhuǎn)換、請(qǐng)求的參數(shù)來(lái)自其他的 Context 等等。

02State

State 的能力和 Context 幾乎完全一致，不同的是，Context 的作用域是整個(gè)頁(yè)面、是全局的，而上一篇文章我們講到了自定義模板，同一個(gè)模板在頁(yè)面中可能有多個(gè)實(shí)例，如果直接使用 Context，則多個(gè)實(shí)例間的數(shù)據(jù)會(huì)互相影響，另外，使用全局的 Context 也會(huì)破壞模板的封裝，削弱應(yīng)用的可維護(hù)性，并帶來(lái)潛在的問(wèn)題。

因此 State 正是為了解決這個(gè)問(wèn)題，它用于管理自定義模板內(nèi)的數(shù)據(jù)，其作用域是模板的實(shí)例，多個(gè)模板實(shí)例之間的數(shù)據(jù)互相隔離，同時(shí)，在能力上完全與 Context 對(duì)等。State 與 Context 的區(qū)別有點(diǎn)像 JavaScript 中的 let/const 與 var。

上文中我們多次使用了「表達(dá)式」，和無(wú)代碼平臺(tái)不同，低代碼平臺(tái)為了能解決更豐富的應(yīng)用場(chǎng)景、滿足更個(gè)性化的需求，仍然離不開代碼的編寫，包括簡(jiǎn)單的邏輯計(jì)算和數(shù)據(jù)加工處理，而對(duì)于高階開發(fā)者搭建更復(fù)雜的應(yīng)用時(shí)，甚至需要不遜色于專業(yè)代碼的開發(fā)體驗(yàn)，對(duì)此 EasyMABuilder 提供了對(duì)應(yīng)的代碼開發(fā)能力。