石偉 楊春花

摘 要：代碼重構普遍存在于軟件的開發(fā)維護過程中，將重構從代碼變更中檢測并提取出來有利于對變更的理解。針對重構可視化研究方面的欠缺，本文設計了一個代碼重構展示系統(tǒng)，實現(xiàn)了基于變更塊的代碼重構展示。通過該展示系統(tǒng)使代碼變更中存在的重構模式變得更加簡單、直觀，便于用戶對代碼變更的分析、理解。

關鍵詞：代碼重構;變更塊;展示系統(tǒng)

文章編號：2095-2163（2019）04-0075-04 中圖分類號：TP311.5 文獻標志碼：A

0 引 言

隨著軟件項目的不斷演化，軟件系統(tǒng)的維護也變得越來越困難。重構[1]概念的提出，為軟件系統(tǒng)的開發(fā)維護提供了幫助。重構是通過對軟件結構進行調整，進而在軟件特征功能不改變的前提下，對軟件的性能質量進行改善。代碼變更每天都在產生，由代碼重構檢測工具檢測出的重構代碼數量也是巨大的，在面對大量的沒有規(guī)律的復雜代碼信息時，將重構從代碼變更中檢測并提取出來有助于對代碼變更的理解。然而正是由于軟件規(guī)模的不斷擴大，這種理解也變得很困難。為了解決這個問題，Ware[2]提出，可視化方法是瀏覽大量數據并快速熟悉數據的首選方法。可視化技術為理解代碼變更提供了便利。

現(xiàn)有的代碼重構方法和可視化方法都有著自身的優(yōu)缺點，如何更好地運用這些可視化方法和模型來幫助代碼重構分析人員觀察代碼重構檢測結果、分析系統(tǒng)的重構關系及重構分布仍需要結合實際的問題?，F(xiàn)有的代碼重構檢測工具由于實現(xiàn)原理有所不同，因此檢測出的結果形式各不相同。代碼重構可視化相應的展示只側重于代碼重構數據的展示，未對其中的重構模式進行展示，這對分析人員查看結果并進行分析及可視化的工作都造成了困難。目前，在重構檢測及可視化方面的研究包括函數抽取重構的檢測算法[3]、基于變更相似性的跨語言克隆檢測方法[4]、基于MVC框架的系統(tǒng)重構方法研究[5]、克隆代碼可視化的研究[6]、可視化在大數據分析實現(xiàn)的研究[7]等。本文設計了一個代碼重構展示系統(tǒng)，基于變更塊對一個源文件的2個連續(xù)版本中的代碼變更數據進行分析處理，實現(xiàn)了代碼重構模式的相關展示，使用戶能夠更好地分析、理解代碼變更數據信息。

1 系統(tǒng)開發(fā)相關技術

1.1 MVC設計模式

MVC設計模式包括3個模塊：模型（Model）、視圖（View）和控制器（Controller）。這3個模塊都有各自的功能和特點，彼此間相互獨立，改變一個模塊不會影響到其它模塊，多個視圖可以共享一個模型，提高了代碼的可重用性。模型用于封裝應用程序的數據和用于控制、訪問和修改數據的規(guī)則，視圖用于數據信息的可交互界面設計，控制器用于對請求進行響應，并根據請求進行相應的操作，完成用戶請求。

1.2 GNU Diff工具

GNU Diff工具是一個文本差異化工具，處理輸出的基本對象是一個變更塊（hunk）。用于顯示文件是否存在差異，并提供了一些抑制某些看起來不重要的差異的方法。最常見的差異是指文字或線條之間的空白量的變化。工具還提供了抑制字母表中的差異的方法，或者與匹配的正規(guī)表達式的行相匹配，將2個文檔的內容進行比較，以便用戶對文檔內容信息進行分析和處理。

1.3 ChangeDistiller工具

ChangeDistiller工具是Beat Fluri等人[8-9]編寫的一個Tree differ算法。是一種基于細粒度的源代碼抽象語法樹差分算法。通過對代碼變更前后抽象語法樹的對比，獲取代碼變更數據并對其進行分類。該算法將源代碼變更數據定義為一個或一組基本抽象語法樹的邏輯操作，通過比較2個抽象語法樹節(jié)點之間的匹配和最小編輯腳本對變更數據進行提取。

1.4 XLoadTree組件

XLoadTree組件是基于AJAX和XML的動態(tài)加載JS樹組件，通過對樹節(jié)點的source屬性定義指向一個xml文件，從而使數據進行載入，其可以包含嵌套的子節(jié)點以及指向其它xml文件的子節(jié)點，利用DOM進行轉換。

1.5 Layout布局

JQuery EasyUI布局插件—Layout，布局是包含5個區(qū)域的容器。布局中心的區(qū)域面板是必不可少的，邊緣區(qū)域面板是可供選擇的，每個邊緣區(qū)域面板都是可以通過拖拽邊框調整邊框尺寸的，并且還可以通過折疊觸發(fā)器對面板區(qū)域進行折疊。布局是可以嵌套的，可以進行復雜的界面布局，通過布局將界面分為相應的區(qū)域，分別展示不同的信息。

2 系統(tǒng)分析與設計

基于對系統(tǒng)需求的綜合分析，設計并實現(xiàn)了一個Web端的代碼重構展示系統(tǒng)，將代碼重構檢測與可視化技術結合起來，應用到一個系統(tǒng)中。用戶可以通過該系統(tǒng)對一個源文件的2個連續(xù)修改版本中的變更數據信息進行代碼重構檢測、變更塊展示和重構模式展示等操作，使代碼重構變得更加簡單、直觀，便于用戶對存在重構的代碼變更進行分析、理解。

2.1 系統(tǒng)功能設計

在代碼重構展示系統(tǒng)中，主要分為2個部分：前臺和后臺管理。在前臺方面，未登錄用戶可以通過選擇本地數據的修改版本數據進行文件信息瀏覽、變更塊數據展示和重構模式展示;登錄用戶可以通過上傳文件進行代碼重構檢測從而進行變更塊數據展示和代碼重構模式方面的相關展示。在后臺管理方面，管理員可以對本地數據信息進行管理，并對用戶的數據信息進行相應的管理。系統(tǒng)功能設計如下。

2.1.1 前臺功能設計分析

（1）注冊與登錄：用戶可以通過注冊設置用戶名和密碼進行登錄操作;

（2）修改個人信息：用戶可以在登錄系統(tǒng)之后對自己的個人信息進行修改;

（3）查詢文件信息：用戶可以根據源文件的修改版本和文件名對文件信息進行查詢;

（4）上傳文件數據：用戶通過上傳文件的方式，對文件進行代碼重構檢測，展示其變更塊數據信息，如存在代碼重構則進行重構模式展示;

（5）變更塊展示：對存在代碼變更的代碼變更塊數據進行相應模式的展示;

（6）重構模式展示：對代碼變更中存在重構關系的重構模式進行相應的展示。

2.1.2 后臺管理功能設計分析

（1）用戶信息管理：管理員可以對用戶信息進行管理;

（2）文件數據管理：管理員可以對數據信息進行添加、刪除和修改等操作;

（3）文件數據查詢：管理員可以根據源文件的修改版本和文件名對文件信息進行查詢;

（4）變更塊展示數據管理：管理員可以對變更塊展示的數據進行管理;

（5）重構模式展示數據管理：管理員可以對重構模式展示的數據信息進行管理。

根據上述分析，可以得到系統(tǒng)的功能結構如圖1所示。

2.2 數據庫設計

在系統(tǒng)設計中，數據庫設計是非常重要的一個環(huán)節(jié)。數據是系統(tǒng)設計的基礎，數據庫設計的合理、完善程度將直接決定系統(tǒng)的成敗。在本系統(tǒng)中，數據庫采用MySQL數據庫。根據對系統(tǒng)功能需求的深入分析、并結合各實體之間的聯(lián)系建立的。數據庫結構見表1。

（1）用戶信息表（users）：用于記錄前臺用戶的基本數據信息;

（2）管理員信息表（admin）：用于記錄管理員的基本數據信息;

（3）版本信息表（revisions）：用于記錄版本庫中版本數據的數據信息;

（4）變更記錄表（actions）：用于記錄版本信息的變更操作數據信息;

（5）文件表（files）：用于記錄版本庫中的所有文件數據信息;

（6）開發(fā)者表（authors）：用于記錄項目版本開發(fā)者數據信息;

（7）內容表（contents）：用于記錄在版本庫中首次添加的文件內容數據信息;

（8）變更內容表（diffs）：用于記錄一個源文件的2個連續(xù)版本之間的diff數據信息;

（9）變更塊數據表（hunks）：用于記錄代碼變更的變更塊及其行號范圍等數據信息。

3 系統(tǒng)實現(xiàn)

該代碼重構展示系統(tǒng)應用B/S架構，采用 MVC設計模式，利用JSP+JavaBean+Servlet技術設計實現(xiàn)。系統(tǒng)整體由數據表現(xiàn)層、業(yè)務邏輯層和數據訪問層3個功能模塊組成，使系統(tǒng)結構更加清晰，運行效率更高，降低了系統(tǒng)層與層之間的耦合性，便于系統(tǒng)運行維護。其中，數據表現(xiàn)層由JSP實現(xiàn)，業(yè)務邏輯層由JavaBean實現(xiàn)，數據訪問層由Servlet實現(xiàn)。在系統(tǒng)實現(xiàn)過程中，主要包括前臺和后臺2個管理模塊。系統(tǒng)前臺模塊主要是接收用戶的請求，實現(xiàn)相應數據的展示功能。后臺管理模塊主要是用于對相關數據的管理。

3.1 前臺功能實現(xiàn)

主要實現(xiàn)相關數據的展示和用戶發(fā)送數據請求：

（1）查詢文件信息。用戶通過源文件的修改版本和文件名對文件信息進行查詢，并可以查看文件的變更塊展示及其是否存在重構，如存在則可查看其重構模式展示;

（2）上傳文件數據。用戶登錄后可以通過上傳文件數據，利用ChangeDistiller工具、GNU Diff工具和Levenshtein算法對文件數據進行重構檢測。然后，進行相應的代碼變更塊展示和重構模式展示;

（3）變更塊展示。利用GNU Diff工具對一個源文件的2個連續(xù)修改版本文件進行變更數據獲取，獲取hunk，形成hunk集，進行變更塊展示;

（4）重構模式展示。利用獲取的hunk數據進行代碼重構識別，提取相關重構參數和變更塊數據，選取相應的重構模式展示模塊，進行重構模式展示。

3.2 后臺管理功能實現(xiàn)

主要實現(xiàn)本地數據的獲取、查詢、分析、管理等功能：

（1）文件數據管理。本地數據來源是利用MiniGit工具獲取的開源項目數據，并將數據進行分析、處理之后存儲到本地數據庫。該模塊實現(xiàn)了本地數據的管理并對用戶上傳的文件信息進行管理，可以對相關數據進行刪除、修改和查詢等功能;

（2）變更數據管理。實現(xiàn)了對系統(tǒng)實現(xiàn)過程中的變更數據的管理。通過該模塊可以實現(xiàn)數據的刪除、修改和查詢等功能，以便更好地對變更數據進行管理。

系統(tǒng)主要功能運行界面如圖2、3所示。

4 結束語

代碼重構展示系統(tǒng)實現(xiàn)了代碼變更塊和重構模式的相關展示，實現(xiàn)了對一個源文件的2個連續(xù)修改版本的代碼重構檢測和重構模式展示。系統(tǒng)使用目前較成熟的框架和開發(fā)工具進行開發(fā)，為后期系統(tǒng)維護和后續(xù)開發(fā)提供了便利。

參考文獻

[1]FOWLER M， BECK K， BRANT J，et al. Refactoring：Improving the design of existing code[M]. Sebastopol，CA：Addison-Wesley Professional，1999.

[2] WARE C. Information visualization：Perception for design[M]. 2nd ed. San Francisco：Elsevier，2004.

[3] 劉陽，劉秋榮，劉輝. 函數抽取重構的自動檢測方法[J]. 計算機科學，2015，42（12）：105-107.

[4] 柳萌宇，鐘浩，于海波. 基于變更相似性的跨語言克隆檢測方法[J]. 計算機與現(xiàn)代化，2016（4）：79-84， 99.

[5] 李景炤，咼文承，胡伶俐，等. 基于MVC框架的系統(tǒng)重構方法研究與實踐[J]. 電腦知識與技術，2015， 11（22）：63-66.

[6] 何薔. 克隆代碼可視化系統(tǒng)的設計與實現(xiàn)[D]. 哈爾濱：哈爾濱工業(yè)大學，2015.

[7] 王博，沈方方. 可視化在大數據分析領域的實現(xiàn)要點[J]. 中國新通信，2017，19（14）：72.

[8] FLURI B， GALL H C. Classifying change types for qualifying change couplings[C]//ICPC'06 Proceedings of the 14th IEEE International Conference on Program Comprehension. Washington， DC， USA：IEEE，2006：35-45.

[9] FLURI B，WRSCH M， PINZGER M， et al.Change distilling：Tree differencing for fine-grained source code change extraction[J]. IEEE Transactions on Software Engineering，2007，33（11）：725-743.