李冬男，任洪敏，朱東亮

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

基于Web的Git可視化設(shè)計與實現(xiàn)

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

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

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

Git；JGit；D3.js；可視化

0 引言

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

隨著Web技術(shù)的不斷發(fā)展，用戶的工作區(qū)由客戶端逐漸轉(zhuǎn)向互聯(lián)網(wǎng)，Git的使用者也在內(nèi)容展示上追求更好的體驗。當下Web是最好的信息載體，將Git與Web技術(shù)結(jié)合必然有一定的使用價值，此外D3.js等可視化類庫的出現(xiàn)，將圖形化Git版本庫提供了可能。

1 Git可視化分析與設(shè)計

1.1 Git版本控制機制分析

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

1.2 基于Web的Git可視化系統(tǒng)功能模塊

本文可視化系統(tǒng)整體功能模塊如圖1所示：

（1）Git的Web可視化

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

圖1

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

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

1.3 基于Web的Git可視化系統(tǒng)架構(gòu)

本文的可視化系統(tǒng)的整體系統(tǒng)架構(gòu)圖2。

本文軟件系統(tǒng)的結(jié)構(gòu)由以下幾部分構(gòu)成：

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

（2）控制層：本層的主要功能是調(diào)用不同的service實現(xiàn)不同的跳轉(zhuǎn)；

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

圖2

1.4 基于Web的Git可視化流程

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

圖3

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

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

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

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

2 基于Web的Git可視化實現(xiàn)

本節(jié)是對基于Web的Git可視化的核心內(nèi)容的具體實現(xiàn)，包括了核心技術(shù)的介紹與Git版本庫的交互、Git Web頁面的實現(xiàn)和基于d3.js圖形化的實現(xiàn)。

2.1 JGit介紹

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

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

通過JGit技術(shù)，開發(fā)者可以開發(fā)出具有Git功能的應(yīng)用程序。

2.2 D3.js介紹

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

（1）在選擇區(qū)內(nèi)數(shù)據(jù)數(shù)量與對應(yīng)節(jié)點相同時，只需更新數(shù)據(jù)源的變化，這樣的行為叫做update；

（2）在選擇區(qū)內(nèi)數(shù)據(jù)數(shù)量大于節(jié)點的數(shù)量，那么有一部分數(shù)據(jù)源無法綁定，將產(chǎn)生enter行為；

（3）反之，如果數(shù)據(jù)與節(jié)點接觸綁定，導(dǎo)致節(jié)點空閑，這就發(fā)生exit行為；

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

2.3 Google Code Prettify.js介紹

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

2.4 后臺系統(tǒng)與Git版本庫的交互

（1）獲取版本庫的引用

調(diào)用Jgitapi獲取Git版本庫的核心代碼如下所示：

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

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

2.5 Git Web頁面的動態(tài)生成

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

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

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

2.6 基于D3.js的圖形化實現(xiàn)

D3可以通過使用HTML、SVG和CSS把數(shù)據(jù)鮮活形象地展現(xiàn)出來。本系統(tǒng)使用SVG的

具體流程圖如圖4：

圖4

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

3 實現(xiàn)結(jié)果

基于Web的Git可視化的系統(tǒng)充分利用Web技術(shù)實現(xiàn)了對Git版本庫信息的展示。系統(tǒng)部分運行圖如圖5所示。

測試和運行效果表明，該系統(tǒng)設(shè)計合理，對Git可視化效果較好。

4 結(jié)語

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

圖5 可視化系統(tǒng)首頁

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

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

[3]朱建軍.基于D3的可視化組件開發(fā)及其在研討系統(tǒng)中的應(yīng)用[D].湖北工業(yè)大學(xué),2015.

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

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

[6]初悅欣.活靈活現(xiàn)用Git——基礎(chǔ)篇[J].程序員,2009,01：68-69.

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

[8]蔣鑫.Git權(quán)威指南[M].北京：機械工業(yè)出版社，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

國家重大科學(xué)儀器設(shè)備開發(fā)專項（No.2012YQ150001）

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

2016-04-21

2016-07-01