概述
界面對象化是指以對象的思想去描述頁面元素以完成UI的集成和開發(fā)，以使UI原型能夠映射或轉化為可運行的系統(tǒng)原型，提升系統(tǒng)開發(fā)的效率，避免大量的花費時間在UI的集成、維護上。
產生的原因
在傳統(tǒng)的開發(fā)過程中，特別是Web開發(fā)過程中，從UI原型轉化為系統(tǒng)原型的過程總是要耗費特別長的時間，在系統(tǒng)的整個開發(fā)過程中通常在UI集成和維護上往往是耗費最長的時間，而很多時候更是由于UI集成了動態(tài)性質而導致了UI修改、代碼調試的困難。
為什么會出現(xiàn)這樣的現(xiàn)象呢？這樣的現(xiàn)象產生的原因無非是UI原型和系統(tǒng)原型之間存在的差異造成的，UI原型是一種靜態(tài)原型，系統(tǒng)原型是一種動態(tài)原型，在UI原型這種靜態(tài)的原型中只描述了系統(tǒng)的靜態(tài)結構、顯示和行為(html、css、js)，而對于系統(tǒng)原型來說它需要的是一種動態(tài)結構，這個時候要做的無疑就是怎么樣讓UI原型中的靜態(tài)結構、顯示和行為變?yōu)閯討B(tài)的，造成這個的原因主要是因為html的結構元素是無法表達出其動態(tài)性質的，當然，這不能去怪Html，它本來就只負責靜態(tài)的。
但對于開發(fā)人員來說，這個時候其實要做的是就是讓頁面的元素能夠動態(tài)化，界面對象化就是解決它的一種不錯的辦法，對象化使得界面中的所有元素都可以作為對象來看，從OO角度去看，可以得出界面中的任何元素在動態(tài)方面擁有兩個特性，就是動態(tài)的結構和動態(tài)的行為，動態(tài)的結構是指這個元素將會改變或增加原有Html界面的結構，如一個用戶列表的表格，這就是一個典型的動態(tài)結構，表格中的結構會隨著用戶列表信息的不同而不斷的增加tr/td這樣的結構元素；動態(tài)的行為是指界面元素的一種動態(tài)交互行為，簡單的比如在下拉選擇用戶所在部門的時候就是一種下拉的動態(tài)交互行為(這個也可以視為靜態(tài)的)，另外一個更典型的例子是表單提交后與后臺交互的此種交互行為。
實現(xiàn)的方法
如今Web開發(fā)框架都在重視這方面，都在想辦法讓html靜態(tài)過程轉化為動態(tài)過程變得更為簡單的方法，應該說象jsf、tapestry這些的東西都在這方面做出了努力，jsf來說視圖更為強調開發(fā)視角，但在UI集成方面仍然是非常麻煩；tapestry來說則表現(xiàn)的更為好一些，它更為注重避免對于html靜態(tài)結構的侵入。
為了讓html靜態(tài)結構能表現(xiàn)出動態(tài)結構的展現(xiàn)和交互的特性，這個時候設計模式中的decorator模式就顯得很適合了，要做的無非就是把一種靜態(tài)的結構重新裝修一把，想想decorator模式，它不會對原有的對象產生什么影響，而同時又可表達出更為豐富的行為。
既然是decorator，那么實現(xiàn)界面對象化的方法也就浮現(xiàn)出來了，在采用界面對象化的思想上，界面所有元素都可以視為對象，只是這些對象又有可能是由其他的對象組合而成，如table是一個對象，其中的tr、td也是對象，這個在js中深有體現(xiàn)。
界面的結構、顯示以及行為分離的方式無疑是非常值得學習的，在描述一個界面對象的動態(tài)特性的時候這點也是同樣需要保持的，界面對象的動態(tài)特性主要就是動態(tài)結構和動態(tài)行為，對于動態(tài)結構可以采用類加模板的方式來實現(xiàn)，而對于動態(tài)行為在現(xiàn)在我們則可以采用js來完全達成(前臺交互js本來就可做到，后臺交互則可通過ajax的方式來實現(xiàn))。
說的可能不是很清楚，舉例如下：
如一個用戶的列表的html可能是這樣：
<table id="userstable">
</table>
在真實的系統(tǒng)中這個部分必然是動態(tài)的展現(xiàn)，需要改變原有的結構，這個時候采用界面對象化的方法我們可以這么去做：
在一個獨立的xml文件中進行這樣的描述：
<element id="userstable"
bindhql="from User u where u.id desc"
showstyle="userstablestyle"/>
<component id="userstablestyle"
ref-component="table"
showcolumns="user.id=序號;user.name=用戶名"/>
這是動態(tài)結構的實現(xiàn)方法的一個示例，可以看到在這樣的情況下對原有的html是沒有任何的侵入的。
再舉一個動態(tài)行為的例子：
如一個新增用戶表單中有一個保存的按鈕，需要提交到后臺執(zhí)行動作，并根據(jù)動作執(zhí)行的結果來控制頁面的流轉，html中可能是這樣：
<button id="saveBtn" name="saveBtn" value="保存">
同樣的，在一個獨立的xml中進行這樣的描述：
<element id="saveBtn"
actionType="pageflow"
action="saveUser"/>
<action id="saveUser"
ref-action="DataSave">
<result name="success">userstable</result>
<result name="error">saveusererror</result>
</action>
這樣就完成了將html中靜態(tài)元素decorator成一種具備動態(tài)特性的元素的過程。
界面對象化后界面組件化自然也就可以形成了，也就是如今流行的UI Component，在這樣的一種實現(xiàn)方法下我們甚至可以想象在UI進行大變動的情況下根據(jù)無需開發(fā)人員做任何改動系統(tǒng)就仍然可以運轉，這必然會大大的減少UI集成和維護的工作量；但UI Component在目前也是會帶來一些問題的，就是在如今很容易將UI設計圖轉為html的情況下，反而因為使用了UI Component造成了很難達到UI設計的效果，就像是CS結構一樣，CS結構中的元素為了做到和UI設計一樣的效果無疑是要付出很大的努力的，不過在web上的UI Component還是比CS占有更多的優(yōu)勢，因為它可以通過css來控制顯示，仍然看好Web的開發(fā)方式，雖然Web的交互方式現(xiàn)在離cs的交互方式還有一定的差距，但就顯示效果來講Web是更容易做的比cs結構好的。