基于JavaScript的可視化建模UML工具開(kāi)發(fā)

文 浩

（福建師范大學(xué),福建 福州 350007）

可視化建模是一種用不同的圖形（主要包含節(jié)點(diǎn)和邊）來(lái)描述系統(tǒng)的方法，從而加深開(kāi)發(fā)人員對(duì)問(wèn)題的理解。這種方法對(duì)于整個(gè)軟件開(kāi)發(fā)過(guò)程而言是極為重要的。

統(tǒng)一建模語(yǔ)言（UML）作為一種常用的可視化工具，被廣泛運(yùn)用于軟件開(kāi)發(fā)過(guò)程中，其重要性不言而喻。那么基于UML圖的特性，開(kāi)發(fā)出用于繪制可視化模型的原型工具，也是很有必要的。目前工業(yè)界中常用的UML圖繪制工具有EA、ROSE、VISIO等，這些工具因?yàn)橄鄬?duì)固定的用途以及版本迭代緩慢等諸多原因，繪制出來(lái)的可視化模型都過(guò)于簡(jiǎn)單，且不易調(diào)整（這些工具大多仍是基于UML1.0版本，現(xiàn)在常用版本為2.0）。同時(shí)，因?yàn)槠滠浖惭b相對(duì)復(fù)雜，功能界面不夠友好，對(duì)于初學(xué)者來(lái)說(shuō)，是一個(gè)不小的挑戰(zhàn)。

基于上述工具存在的問(wèn)題，本文選擇使用JavaScript（下面簡(jiǎn)稱為JS）語(yǔ)言進(jìn)行UML模型繪制工具的開(kāi)發(fā)。JS是一種用于網(wǎng)頁(yè)應(yīng)用開(kāi)發(fā)的腳本語(yǔ)言，因?yàn)樵撜Z(yǔ)言的特性，可以實(shí)現(xiàn)在瀏覽器上直接進(jìn)行可視化模型的繪制，并且可以免安裝，初學(xué)者容易上手，迭代更新更為便捷，從而大大降低了建模工作的門檻。

本文的結(jié)構(gòu)如下：第1節(jié)對(duì)UML圖的特性進(jìn)行了分析；第2節(jié)基于UML圖的特性，對(duì)工具的功能模塊進(jìn)行了設(shè)計(jì)；第3節(jié)論述了原型工具開(kāi)發(fā)過(guò)程中已經(jīng)實(shí)現(xiàn)的功能，并且分析之后軟件迭代的方向；最后總結(jié)全文，對(duì)未來(lái)的研究進(jìn)行展望。

1 UML圖的特性

活動(dòng)圖主要是用來(lái)對(duì)系統(tǒng)的行為進(jìn)行建模，在視覺(jué)上的呈現(xiàn)類似于流程圖或數(shù)據(jù)流程圖，結(jié)構(gòu)上類似于有向圖。圖1是一個(gè)表示ATM機(jī)業(yè)務(wù)過(guò)程的活動(dòng)圖實(shí)例，為了方便表示，仿照標(biāo)記變遷系統(tǒng)（Labeled Transition System），用不同的英文字母對(duì)每個(gè)節(jié)點(diǎn)進(jìn)行標(biāo)記。

該活動(dòng)圖中的元素可以分為節(jié)點(diǎn)和邊兩大類。其中，節(jié)點(diǎn)又可分為以下幾種。

活動(dòng)節(jié)點(diǎn)：用一個(gè)矩形表示。活動(dòng)節(jié)點(diǎn)是用于表示系統(tǒng)中最基本的活動(dòng)，每一種活動(dòng)對(duì)應(yīng)到一個(gè)活動(dòng)節(jié)點(diǎn)。在圖1中，用字母a命名的活動(dòng)節(jié)點(diǎn)，表示的是ATM機(jī)系統(tǒng)中插卡這一個(gè)活動(dòng)。

初始節(jié)點(diǎn)：用一個(gè)實(shí)心的黑色圓表示，類似于樹(shù)結(jié)構(gòu)中的根節(jié)點(diǎn)，表示系統(tǒng)中活動(dòng)的開(kāi)始。在圖1中，用字母i表示。

終止節(jié)點(diǎn)：用一個(gè)較大的空心圓和小的黑色實(shí)心圓嵌套組成，類似于樹(shù)結(jié)構(gòu)中的葉子節(jié)點(diǎn)，表示系統(tǒng)中活動(dòng)的結(jié)束。在圖1中，字母f1和f2都是終止節(jié)點(diǎn)。

選擇節(jié)點(diǎn)：用一個(gè)菱形表示，體現(xiàn)系統(tǒng)會(huì)根據(jù)不同觸發(fā)條件，選擇不同的活動(dòng)，類似于程序設(shè)計(jì)語(yǔ)言中的if結(jié)構(gòu)。在圖1中，用dn開(kāi)頭命名的節(jié)點(diǎn)都是選擇節(jié)點(diǎn)。

合并節(jié)點(diǎn):同樣用菱形表示，體現(xiàn)了活動(dòng)分流后的合并，與選擇節(jié)點(diǎn)配套使用。為了區(qū)分，統(tǒng)一用mn開(kāi)頭進(jìn)行命名。

分叉節(jié)點(diǎn)：用一個(gè)中間部分印有fork字樣的長(zhǎng)條矩形表示，體現(xiàn)了活動(dòng)的并發(fā)，類似于程序設(shè)計(jì)語(yǔ)言中的多線程。在圖1中，用fn開(kāi)頭的字母進(jìn)行命名。

本書(shū)作者佩恩特利用其擔(dān)任總統(tǒng)首席道德律師的兩年半期間，在美國(guó)政治中心之一的白宮，近距離地觀察到眾多的人和事，從而為本書(shū)提供了難能可貴的豐富的素材。美國(guó)多年來(lái)實(shí)施了一系列推動(dòng)行政道德的措施，然而，廉政建設(shè)的努力正面臨著越來(lái)越多的挑戰(zhàn)。《打造一個(gè)美國(guó)應(yīng)得的政府》針對(duì)美國(guó)政壇上形形色色的貪腐行為、現(xiàn)存的漏洞，以及原因所在，進(jìn)行了深入的分析，并作出了不少有益、中肯的批評(píng)。與此同時(shí)，該書(shū)也對(duì)如何改變現(xiàn)狀提出了一些建議。作者希望，這些建議的落實(shí)，將有助于改進(jìn)美國(guó)的行政道德，有助于打造一個(gè)美國(guó)人民應(yīng)得的廉潔的政府。

匯合節(jié)點(diǎn)：用一個(gè)中間部分印有join字樣的長(zhǎng)條矩形表示，體現(xiàn)了并發(fā)等待的活動(dòng)，此時(shí)匯合，進(jìn)入下一個(gè)動(dòng)作，與分叉節(jié)點(diǎn)配套使用。在圖1中，用jn開(kāi)頭的字母進(jìn)行命名。

以上節(jié)點(diǎn)被統(tǒng)稱為控制節(jié)點(diǎn)，即不代表實(shí)際的活動(dòng)，而是用于控制不同活動(dòng)間的執(zhí)行。

除了節(jié)點(diǎn)之外，邊也是活動(dòng)圖中的主要元素。活動(dòng)圖中的邊是一條有向的線段，主要表示的是節(jié)點(diǎn)間的執(zhí)行順序和先后依賴關(guān)系。基于邊和控制節(jié)點(diǎn)，就可以很清晰地顯示出在一個(gè)系統(tǒng)中活動(dòng)的具體執(zhí)行流程。

圖1 一個(gè)活動(dòng)圖的實(shí)例

圖2 活動(dòng)圖的繪制

2 原型工具的功能模塊

基于上文對(duì)UML特性的分析，下面對(duì)原型工具的功能模塊組成進(jìn)行了討論。

開(kāi)發(fā)的原型工具所需要的功能主要分為以下三個(gè)方面。

UML圖的繪制：需要實(shí)現(xiàn)拖拉式的繪圖，即存在一個(gè)選擇面板，其中分布的就是UML圖中的不同節(jié)點(diǎn)，接著再提供一個(gè)畫(huà)板，可以將選擇面板中的節(jié)點(diǎn)拖拉至畫(huà)板之上，隨后可以在節(jié)點(diǎn)間進(jìn)行連線，從而構(gòu)成一個(gè)完整的UML圖。

圖與文檔之間的轉(zhuǎn)換：最近一段時(shí)間，一個(gè)發(fā)布在GitHub上的名為flowchart.fun（https://flowchart.fun/）的網(wǎng)頁(yè)工具風(fēng)靡工業(yè)界。其流行的原因是開(kāi)發(fā)人員可以通過(guò)編輯文檔，自動(dòng)生成對(duì)應(yīng)的流程圖或者思維導(dǎo)圖，這極大提升了開(kāi)發(fā)人員的工作效率。本文中的原型工具也需要實(shí)現(xiàn)圖與文檔之間的轉(zhuǎn)換，并且，這種轉(zhuǎn)換是雙向的，不僅要實(shí)現(xiàn)文檔自動(dòng)轉(zhuǎn)換成可視化的UML圖，也需要實(shí)現(xiàn)UML圖繪制后，自動(dòng)生成對(duì)應(yīng)文檔進(jìn)行存儲(chǔ)。這種雙向轉(zhuǎn)換對(duì)于開(kāi)發(fā)過(guò)程的幫助不言而喻。

圖與代碼之間的轉(zhuǎn)換：在軟件生命周期中，經(jīng)歷了設(shè)計(jì)與建模后，就到了編碼階段，編碼人員需要根據(jù)相關(guān)的UML圖，進(jìn)行代碼的編寫(xiě)。那么在UML圖繪制完成后，自動(dòng)生成一個(gè)正確的代碼框架，這樣編碼人員就不再需要去理解設(shè)計(jì)人員所繪制的UML圖，而是直接對(duì)該UML圖生成的代碼框架進(jìn)行增添與刪改，從而大大提升了開(kāi)發(fā)效率以及降低了錯(cuò)誤率。

3 原型工具已實(shí)現(xiàn)的功能

基于開(kāi)源庫(kù)GoJS（https://gojs.net/latest/index.html），我們成功開(kāi)發(fā)了原型工具DSTool（下載鏈接：https://pan.baidu.com/s/1aziIBB-KXeVUevMOGTf8xw 提取碼：rpyv），具體界面如圖2所示。

圖2中的上半部分，對(duì)應(yīng)到第二章中的功能（1），即拖拉式的繪圖，其中該區(qū)域左邊的部分為選擇模塊，上面分布著第一章中所描述的活動(dòng)圖的七種節(jié)點(diǎn)，可以通過(guò)拖拉的方法，在右邊的白板任意位置進(jìn)行繪制，并且通過(guò)連線的方法，生成邊，從而形成一個(gè)完整的活動(dòng)圖，如其該區(qū)域右邊的部分所示。

在圖2中的下半部分，該區(qū)域的左邊對(duì)應(yīng)的是上文中的功能（2），即可以將已經(jīng)繪制的活動(dòng)圖轉(zhuǎn)換成對(duì)應(yīng)JSON格式（一種易解析的數(shù)據(jù)存儲(chǔ)格式）的文件進(jìn)行存儲(chǔ)，或者載入本地中已有的JSON文件，生成對(duì)應(yīng)的UML圖。該區(qū)域的右邊對(duì)應(yīng)的是上文中的功能（3），將繪制好的活動(dòng)圖轉(zhuǎn)換成對(duì)應(yīng)Java代碼框架的實(shí)例。

該原型工具DSTool除了可以實(shí)現(xiàn)上述功能外，還可以用于建模形式化模型——依賴結(jié)構(gòu)[5-6],為高可信軟件的開(kāi)發(fā)提供幫助。除此之外，還可以實(shí)現(xiàn)形式化模型與狀態(tài)圖之間的轉(zhuǎn)換。但可惜的是，目前該工具在驗(yàn)證模型性質(zhì)和分解模型此類功能上不夠完善，之后要加大在這一方面的研究投入。

4 總結(jié)

本文介紹了一種基于JavaScript的原型工具DSTool。該工具的開(kāi)發(fā)過(guò)程是先分析可視化建模語(yǔ)言UML的特點(diǎn)，再設(shè)計(jì)對(duì)應(yīng)的功能模塊，目前已經(jīng)實(shí)現(xiàn)的主要功能有拖拉式的繪圖、圖形與JSON文件的雙向轉(zhuǎn)換以及圖形與Java代碼框架的轉(zhuǎn)換，之后要進(jìn)一步加大研究，爭(zhēng)取將DSTool迭代成完整的且有實(shí)際意義的軟件開(kāi)發(fā)工具。