[發(fā)明專利]一種組件化樹形控件的處理方法

在審

• 申請(qǐng)?zhí)枺?/td>: 201911125999.1
• 申請(qǐng)日: 2019-11-18
• 公開（公告）號(hào): CN110955850A
• 公開（公告）日: 2020-04-03
• 發(fā)明（設(shè)計(jì)）人: 張躍聰;季統(tǒng)凱
• 申請(qǐng)（專利權(quán)）人: 國(guó)云科技股份有限公司
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957
• 代理公司: 廣東勤諾律師事務(wù)所 44595
• 代理人: 尚俊

本發(fā)明涉及WEB開發(fā)技術(shù)領(lǐng)域，特別涉及一種組件化樹形控件的處理方法。本發(fā)明的方法包括如下步驟：1，將獲取的數(shù)據(jù)整合為可遍歷、具有層級(jí)關(guān)系的數(shù)據(jù)結(jié)構(gòu)；然后，遍歷數(shù)據(jù)，在數(shù)據(jù)的每一層中加入狀態(tài)字段，并為其賦予默認(rèn)值；2，根據(jù)狀態(tài)構(gòu)建包含對(duì)應(yīng)所需HTML代碼或監(jiān)聽(tīng)事件的虛擬DOM對(duì)象；3，在子組件中寫入樹形控件的固定渲染部分的HTML代碼，在渲染樹形節(jié)點(diǎn)部分通過(guò)渲染函數(shù)對(duì)虛擬DOM對(duì)象進(jìn)行遍歷渲染；4，將HTML代碼，樹形控件的通用事件及樣式組件化為子組件。本發(fā)明解決了樹形控件統(tǒng)一維護(hù)、快速渲染問(wèn)題；可以用于組件化樹形控件的處理。

技術(shù)領(lǐng)域

本發(fā)明涉及WEB開發(fā)技術(shù)領(lǐng)域，特別涉及一種組件化樹形控件的處理方法。

背景技術(shù)

現(xiàn)如今的數(shù)據(jù)量日益龐大，不同的數(shù)據(jù)結(jié)構(gòu)，需要用到不同的展示方式。而樹形控件則是對(duì)某種數(shù)據(jù)層級(jí)關(guān)系的一種較好展示方式。由于表示層級(jí)關(guān)系的數(shù)據(jù)結(jié)構(gòu)一般較為復(fù)雜，展示的數(shù)據(jù)量一般較多，用戶可操作項(xiàng)多，且每層需要根據(jù)幾種字段來(lái)表示其狀態(tài)；因此，需要一種便于統(tǒng)一維護(hù)、能快速渲染且不會(huì)造成頁(yè)面性能消耗的方式來(lái)創(chuàng)建樹形控件。

在樹形控件中，由于需要較多地操作節(jié)點(diǎn)改變狀態(tài)，因此需要頁(yè)面渲染的次數(shù)較為頻繁。在執(zhí)行原生JS代碼操作DOM時(shí)，瀏覽器會(huì)重新執(zhí)行一遍構(gòu)建DOM的流程，造成頁(yè)面回流。頻繁的進(jìn)行DOM操作，如樹形控件頻繁的展開、折疊會(huì)多次進(jìn)行重新構(gòu)建；會(huì)造成瀏覽器卡頓，頁(yè)面加載緩慢，從而影響用戶體驗(yàn)。

發(fā)明內(nèi)容

本發(fā)明解決的技術(shù)問(wèn)題在于提供一種組件化樹形控件的處理方法；基于虛擬DOM，可以避免回流，減少瀏覽器的性能消耗。

本發(fā)明解決上述技術(shù)問(wèn)題的技術(shù)方案是：

所述的方法包括如下步驟：

步驟1，將獲取的數(shù)據(jù)整合為可遍歷、具有層級(jí)關(guān)系的數(shù)據(jù)結(jié)構(gòu)；然后，遍歷數(shù)據(jù)，在數(shù)據(jù)的每一層中加入狀態(tài)字段，并為其賦予默認(rèn)值；

步驟2，根據(jù)狀態(tài)構(gòu)建包含對(duì)應(yīng)所需HTML代碼或監(jiān)聽(tīng)事件的虛擬DOM對(duì)象；

步驟3，在子組件中寫入樹形控件的固定渲染部分的HTML代碼，在渲染樹形節(jié)點(diǎn)部分通過(guò)渲染函數(shù)對(duì)虛擬DOM對(duì)象進(jìn)行遍歷渲染；

步驟4，將HTML代碼，樹形控件的通用事件及樣式組件化為子組件。

步驟1中，

所述的數(shù)據(jù)結(jié)構(gòu)包含根節(jié)點(diǎn)所有信息及其子節(jié)點(diǎn)的相關(guān)信息；

所述的狀態(tài)是各個(gè)節(jié)點(diǎn)的展開、選中、選擇或自定義狀態(tài)；可以根據(jù)父組件傳入的狀態(tài)改變各個(gè)節(jié)點(diǎn)的狀態(tài)。

步驟2中，

所述的監(jiān)聽(tīng)事件是指支持用戶對(duì)節(jié)點(diǎn)操作并發(fā)生響應(yīng)事件的動(dòng)作事件；

所述的虛擬DOM對(duì)象是指裝有真實(shí)DOM渲染所需的HTML、CSS和監(jiān)聽(tīng)事件的一個(gè)對(duì)象集合。

步驟3中，

所述固定渲染部分是指樹形控件中不包含節(jié)點(diǎn)部分的可自定義的HTML、CSS及其事件代碼。

步驟4中，

所述通用事件包括樹形控件的數(shù)據(jù)整合、數(shù)據(jù)和節(jié)點(diǎn)事件的監(jiān)聽(tīng)、虛擬DOM對(duì)象的變更。

本發(fā)明采用上述的基于虛擬DOM的組件化樹形控件的處理方法，可讓樹形控件可自定義地傳入?yún)?shù)來(lái)控制各個(gè)節(jié)點(diǎn)的狀態(tài)，并根據(jù)狀態(tài)構(gòu)建不同的樣式和事件監(jiān)聽(tīng)等虛擬DOM對(duì)象內(nèi)容；從而可利用變更虛擬DOM對(duì)象來(lái)替代操作真實(shí)DOM，從而減少回流次數(shù)，大大地提高了頁(yè)面的訪問(wèn)速度，讓用戶擁有更好的操作體驗(yàn)。通過(guò)組件化，使得前端開發(fā)人員在制作樹形控件時(shí)能調(diào)用組件簡(jiǎn)化操作且達(dá)到預(yù)期需求，并且可以讓各個(gè)樹形控件更易于維護(hù)，能更有效的降低前端開發(fā)的工作量。實(shí)現(xiàn)了對(duì)各頁(yè)面眾多樹形控件的統(tǒng)一管理。