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