:::

找尋JavaScript的UML塑模工具中

9月 17, 2012 , , 0 Comments Edit Copy Download

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輔助工具呢？歡迎提出你的看法喔！

訂閱： 張貼留言 (Atom)