[發明專利]一種Web前端代碼依賴關系可視化方法

有效

• 申請號: 201911137711.2
• 申請日: 2019-11-19
• 公開（公告）號: CN110908710B
• 公開（公告）日: 2023-08-29
• 發明（設計）人: 周圓;張岳;金明磊;趙恩偉;鄧守峰
• 申請（專利權）人: 天津大學
• 主分類號: G06F8/75
• 分類號: G06F8/75;G06F8/20
• 代理公司: 天津市北洋有限責任專利代理事務所 12201
• 代理人: 李素蘭

本發明公開了一種Web前端代碼依賴關系可視化方法，該方法利用分析項目代碼得到包含代碼信息及引用關系的原始數據，對其增強得到強化數據，再將強化數據映射到可視化模型上，最后使用ECharts進行渲染得到代碼依賴關系的可視化圖形，可視化圖形可支持人機交互，可通過篩選原始數據，重新得到新渲染的可視化圖形。與現有技術相比，原本需要人工檢查才能分析得到的依賴關系，本發明提出的一種Web前端代碼依賴關系可視化方法可以自動化地分析并渲染成可視化的圖形，有助于減少不必要的依賴，優化代碼結構。

技術領域

本發明涉及Web前端開發技術領域，特別涉及代碼依賴關系的分析方法。

背景技術

在現代軟件項目的開發中，無論使用過程式、函數式還是面向對象的軟件組織方式，最終程序的執行必然包括對一系列方法的調用，這意味著代碼之間的依賴關系廣泛存在軟件項目中，在面向對象的開發方式中，繼承和方法調用是比較常見的對象之間產生依賴的原因，代碼依賴不可避免，但在軟件項目代碼量越來越龐大的今天，代碼間的依賴關系日趨復雜，冗余的和高度耦合的代碼依賴會增加代碼理解和維護的難度。傳統的依靠開發人員經驗進行代碼依賴檢查的方式效率較低，對于代碼依賴的自動化檢查已經成為大型軟件項目研發的常見手段。

軟件開發過程傳統上主要基于開發人員的經驗進行。為了改進開發效率，需要引入數據驅動的方式，首要任務是充分利用開發過程中產生的各種數據，包括代碼依賴數據，運用可視化分析的方法，結合人類視覺和計算機結構化信息處理的優勢，使用人機交互的方式從數據中得出結論。

現代軟件項目代碼量的膨脹使得代碼間的依賴關系日趨復雜，傳統的依靠開發人員經驗進行代碼依賴檢查的方式效率不僅低，分析結果還有不一定準確。使用可視化的代碼依賴分析方法充分利用軟件項目開發過程中產生的代碼依賴數據，自動化地分析數據，運用可視化分析的方法，展示可視化的圖形。對代碼依賴分析有助于降低不必要和不合理的依賴，加以適時的重構，可以維護軟件架構的穩定性，減少程序錯誤，提高開發效率和降低維護成本。

發明內容

本發明旨在提出一種Web前端代碼依賴關系可視化方法，該方法利用分析項目代碼得到包含代碼信息及引用關系的原始數據，對其增強得到強化數據，再將強化數據映射到可視化模型上，最后使用ECharts進行渲染得到代碼依賴關系的可視化圖形，可視化圖形可支持人機交互，可通過篩選原始數據，重新得到新渲染的可視化圖形。

本發明的一種Web前端代碼依賴關系可視化方法，該方法包括以下步驟：

步驟1、基于ECMAScript6的模塊化語法獲取原始數據包括項目關聯的所有代碼文件以及相關信息、依賴關系的數據，即得到此文件的引用信息；

步驟2、對原始數據進行增強，進而得到強化數據，即計算depth、deepen、depth_range、max_size、max_nums_as_source等信息從項目目錄中篩選并且去除不相關文件的無效數據，depth表示文件的相對根目錄的深度，由文件信息對象的id即文件的相對目錄計算得到；deepen表示文件是否被同級的其他文件引用；depth_range表示每層目錄中的文件總數；max_size表示所有文件中的文件大小的最大值；max_nums_as_source表示所有文件中文件引用數量的最大值；

步驟3、由強化數據映射到可視化模型；每個文件表示按被引次數表示為不同灰度、不同大小的圓圈；可視化模型顯示為同心圓結構，同一級目錄下的文件根據id按字典序均勻分布在同一個圓上，第一級目錄為半徑最小的圓，隨半徑增大依次為第二級、第三級等目錄；在同一級目錄中，如果某文件是被同級的其他文件引用，它將被向外移動到本目錄和下一級目錄之間的位置；模型建立過程如下：

(1)對大小規模不一的文件進行歸一化處理，建立文件的半徑模型，公式如下：