:::

找尋JavaScript的UML塑模工具中

image

UML物件導向程式語言用來塑模(modeling)的好工具,但是卻很少應用在同樣也是物件導向的JavaScript上。

最近心血來潮又摸起了JavaScript,碰巧看到了一些與UML相關的契機,於是花點時間來找找看有沒有JavaScript與UML塑模之間的解決方案。

可惜,找到現在還是達不到我的理想成果。這篇就記錄我找到現在的一些過程與發現,以及我覺得該怎樣做會是最好的理想成果。


StarUML產生的程式碼樣板

image

在我撰寫論文系統的時候,最常用的UML塑模工具就是開放原始碼的自由軟體StarUML。那個時候嘗試用StarUML輸出JavaScript程式,但是失敗了。

現在有人開發出了適合JavaScript的樣板(template)提供下載,我嘗試看看,其實結果也挺為理想。安裝方法是將上述網頁中的樣板檔案下載解壓縮到[StarUML安裝資料夾]/modules\staruml-generator\templates之中。

image

你可以在StarUML中繪製class。

image

然後利用StarUML Generator功能,選擇Javascript樣板,

image

中間我略過一些步驟,不是很重要,總之就是產生程式碼。StarUML會在指定的資料夾位置產生「Book.js」的檔案,以下是檔案的內容:

/**
*@namespace 
*/


/**
* 
* 
* @author Marten Olgaard
* @created 17/9/2012
* @copyright Adnuvo
* @todo 
* @class Book
*/
var Book = Book || {};
Book = {
        
    /**
    * 
    * @property {*} pages
    */
    pages : null,
    /**
    * 
    * @property {*} height
    */
    height : null,
    /**
    * 
    * @property {*} width
    */
    width : null,
    /**
    * 
    * @property {*} length
    */
    length : null,
    /**
    * 
    * @property {*} weight
    */
    weight : null,
        
    /**
    * 
    * @method open
    */
    open : function(){
        
        //Stub code - to be removed
        alert("the function 'open' has been called  ")
        
    },
    /**
    * 
    * @method close
    */
    close : function(){
        
        //Stub code - to be removed
        alert("the function 'close' has been called  ")
        
    }
        
}

好的,現在我們看到的是個物件導向寫法的JavaScript程式語言,而且有著良好的註解。

儘管很多細節上的問題我還沒有深入去探究,像是繼承要怎麼實作?(JavaScript的繼承有很多種樣式)介面(interface)又要如何實作呢?更重要的是,要產生怎樣的JavaScript程式內容,才能讓IDE正確地剖析呢?

這些問題可以透過修改樣板檔案的內容來調整。要憑空打造一個UML轉換成JavaScript的樣板對我來說難度太高,不過要修改別人寫好的內容,這倒不是太大的問題。

儘管如此,只是透過樣板來將UML轉換成JavaScript,這樣是不夠的。我需要的是能夠直接整合IDE的UML工具,可以畫UML來擬定程式架構,又可以將程式轉換成UML來檢視各程式之間的關係,所以我又繼續找了下去。

整合Eclipse的plugin: JS/UML

point-region-uml

整合IDE的UML工具真的存在嗎?萬能的Eclipse還真的有JS/UML這個plugin,而以Eclipse為基礎的Aptana Studio 2也當然可以使用……雖然我是這樣想的,實際上到目前為止我只有成功安裝過JS/UML 0.8.2版而已。

如果安裝0.8.4版本的話,就會出現以下的錯誤訊息:

Your original request has been modified.
  "JS/UML" is already installed, so an update will be performed instead.
Cannot complete the install because one or more required items could not be found.
  Software being installed: JS/UML 0.8.4 (org.jsuml.eclipse.feature.group 0.8.4)
  Missing requirement: JS/UML 0.8.4 (org.jsuml.eclipse.feature.group 0.8.4) requires 'org.eclipse.uml2.uml 3.2.100' but it could not be found

image

安裝了JS/UML,並開啟他提供的範例檔案來看看之後,會發現它並沒有出現想像中的類別圖(Class Diagram),而是XML的樹狀結構,如下圖。

image

雖然這樣的樹狀結構也可以當成釐清程式架構的一種簡單工具了,不過修改節點內容之後,似乎還是無法修改檔案?這之間的對應我還摸得不夠透徹就是了。


結語:JavaScript真的有理想的UML工具嗎?

就我目前所知,理想的UML工具應該要能做到與程式碼之間的雙向轉換,並有著正確的註解供IDE剖析。

不過,在考慮是否有這種UML工具之前,我卻碰到了一個更根本的問題:JavaScript真的能夠這樣順利地透過UML塑模嗎?畢竟JavaScript並非完整的物件導向,其運作也跟傳統的C或Java有所差異,到目前為止坊間討論UML的書也沒有一本是以JavaScript為主題。我想,這個疑惑應該會隨著我對UML的認知,而逐漸豁然開朗吧。

不知道大家還有沒有什麼推薦的JavaScript輔助工具呢?歡迎提出你的看法喔!

0 意見:

留言工具: