【技術(shù)實(shí)現(xiàn)步驟摘要】
本申請(qǐng)涉及計(jì)算機(jī)，尤其涉及一種ui模塊化調(diào)配系統(tǒng)及其搭建方法。
技術(shù)介紹
1、現(xiàn)有技術(shù)中，系統(tǒng)用戶界面(user?interface，ui)是指對(duì)軟件的人機(jī)交互、操作邏輯、界面美觀的整體設(shè)計(jì)。用戶界面是系統(tǒng)和用戶之間進(jìn)行交互和信息交換的媒介，它實(shí)現(xiàn)信息的內(nèi)部形式與人類可以接受形式之間的轉(zhuǎn)換；用戶界面是介于用戶與硬件而設(shè)計(jì)的彼此之間交互溝通的相關(guān)軟件，目的在于使用戶能夠方便有效率地去操作硬件以達(dá)成雙向之交互，完成所希望借助硬件完成之工作，用戶界面定義廣泛，包含了人機(jī)交互與圖形用戶接口，凡參與人類與機(jī)械的信息交流的領(lǐng)域都存在著用戶界面。好的ui設(shè)計(jì)不僅是讓軟件變得有個(gè)性有品味，還要讓軟件的操作變得舒適、簡(jiǎn)單、自由、充分體現(xiàn)軟件的定位和特點(diǎn)。目前對(duì)于用戶界面的開發(fā)效率差，用戶界面構(gòu)建不夠靈活，使得項(xiàng)目的開發(fā)速度和交付質(zhì)量低下。
技術(shù)實(shí)現(xiàn)思路
1、本申請(qǐng)的一個(gè)目的是提供一種ui模塊化調(diào)配系統(tǒng)及其搭建方法，通過選擇和配置預(yù)先定義的模塊來進(jìn)行自動(dòng)布局和響應(yīng)式設(shè)計(jì)，從而渲染出與實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的實(shí)際的ui界面，不僅能夠提高開發(fā)效率，還使得開發(fā)者能夠更加高效、靈活地構(gòu)建用戶界面，加快了項(xiàng)目的開發(fā)速度和交付質(zhì)量，從而有效地提高ui模塊化調(diào)配系統(tǒng)的開發(fā)效率。
2、根據(jù)本申請(qǐng)的一個(gè)方面，提供了一種ui模塊化調(diào)配系統(tǒng)，其中，該系統(tǒng)包括：模塊配置器、模塊渲染引擎、數(shù)據(jù)綁定和事件處理單元、狀態(tài)管理單元、性能優(yōu)化和監(jiān)控單元，其中，
3、所述模塊配置器用于允許開發(fā)者選擇和配置模塊并進(jìn)行自動(dòng)
4、所述模塊渲染引擎用于將配置的模塊渲染成實(shí)際的ui界面；
5、所述數(shù)據(jù)綁定和事件處理單元用于將配置的模塊的屬性綁定到實(shí)際應(yīng)用場(chǎng)景的數(shù)據(jù)源上，還負(fù)責(zé)處理用戶在實(shí)際的ui界面上產(chǎn)生的交互事件，并將所述交互事件傳遞給相應(yīng)的模塊或組件來處理；
6、所述狀態(tài)管理單元用于管理該系統(tǒng)的全局狀態(tài)和配置的模塊之間的狀態(tài)的交互，并負(fù)責(zé)不同的模塊之間的數(shù)據(jù)交互和通信；
7、性能優(yōu)化和監(jiān)控單元用于該系統(tǒng)的代碼拆分、懶加載及緩存，并負(fù)責(zé)收集和分析該系統(tǒng)的運(yùn)行數(shù)據(jù)。
8、進(jìn)一步地，上述系統(tǒng)中，所述模塊配置器用于：
9、通過提供的可視化的界面，允許開發(fā)者選擇、調(diào)整模塊的大小和位置并修改配置的模塊的屬性，并對(duì)配置的模塊在不同的設(shè)計(jì)和屏幕尺寸上進(jìn)行自動(dòng)布局和響應(yīng)式設(shè)計(jì)。
10、進(jìn)一步地，上述系統(tǒng)中，所述模塊渲染引擎用于：
11、分析配置的模塊的配置信息，并將所述配置信息轉(zhuǎn)換成實(shí)際的html、css和javascript代碼，加載并渲染所述實(shí)際的html、css和javascript代碼以形成實(shí)際的ui界面。
12、進(jìn)一步地，上述系統(tǒng)中，所述狀態(tài)管理單元用于：
13、通過狀態(tài)管理庫管理該系統(tǒng)的全局狀態(tài)和配置的模塊之間的狀態(tài)的交互，以確保該系統(tǒng)和配置的模塊的狀態(tài)的一致性和可預(yù)測(cè)性；
14、協(xié)調(diào)不同的模塊之間的數(shù)據(jù)交互和通信，以確保模塊間的協(xié)同工作。
15、進(jìn)一步地，上述系統(tǒng)中，該系統(tǒng)還包括：
16、模塊庫，用于集中存儲(chǔ)和管理所有的模塊的庫，每個(gè)模塊相互獨(dú)立且可復(fù)用，每個(gè)模塊包括至少一個(gè)ui組件，該ui組件為預(yù)設(shè)的標(biāo)準(zhǔn)組件或根據(jù)業(yè)務(wù)場(chǎng)景而定制的場(chǎng)景組件；
17、代碼復(fù)用單元，用于將不同的ui組件劃分為獨(dú)立的模塊，每個(gè)模塊負(fù)責(zé)處理相應(yīng)的用戶界面元素或交互邏輯，以使開發(fā)者在不同的項(xiàng)目、頁面或功能中重復(fù)使用該模塊；
18、構(gòu)建單元，用于根據(jù)實(shí)際應(yīng)用場(chǎng)景調(diào)配一個(gè)或多個(gè)模塊來構(gòu)建與所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的用戶界面；
19、維護(hù)單元，用于在出現(xiàn)問題或待修改模塊的功能時(shí)，定位到對(duì)應(yīng)的問題模塊或待修改模塊進(jìn)行修復(fù)。
20、根據(jù)本申請(qǐng)的另一個(gè)方面，還提供了一種ui模塊化調(diào)配系統(tǒng)的搭建方法，其中，該方法包括：
21、將實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的ui界面拆分為至少一個(gè)模塊，各模塊用于處理各自對(duì)應(yīng)的單一功能；根據(jù)所述實(shí)際應(yīng)用場(chǎng)景創(chuàng)建可復(fù)用的至少一個(gè)原子組件及其任意組合形成的組合組件，以構(gòu)成所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的組件庫，其中，每個(gè)模塊由一個(gè)或多個(gè)組件組成；
22、對(duì)所述組件庫內(nèi)的組件的狀態(tài)進(jìn)行管理、組件間的數(shù)據(jù)進(jìn)行傳遞并通過事件處理組件間的交互與通信；
23、將所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的源代碼拆分為各模塊對(duì)應(yīng)的子代碼，并對(duì)非關(guān)鍵性的模塊或組件使用懶加載來進(jìn)行延遲加載；
24、調(diào)用前端框架來支持所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的各模塊及組件庫的開發(fā)和搭建；
25、對(duì)所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的各模塊進(jìn)行打包和優(yōu)化，并持續(xù)集成或部署各模塊對(duì)應(yīng)的子代碼；
26、對(duì)所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的各模塊和各組件分別進(jìn)行單元測(cè)試、集成測(cè)試和審核測(cè)試，以形成所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的ui模塊化調(diào)配系統(tǒng)。
27、進(jìn)一步地，上述方法中，所述對(duì)所述組件庫內(nèi)的組件的狀態(tài)進(jìn)行管理、組件間的數(shù)據(jù)進(jìn)行傳遞并通過事件處理組件間的交互與通信，包括：
28、使用狀態(tài)管理工具redux或vuex來對(duì)所述組件庫內(nèi)的各組件的狀態(tài)進(jìn)行管理；
29、通過組件的屬性，將數(shù)據(jù)從組件庫中的父組件傳遞至對(duì)應(yīng)的子組件；
30、通過事件處理組件間的交互與通信。
31、進(jìn)一步地，上述方法中，所述前端框架包括react前端框架、vue前端框架和angular前端框架。
32、進(jìn)一步地，上述方法中，所述對(duì)所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的各模塊和各組件分別進(jìn)行單元測(cè)試、集成測(cè)試和審核測(cè)試，以形成所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的ui模塊化調(diào)配系統(tǒng)，包括：
33、對(duì)所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的各模塊和各組件分別進(jìn)行單元測(cè)試；
34、對(duì)所述實(shí)際應(yīng)用場(chǎng)景的整個(gè)系統(tǒng)進(jìn)行集成測(cè)試，以確保各模塊之間的協(xié)同工作；
35、對(duì)所述實(shí)際應(yīng)用場(chǎng)景的整個(gè)系統(tǒng)、各模塊和各組件進(jìn)行代碼審查，以形成所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的ui模塊化調(diào)配系統(tǒng)。
36、進(jìn)一步地，上述方法中，所述方法還包括：
37、對(duì)搭建形成的所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的ui模塊化調(diào)配系統(tǒng)進(jìn)行監(jiān)控和日志記錄；
38、基于監(jiān)控的結(jié)果和日志記錄持續(xù)優(yōu)化和迭代系統(tǒng)。
39、與現(xiàn)有技術(shù)相比，本申請(qǐng)?zhí)峁┑囊环Nui模塊化調(diào)配系統(tǒng)，其中，該系統(tǒng)包括：模塊配置器、模塊渲染引擎、數(shù)據(jù)綁定和事件處理單元、狀態(tài)管理單元、性能優(yōu)化和監(jiān)控單元，其中，所述模塊配置器用于允許開發(fā)者選擇和配置模塊并進(jìn)行自動(dòng)布局和響應(yīng)式設(shè)計(jì)；所述模塊渲染引擎用于將配置的模塊渲染成實(shí)際的ui界面；所述數(shù)據(jù)綁定和事件處理單元用于將配置的模塊的屬性綁定到實(shí)際應(yīng)用場(chǎng)景的數(shù)據(jù)源上，還負(fù)責(zé)處理用戶在實(shí)際的ui界面上產(chǎn)生的交互事件，并將所述交互事件傳遞給相應(yīng)的模塊或組件來處理；所述狀態(tài)管理單元用于管理該系統(tǒng)的全局狀態(tài)和配置的模塊之間的狀態(tài)的交互，并負(fù)責(zé)不同的模塊之間的數(shù)據(jù)交互和通信；性能優(yōu)化和監(jiān)控單元用于該系統(tǒng)的代碼拆分、本文檔來自技高網(wǎng)...
【技術(shù)保護(hù)點(diǎn)】
1.一種UI模塊化調(diào)配系統(tǒng)，其中，該系統(tǒng)包括：模塊配置器、模塊渲染引擎、數(shù)據(jù)綁定和事件處理單元、狀態(tài)管理單元、性能優(yōu)化和監(jiān)控單元，其中，
2.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，所述模塊配置器用于：
3.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，所述模塊渲染引擎用于：
4.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，所述狀態(tài)管理單元用于：
5.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，該系統(tǒng)還包括：
6.一種UI模塊化調(diào)配系統(tǒng)的搭建方法，其中，該方法包括：
7.根據(jù)權(quán)利要求6所述的方法，其中，所述對(duì)所述組件庫內(nèi)的組件的狀態(tài)進(jìn)行管理、組件間的數(shù)據(jù)進(jìn)行傳遞并通過事件處理組件間的交互與通信，包括：
8.根據(jù)權(quán)利要求6所述的方法，其中，所述前端框架包括React前端框架、Vue前端框架和Angular前端框架。
9.根據(jù)權(quán)利要求所述的方法，其中，所述對(duì)所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的各模塊和各組件分別進(jìn)行單元測(cè)試、集成測(cè)試和審核測(cè)試，以形成所述實(shí)際應(yīng)用場(chǎng)景對(duì)應(yīng)的UI模塊化調(diào)配系統(tǒng)，包括：
10.根據(jù)權(quán)利要求6所述的方法，其中，
...【技術(shù)特征摘要】
1.一種ui模塊化調(diào)配系統(tǒng)，其中，該系統(tǒng)包括：模塊配置器、模塊渲染引擎、數(shù)據(jù)綁定和事件處理單元、狀態(tài)管理單元、性能優(yōu)化和監(jiān)控單元，其中，
2.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，所述模塊配置器用于：
3.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，所述模塊渲染引擎用于：
4.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，所述狀態(tài)管理單元用于：
5.根據(jù)權(quán)利要求1所述的系統(tǒng)，其中，該系統(tǒng)還包括：
6.一種ui模塊化調(diào)配系統(tǒng)的搭建方法，其中，該方法包括：
7.根據(jù)...
【專利技術(shù)屬性】
技術(shù)研發(fā)人員：喬文智，韓先航，
申請(qǐng)(專利權(quán))人：蜜度科技股份有限公司，
類型：發(fā)明
國(guó)別省市：
還沒有人留言評(píng)論。發(fā)表了對(duì)其他瀏覽者有用的留言會(huì)獲得科技券。