基于Web的Git可視化設計與實現

李冬男，任洪敏，朱東亮

（1.上海海事大學信息工程學院，上海 201306；2.上海上科信息技術研究所，上海 201306）

基于Web的Git可視化設計與實現

李冬男1，任洪敏1，朱東亮2

（1.上海海事大學信息工程學院，上海 201306；2.上海上科信息技術研究所，上海 201306）

隨著軟件開發環境和團隊協作方式的不斷變化，分布式的版本控制系統Git應運而生?；赪eb的Git可視化設計針對Git版本庫中提交信息、分支信息以及存儲的文件基于Web技術和D3.js可視化技術進行展示。與Git官方提供的客戶端系統Git Bash和Git GUI相比，該設計的系統展示Git版本庫信息更加清晰，便于使用者管理Git倉庫。該設計的可視化亮點是使用了可視化類庫D3.js對Git版本庫信息圖形化，給版本控制系統可視化方面提供了新思路。

Git；JGit；D3.js；可視化

0 引言

2005年BitMover公司決定收回Linux社區托管代碼的免費使用權，為了維護Linux龐大的代碼，Linus決心完成一個分布式版本控制系統，Git就這樣誕生了。很快Git官方也推出了兩款客戶端工具Git Bash和Git GUI。Git Bash可以直接使用Git命令與Git版本庫交互，操作簡單方便。但是，在查看版本庫基本信息例如提交數，每次提交的文件信息以及差異比較時操作繁瑣且頁面不友好。Git GUI將命令可視化，用戶可以點擊按鈕操作Git版本庫，然而Git GUI著重于Git版本庫的管理上，在內容展示上做的比較粗糙。

隨著Web技術的不斷發展，用戶的工作區由客戶端逐漸轉向互聯網，Git的使用者也在內容展示上追求更好的體驗。當下Web是最好的信息載體，將Git與Web技術結合必然有一定的使用價值，此外D3.js等可視化類庫的出現，將圖形化Git版本庫提供了可能。

1 Git可視化分析與設計

1.1 Git版本控制機制分析

Git在保存和對待各種信息的時候與其他版本管理系統有很大差異，主要差別在于Git對待數據的方法。其他版本控制系統如SVN以文件變更列表的方式存儲信息。這類版本控制系統將它們保存的信息看作是一組基本文件和每個文件隨時間逐步累積的差異。簡單的說，版本保存的時候差異比較。Git不按照以上的方式保存數據，Git將數據看作是對小型文件系統的一組快照。因此，每一個提交Git都保存著完整的文件信息。因此對于使用者來說，Git中每一此提交的文件信息都有展示的必要。針對Git版本控制的特殊機制，下文給出了本文系統的功能模塊。

1.2 基于Web的Git可視化系統功能模塊

本文可視化系統整體功能模塊如圖1所示：

（1）Git的Web可視化

本可視化系統通過JGit與本地Git系統進行交互，獲取當前Git版本庫中的所有信息。對于使用Git版本控制系統的人來說，顯然不會希望了解所有的信息。因此，本系統的可視化是有對Git版本庫中的信息進行針對性的展示。在版本控制系統中，分支的個數、提交的次數、提交者以及提交時間都是十分重要的信息。因此在Git的Web可視化中將著重展示這些信息。在本系統的初始化界面，展示的是版本庫中最新提交的信息。Git作為近年來十分流行的版本控制系統，它的每一次提交都是一套完整的版本庫鏡像文件。因此對每次提交的commit中所包含的文件進行解析并展示是十分必要的。差異比較功能是Git版本控制系統的重要功能，在Git的Web的可視化系統中差異比較功能將每次提交的commit與其前一次的commit進行了比較，并將其差異的部分展示出來。除此以外，本系統還將分支與主分支即master分支進行了差異比較并進行展示。

圖1

（2）Git基于D3.js的圖形可視化

本系統模塊將Git的每次commit作為一個節點，顯然Git版本庫中所有的commit將構成一張圖。本系統模塊著重對主分支即master分支進行圖形可視化，將commit節點畫圓形節點按照提交時間排列在svg畫布上。使用箭頭指向本次提交的父節點，這樣的話給使用者對自己當前的版本倉庫中提交一目了然。在這個模塊中，實現了鼠標懸浮事件和點擊事件功能，分別用來展示commit以及其父節點的差異化比較。

1.3 基于Web的Git可視化系統架構

本文的可視化系統的整體系統架構圖2。

本文軟件系統的結構由以下幾部分構成：

（1）展示層：本層的主要功能是對Git版本庫可視化；

（2）控制層：本層的主要功能是調用不同的service實現不同的跳轉；

（3）數據訪問層：本層的主要功能是使用JGit與Git版本庫進行交互。

圖2

1.4 基于Web的Git可視化流程

為了更加清楚地闡述本文提供的基于Web的Git可視化解決方案，本節將對整個可視化系統流程附圖并作出完整的描述。如圖3：

圖3

如圖3所示，本文提供的可視化解決方案，將整個可視化過程分成三個階段：

（1）第一階段：用戶使用Git的客戶端工具GitBash對本地版本倉庫進行操作。GitBash作為Git版本控制系統官方的客戶端程序，有效支持Git的所有命令。當用戶使用Git init命令初始化版本庫后，本地主分支就已經建立起來了。

（2）第二階段：后臺系統通過調用JGit api與之前初始化的版本庫建立交互。首先調用JGit中的抽象類Repository獲取Git版本庫的引用。這樣，就可以將Git版本庫當作本地文件系統。通過JGit提供的大量api后臺系統可以獲得版本庫中分支的個數，提交日期，提交人，以及每次commit所包含的文件信息。

（3）第三階段：通過調用JGit api獲得的版本庫信息經過本系統定義的model類型預處理打包成JSON數據格式，為前臺頁面的可視化做好準備。然后前臺異步調用AJAX獲取JSON數據源，通過模板動態創建HTML的模式，形成Web頁面。

2 基于Web的Git可視化實現

本節是對基于Web的Git可視化的核心內容的具體實現，包括了核心技術的介紹與Git版本庫的交互、Git Web頁面的實現和基于d3.js圖形化的實現。

2.1 JGit介紹

JGit是一個輕量級純Java的類庫，用來實現Git版本控制系統的訪問，以及提供核心的版本控制算法。Git的設計分為2層，分別是porcelain層和plumbing層。在porcelain層實現與用戶直接與用戶交互的命令集，而plumbing層在其之下，提供處理底層任務的命令集。與Git核心庫結構相同，JGit也被設計成兩層，對每個Git動詞命令如：commit，checkout等，JGit在org.eclipse. jgit.api包中都一一提供相應的API。JGit這樣的設計讓其在使用時看起來就像是使用Git的plumbing層。

Git對象模型中提供4種對象類型分別為：①blob用來存儲文件數據；②tree被看作是一個目錄，用來引用其他的目錄或者blob對象；③commit一個commit指向一個tree對象；④tag將一個commit對象標記為特殊的commit對象 同樣的，JGit也提供相應的數據對象類型。①Ref代表一個變量保存一個對象標識符，這個對象標識符可以是任意有效的Git對象；②RevCommit對應Git object model中的commit對象；③RevTree對應Git object model中的tree對象；④RevTag對應Git object model的tag對象。

通過JGit技術，開發者可以開發出具有Git功能的應用程序。

2.2 D3.js介紹

D3.js是一個動態圖形顯示數據的JavaScript庫，一個數據可視化的工具。D3兼容W3C標準，支持綁定任何數據到DOM，并且利用廣泛實現的SVG、CSS標準。D3以數據為核心，規定三種行為：

（1）在選擇區內數據數量與對應節點相同時，只需更新數據源的變化，這樣的行為叫做update；

（2）在選擇區內數據數量大于節點的數量，那么有一部分數據源無法綁定，將產生enter行為；

（3）反之，如果數據與節點接觸綁定，導致節點空閑，這就發生exit行為；

正是因為D3的這三種行為使得與其他的類庫相比，D3對可視化視圖可控性高，可以做出開發者想要的效果。

2.3 Google Code Prettify.js介紹

Prettify.js是一款輕量級的高亮開源js庫，本文系統使用此庫用來格式化Git版本庫中的代碼。

2.4 后臺系統與Git版本庫的交互

（1）獲取版本庫的引用

調用Jgitapi獲取Git版本庫的核心代碼如下所示：

代碼中Repository是JGit提供的抽象類，對應的實例代表著一個Git版本庫。該方法中傳入本地Git版本庫的路徑，findGitDir（）方法會在傳入的路徑下搜索.git目標，最后返回一個版本庫實例。

（2）獲取Git版本庫中commit對象代碼中調用Git的有參構造函數傳入上文中Git版本庫的實例對象，獲取包含commit的迭代器實例logs，通過遍歷很容易得到當前版本庫中的所有commit對象。得到commit對象后就可以獲得一些提交的基本信息。例如通過調用commit.getFullMessage（）可以獲得當前commit提交時提交人輸入的提示信息，通過調用commit.getAuthorIdent（）.getWhen（）可以獲得此commit的提交時間，通過調用commit.getAuthorIdent（）.get-Name（）可以獲得此commit的提交人。

2.5 Git Web頁面的動態生成

本系統展示層使用HTML+CSS+JS技術框架，完成前臺頁面的布局與數據展示。后臺系統調用JGit api獲取Git版本庫的信息后，對其重新組織打包成JSON數據格式給前臺。利用AJAX獲取JSON數據包，生成HTML頁面。本系統Web頁面主要用來展示Git版本庫的提交、分支情況，因此HTML頁面中有大量模塊是重復的?？紤]到這種情況，使用了jQuery動態生成頁面技術。JS核心代碼如下：

JS代碼中定義了HTML的一個重復使用的div模塊divModel，方法getData（）調用$.getJSON（）方法獲得JSON數據，在showGit方法中使用正則表達式替換div模板中的關鍵字COMMITCONTENT，這樣HTML中的模塊數就能根據Git版本庫中的提交數動態增加了。

本系統采用的這種方法HTML的代碼量很少，將組裝數據與渲染都放在了JS中。這樣大大增加了頁面的靈活性。未來的發展趨勢是前端后端只靠JSON數據來進行通信：后端只處理和發送一段JSON數據到前端，然后計算和模板渲染都在前端進行。而前端的改動后，形成JSON數據然后傳回到后端。后臺程序再也不做模板的任何處理，這樣的話可以大大降低服務器的壓力，服務器只需要做好路由和安全工作即可。

2.6 基于D3.js的圖形化實現

D3可以通過使用HTML、SVG和CSS把數據鮮活形象地展現出來。本系統使用SVG的

具體流程圖如圖4：

圖4

首先在Web頁面HTML中設置svg的大小，使用AJAX獲取從后臺取得的JSON數組。本文中實現的圖形化是以y軸為參照從上到下的畫法，因此需設置y軸的坐標偏移量。綁定數據源后循環，每一次循環就增加一次y坐標的偏移量。需要特別說明的是后臺返回給前臺的commit數組對象，根據提交時間已經倒序排序了。

3 實現結果

基于Web的Git可視化的系統充分利用Web技術實現了對Git版本庫信息的展示。系統部分運行圖如圖5所示。

測試和運行效果表明，該系統設計合理，對Git可視化效果較好。

4 結語

本文重點研究Git倉庫中版本信息在Web上的展示，實現了commit，branch以及每次提交版本的所有文件展示，差異比較等功能。在圖形可視化方面基于D3. js實現了本地分支的圖形化，并且添加了兩個事件用來展示兩次commit提交間的差異比較。但是Git分支功能強大，一般版本庫中不僅僅只包含本地分支，如何完整圖形化Git還需要繼續探索。同時，D3.js也支持大量事件，因此Git的基本操作也完全可以可視化，這也是將來研究Git可視化的一個比較好的研究方向。

圖5 可視化系統首頁

[1]張運良,張兆鋒,張曉丹,許德山.使用D3.js的知識組織系統Web動態交互可視化功能實現[J].現代圖書情報技術,2013,Z1：127-131.

[2]趙聰.可視化庫D3.js的應用研究[J].信息技術與信息化,2015,02：107-109.

[3]朱建軍.基于D3的可視化組件開發及其在研討系統中的應用[D].湖北工業大學,2015.

[4]宋冬生.Git——版本管理之利器[J].程序員,2007,11：118-119+10.

[5]張文,李曉梅.基于Web的可視化研究與實現[J].計算機工程與科學,2002,03：25-27.

[6]初悅欣.活靈活現用Git——基礎篇[J].程序員,2009,01：68-69.

[7]Chacon,Scott.Pro Git[M].Berkeley,CA：Apress,2009.

[8]蔣鑫.Git權威指南[M].北京：機械工業出版社，2011.

Git;JGit;D3.js;Visualization

Visual Design and Implement of Git Based on Web

LI Dong-nan1，REN Hong-min1，ZHU Dong-liang2
（1.College of Information Engineering,Shanghai Maritime University,Shanghai 201306；2.Shanghai Shangke Information Technology Research Institute,Shanghai 201306）

With the changing environment and the software development team collaboration,distributed version control system Git emerged.The visual design of Web Git repository for the information submitted the branch information and files stored on Web-based technology and D3. js visualization techniques based on display.The client system and the official Git Git Bash and Git GUI compared to the design of the display system Git repository information more clear and easy user management Git repository.Visual highlight of the design is the use of visualization libraries D3.js Git repository information graphically,to provide new ideas in version control system visualization.

1007-1423（2016）19-0040-06

10.3969/j.issn.1007-1423.2016.19.011

國家重大科學儀器設備開發專項（No.2012YQ150001）

李冬男（1991-），男，江蘇宿遷人，碩士研究生，研究方向為軟件開發方法與軟件項目管理

2016-04-21

2016-07-01