找尋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