優(yōu)維科技前端低代碼平臺EasyMABuilder的架構(gòu)如下圖:

架構(gòu)主要包含以下三個基礎(chǔ)部分

# 微應(yīng)用:即Web應(yīng)用程序,由多個路由頁面組成,每個頁面由構(gòu)件組裝而來,構(gòu)件如何組裝定義在Storyboard中。Storyboard是結(jié)構(gòu)化數(shù)據(jù),可以通過可視化工具編排出來,也可以直接用YAML或JSON配置。

# 構(gòu)件:和前端開發(fā)者常說的「組件」類似,主要用于在頁面上渲染特定的UI內(nèi)容。開發(fā)者可以很容易通過聲明的方式使用構(gòu)件,無需編程。

# EasyMABuilder Core:負責解析微應(yīng)用的Storyboard,按照其定義加載路由并裝載相應(yīng)的構(gòu)件,完成頁面的渲染。

整個架構(gòu)和樂高很像,用一塊塊積木按特定的方式組合在一起,就可以拼搭出各式各樣的東西出來。

EasyMABuilder的基石就是這些積木—構(gòu)件,正是一個個構(gòu)件的組合搭建起了最終的應(yīng)用。

我們已經(jīng)提供了數(shù)百個開箱即用的構(gòu)件,包括功能完整的UI構(gòu)件、特定業(yè)務(wù)屬性的業(yè)務(wù)構(gòu)件。同時開發(fā)者也可以開發(fā)自己的構(gòu)件,以滿足更加個性化的場景。

構(gòu)件主要包含以下四大要素

# 屬性:構(gòu)件的屬性通常用于對該構(gòu)件進行基本的參數(shù)設(shè)置。

例如對于一個按鈕構(gòu)件,它可能會對外提供:按鈕的文字內(nèi)容、文字顏色等屬性,這樣應(yīng)用在編排時可以按需設(shè)置屬性,以實現(xiàn)不同的UI效果:

構(gòu)件的屬性可以是任意類型的數(shù)據(jù),包括字符串、數(shù)字、布爾值、對象、數(shù)組等。

# 事件:構(gòu)件可以在特定的用戶交互等行為發(fā)生時觸發(fā)特定的事件。

例如對于一個表單構(gòu)件,如果用戶點擊其中的提交按鈕時,會發(fā)起一個表單提交的事件,并同時提供已填寫的表單數(shù)據(jù),那么開發(fā)者就可以按需配置提交后的動作:

平臺提供了多種形式的事件處理方式,包括頁面跳轉(zhuǎn)、更新構(gòu)件屬性或調(diào)用構(gòu)件方法、發(fā)起遠端請求、打印日志等等。

# 方法:構(gòu)件可以對外提供特定的方法,以供別的地方按需調(diào)用。例如對于一個對話框構(gòu)件,它會提供一個「打開對話框」的方法,可以在用戶點擊按鈕時調(diào)用:

注意:構(gòu)件的方法可以接收任意的參數(shù)。

# 插槽:構(gòu)件通過插槽可以讓其他構(gòu)件能以特定的方式容納在該構(gòu)件之內(nèi)。

例如表單構(gòu)件可以提供一個插槽,允許其他的構(gòu)件例如文本框、單選框等插入到表單中,同時表單構(gòu)件還可以統(tǒng)一管理這些輸入項的數(shù)據(jù):

插槽實際上定義了父子構(gòu)件的關(guān)系,通過層層的構(gòu)件組成一棵構(gòu)件樹,最終渲染成完整的頁面。

這些要素使得各個構(gòu)件可以靈活地適應(yīng)不同的應(yīng)用場景,開發(fā)者可以通過這些構(gòu)件的組合編排出一個完整的微應(yīng)用。

屬性、事件、構(gòu)件樹,這些概念對于有了解HTML的同學會覺得有些熟悉:HTML元素的屬性和事件、由這些元素組成的DOM樹。

關(guān)于優(yōu)維低代碼>>

低代碼是優(yōu)維科技長期深耕的技術(shù)板塊,在漫長的創(chuàng)業(yè)周期中,我們通過不斷實踐積累和迭代優(yōu)化,沉淀出EasyMABuilder前端低代碼平臺,迄今已成功賦能大量優(yōu)質(zhì)用戶,為多個行業(yè)帶來前所未有的輕盈體驗。

EasyMABuilder成功的背后,是優(yōu)維人數(shù)年的技術(shù)探索和EasyOps產(chǎn)品哲學的落地,蘊含了主創(chuàng)團隊對低代碼生態(tài)的深度思考和實踐創(chuàng)新。

我們特別推出低代碼專題撰稿計劃,以專欄系列文章的形式解構(gòu)低代碼在DevOps領(lǐng)域的技術(shù)表現(xiàn)。