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

李冬男，任洪敏，朱東亮

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

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

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

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

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

Git；JGit；D3.js；可視化

0 引言

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

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

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

1.1 Git版本控制機(jī)制分析

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

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

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

（1）Git的Web可視化

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

圖1

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

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

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

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

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

（1）展示層：本層的主要功能是對(duì)Git版本庫(kù)可視化；

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

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

圖2

1.4 基于Web的Git可視化流程

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

圖3

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

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

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

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

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

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

2.1 JGit介紹

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

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

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

2.2 D3.js介紹

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

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

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

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

正是因?yàn)镈3的這三種行為使得與其他的類(lèi)庫(kù)相比，D3對(duì)可視化視圖可控性高，可以做出開(kāi)發(fā)者想要的效果。

2.3 Google Code Prettify.js介紹

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

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

（1）獲取版本庫(kù)的引用

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

代碼中Repository是JGit提供的抽象類(lèi)，對(duì)應(yīng)的實(shí)例代表著一個(gè)Git版本庫(kù)。該方法中傳入本地Git版本庫(kù)的路徑，findGitDir（）方法會(huì)在傳入的路徑下搜索.git目標(biāo)，最后返回一個(gè)版本庫(kù)實(shí)例。

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

2.5 Git Web頁(yè)面的動(dòng)態(tài)生成

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

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

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

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

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

具體流程圖如圖4：

圖4

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

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

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

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

4 結(jié)語(yǔ)

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

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

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

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

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

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

[5]張文,李曉梅.基于Web的可視化研究與實(shí)現(xiàn)[J].計(jì)算機(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].北京：機(jī)械工業(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

國(guó)家重大科學(xué)儀器設(shè)備開(kāi)發(fā)專(zhuān)項(xiàng)（No.2012YQ150001）

李冬男（1991-），男，江蘇宿遷人，碩士研究生，研究方向?yàn)檐浖_(kāi)發(fā)方法與軟件項(xiàng)目管理

2016-04-21

2016-07-01