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

有效

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

1.一種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）對大小規模不一的文件進行歸一化處理，建立文件的半徑模型，公式如下：

；

其中，r表示歸一化的半徑，file_size表示文件的大小，max_size表示最大的文件的大小，半徑與文件的大小成正比關系；

（2）對文件引用數量進行歸一化處理，建立文件的顏色模型，表達式如下：

；

其中，c表示歸一化的引用數量，file_nums_as_source表示文件的引用數量，max_nums_as_source表示所有文件中引用數量的最大值；

（3）計算文件所在坐標：首先計算文件在極坐標系中的位置（ρ,θ），公式如下：

，

；

其中，m，t，w，b為用于調試顯示效果的超參數，n表示代碼文件在其所在層級目錄中的順序號；

獲得極坐標（ρ,θ）后，再將極坐標轉換成直角坐標（x,y），轉換公式如下：

；

步驟4、借助ECharts工具渲染依賴關系的可視化圖形；

步驟5、通過正則表達式參與對原始數據的篩選，渲染出一幅新的僅針對特定的文件的依賴關系的可視化圖形。