[發明專利]一種基于AngularJS框架的大數據列表實現方法

有效

• 申請號: 202310849000.8
• 申請日: 2023-07-12
• 公開（公告）號: CN116578299B
• 公開（公告）日: 2023-09-08
• 發明（設計）人: 徐文勇;田紅偉;魏偉寧
• 申請（專利權）人: 成都數默科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F9/451;G06F3/04855
• 代理公司: 成都天嘉專利事務所(普通合伙) 51211
• 代理人: 彭思雨

本發明公開了一種基于AngularJS框架的大數據列表實現方法，所述大數據列表由可視區域、虛擬容器和渲染區域組成，渲染區域又包括上預渲染區域、實際渲染區域和下預渲染區域；首先設置可視區域高度，并計算虛擬容器的高度、實際渲染區域內數據項的數量和整個渲染區域的高度，然后編寫HTML模板文件，監聽用戶觸發的滾動事件，獲取scrollTop的值并實時計算renderIndex的值，根據scrollTop的值以及renderIndex的值判斷是否需要對大數據列表進行更新，最后基于AngularJS雙向綁定特性，將HTML文件中綁定的參數進行更新，并設置渲染區域的定位高度，完成大數據列表的更新。本發明在遵循AngularJS框架的前提下，使用效率更高的API實現大數據列表的更新，并且不會侵入破壞軟件原本的開發流程。

技術領域

本發明涉及計算機軟件開發技術領域，具體涉及一種基于AngularJS框架的大數據列表實現方法。

背景技術

AngularJS由于其自身的性能原因，渲染大量數據列表時耗時嚴重，且DOM渲染本身消耗的資源遠大于JavaScript運算的開銷，導致用戶訪問大數據列表時需要等待的時間遠超公認的標準，會產生頁面卡死的錯覺。在可視范圍內僅會展示數十條數據，但其余數據的渲染會消耗大量的時間，這種消耗是非必要且不可接受的。

面對大數據列表的需求，使用AngularJS開發的項目，通常的做法是采用分頁展示列表或者限制列表的最大數量，這些方案都會一定程度上降低用戶體驗甚至使需求降級，且當用戶的分頁操作足夠多的時候，可能會因為內存或是事件監聽過多等問題導致瀏覽器崩潰。

例如公開號CN111381823A，公開日為2020年07月07日，發明名稱為“Web端長列表渲染方法”的發明專利申請，其具體的技術方案為：本發明公開了一種Web端長列表渲染方法，包括：頁面布局：在根節點中設置固定長度列表；用戶設定需要渲染的數據數組，視圖的高度，和渲染數據所需的渲染函數，根據傳入的數據數組的長度和渲染后的每條數據所占DOM節點的高度，計算出整個頁面的高度；計算出所述固定長度列表中每頁內容所需的數據的最少條數；在固定長度列表的前后分別添加首部監聽節點和尾部監聽節點，再使用Intersection?Observer對象為首部監聽節點和尾部監聽節點添加監聽事件，當首部監聽元素監聽事件被觸發時開始進行下拉更新數據，相反的，當尾部監聽元素監聽事件被觸發時開始進行上滑更新數據；本發明運用新的滾動監聽方法和DOM操作算法去優化長列表加載卡頓的問題。

上述現有技術利用intersection?observe來監聽DOM之間相對位置來觸發數據的刷新，并且是依靠DOM元素的margin屬性進行定位的。但是，該現有技術無法直接在AngularJS框架中進行使用，并且由于使用了較新的監聽API?intersection?observe，又導致了兼容性較差的問題。

發明內容

為了解決上述現有技術存在的問題和缺陷，本發明提出了一種基于AngularJS框架的大數據列表實現方法，在遵循AngularJS框架的前提下，使用效率更高的API實現大數據列表的更新，并且不會侵入破壞軟件原本的開發流程。

為了實現上述發明目的，本發明的技術方案如下：

一種基于AngularJS框架的大數據列表實現方法，所述大數據列表由可視區域、虛擬容器以及渲染區域組成，其中，渲染區域又包括上預渲染區域、實際渲染區域和下預渲染區域，所述大數據列表實現方法具體包括以下步驟：

設置可視區域高度；

獲取大數據列表數組，計算出虛擬容器的高度并通過JavaScript設置虛擬容器的高度；

計算實際渲染區域內渲染的數據項的數量，以及計算整個渲染區域的高度；

編寫HTML文件，將實際渲染區域內渲染的數據項的數量以及渲染區域中第一條數據的索引這兩個參數綁定至HTML文件中，用于實現大數據列表的更新；