找尋JavaScript的UML塑模工具中
找尋JavaScript的UML塑模工具中
UML是物件導向程式語言用來塑模(modeling)的好工具，但是卻很少應用在同樣也是物件導向的JavaScript上。
最近心血來潮又摸起了JavaScript，碰巧看到了一些與UML相關的契機，於是花點時間來找找看有沒有JavaScript與UML塑模之間的解決方案。
可惜，找到現在還是達不到我的理想成果。這篇就記錄我找到現在的一些過程與發現，以及我覺得該怎樣做會是最好的理想成果。
StarUML產生的程式碼樣板
在我撰寫論文系統的時候，最常用的UML塑模工具就是開放原始碼的自由軟體StarUML。那個時候嘗試用StarUML輸出JavaScript程式，但是失敗了。
現在有人開發出了適合JavaScript的樣板(template)提供下載，我嘗試看看，其實結果也挺為理想。安裝方法是將上述網頁中的樣板檔案下載解壓縮到[StarUML安裝資料夾]/modules\staruml-generator\templates之中。
你可以在StarUML中繪製class。
然後利用StarUML Generator功能，選擇Javascript樣板，
中間我略過一些步驟，不是很重要，總之就是產生程式碼。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
整合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
安裝了JS/UML，並開啟他提供的範例檔案來看看之後，會發現它並沒有出現想像中的類別圖(Class Diagram)，而是XML的樹狀結構，如下圖。
雖然這樣的樹狀結構也可以當成釐清程式架構的一種簡單工具了，不過修改節點內容之後，似乎還是無法修改檔案？這之間的對應我還摸得不夠透徹就是了。
結語：JavaScript真的有理想的UML工具嗎？
就我目前所知，理想的UML工具應該要能做到與程式碼之間的雙向轉換，並有著正確的註解供IDE剖析。
不過，在考慮是否有這種UML工具之前，我卻碰到了一個更根本的問題：JavaScript真的能夠這樣順利地透過UML塑模嗎？畢竟JavaScript並非完整的物件導向，其運作也跟傳統的C或Java有所差異，到目前為止坊間討論UML的書也沒有一本是以JavaScript為主題。我想，這個疑惑應該會隨著我對UML的認知，而逐漸豁然開朗吧。
不知道大家還有沒有什麼推薦的JavaScript輔助工具呢？歡迎提出你的看法喔！
(more...)
Comments