<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    posts - 5, comments - 16, trackbacks - 0, articles - 0

    本文著重討論的是具有RIA特征的Web應(yīng)用。例如目前比較流行的的Ajax類Web應(yīng)用。傳統(tǒng)的基于純HTML的Web應(yīng)用不在本文討論之列。

    隨著Ajax的升溫,開(kāi)發(fā)人員逐漸對(duì)Web應(yīng)用中的各種UI控件和開(kāi)發(fā)框架開(kāi)始有了越來(lái)越濃厚的興趣。目前所知的這方面的控件集或開(kāi)發(fā)框架可以說(shuō)是并不鮮見(jiàn)。筆者將這些產(chǎn)品大致分為兩個(gè)大類:離散控件集型和數(shù)據(jù)模型驅(qū)動(dòng)型。這兩個(gè)詞大家應(yīng)該很陌生,因?yàn)樗麄兌际潜扇俗栽斓摹?br />
    離散控件集型 - 此類產(chǎn)品以提供一系列相對(duì)獨(dú)立的界面控件為主要目的??丶念愋捅容^全面,例如搭建Web應(yīng)用常見(jiàn)的各種Grid、Tree、Menu、ToolBar、Window等。不過(guò)此類產(chǎn)品一般不會(huì)過(guò)多的考慮界面中的數(shù)據(jù)和操作邏輯的封裝,至多只會(huì)提供相對(duì)簡(jiǎn)單的靜態(tài)數(shù)據(jù)綁定*。我認(rèn)為此類產(chǎn)品的主要出發(fā)點(diǎn)是改善Web應(yīng)用的界面表現(xiàn)能力,同時(shí)借助自帶的SDK提供一種更加規(guī)范的開(kāi)發(fā)模式。
    目前我所知的大部分產(chǎn)品似乎都屬于這一類別。例如: backbase、qooxdoo、NetAdventage、bindows等。
    Backbase實(shí)例中心:
    http://www.backbase.com/demos/explorer

    數(shù)據(jù)模型驅(qū)動(dòng)型 - 此類產(chǎn)品除了要提供一組比較好用的UI控件集之外,更會(huì)提供對(duì)界面中數(shù)據(jù)模型的管理功能。其UI控件以數(shù)據(jù)敏感控件為主。數(shù)據(jù)敏感控件可以通過(guò)于數(shù)據(jù)模型的綁定來(lái)實(shí)現(xiàn)對(duì)表現(xiàn)層中數(shù)據(jù)的展示和控制。這種數(shù)據(jù)綁定可成為動(dòng)態(tài)數(shù)據(jù)綁定*??梢哉f(shuō)這一類產(chǎn)品的主要出發(fā)點(diǎn)除改善Web應(yīng)用的界面表現(xiàn)能力外,也非常注重提供一種快速開(kāi)發(fā)的模式。
    好的數(shù)據(jù)模型驅(qū)動(dòng)型的開(kāi)發(fā)框架應(yīng)該首先包含離散控件集中的各種功能,它事實(shí)上是一種相對(duì)于單純的UI控件集而言更高層次的抽象。
    o_binding.png
    這種模式其實(shí)在以前CS下非常常見(jiàn),例如VB、Delphi等RAD開(kāi)發(fā)工具提交數(shù)據(jù)庫(kù)應(yīng)用開(kāi)發(fā)模式都屬于這種類型。不過(guò)到了BS下人們似乎都忘記這種開(kāi)發(fā)模式。可能是因?yàn)椴粔蛞?jiàn)多識(shí)廣,目前筆者所知的此類產(chǎn)品只有dorado。
    dorado的示例中心:
    http://sample.bstek.com

    對(duì)于上面提到的兩種數(shù)據(jù)綁定方式的解釋如下:

    靜態(tài)數(shù)據(jù)綁定 – 是指在控件可以根據(jù)指派給他的數(shù)據(jù)源(往往是XML數(shù)據(jù)源或簡(jiǎn)單的數(shù)組)自動(dòng)的提取并展示其中的數(shù)據(jù)。這種提取過(guò)程是主動(dòng)完成的,當(dāng)提取過(guò)程結(jié)束后控件無(wú)法繼續(xù)感知數(shù)據(jù)源中數(shù)據(jù)的變化。這事實(shí)上是從控件到數(shù)據(jù)源的拉模式(Pull Mode)。

    動(dòng)態(tài)數(shù)據(jù)綁定 – 是指將控件以觀察者的角色注冊(cè)到數(shù)據(jù)源(往往是經(jīng)過(guò)封裝的私有對(duì)象)中。數(shù)據(jù)源成為被觀察者。當(dāng)數(shù)據(jù)源中的數(shù)據(jù)或狀態(tài)發(fā)生改變時(shí)會(huì)主動(dòng)通知所有觀察者(即綁定的控件),然后再由控件自動(dòng)提取數(shù)據(jù)完成展現(xiàn)的更新。這樣一旦綁定建立以后控件就可以實(shí)時(shí)的體現(xiàn)數(shù)據(jù)源中的最新變化。如果用戶利用這些控件對(duì)數(shù)據(jù)或狀態(tài)做了改變,那么這種改變自然也會(huì)通過(guò)數(shù)據(jù)源再實(shí)時(shí)的通知給所有其它相關(guān)的控件。這事實(shí)上是從數(shù)據(jù)源到控件的推模式(Push Mode)。
    ?
    回到關(guān)于離散控件集型和數(shù)據(jù)模型驅(qū)動(dòng)型的討論。這兩種開(kāi)發(fā)框架都有這自己的適用面。筆者認(rèn)為離散控件集型的開(kāi)發(fā)框架更加適合與一些像論壇這樣更加注重展現(xiàn)的應(yīng)用。而對(duì)于那些具有明顯數(shù)據(jù)庫(kù)應(yīng)用特性的的Web應(yīng)用(例如MIS類應(yīng)用),則數(shù)據(jù)模型驅(qū)動(dòng)型的開(kāi)發(fā)框架更能發(fā)揮它的優(yōu)勢(shì)。
    得出以上結(jié)論的原因是我認(rèn)為數(shù)據(jù)模型驅(qū)動(dòng)型的開(kāi)發(fā)框架能夠使開(kāi)發(fā)人員將更多的精力投入到界面所需要實(shí)現(xiàn)的更能當(dāng)中,至少在制作頁(yè)面的前期階段不必太多的關(guān)注界面的表現(xiàn)形式。同時(shí)如果能夠?qū)⒏嗟慕缑娌僮鬟壿嫹庋b到數(shù)據(jù)模型對(duì)象中,就可以保證在后期當(dāng)最終用戶提出界面的修改要求時(shí),開(kāi)發(fā)人員可以用更小的代價(jià)來(lái)完成對(duì)界面的重構(gòu)。

    讓我們來(lái)具體分析兩個(gè)場(chǎng)景:

    場(chǎng)景1:一個(gè)用慣了CS應(yīng)用的用戶要求開(kāi)發(fā)一個(gè)界面來(lái)維護(hù)公司目前擁有的所有書(shū)籍。為了方便的完成對(duì)所有書(shū)籍的CRUD操作,用戶希望以一個(gè)Grid控件來(lái)完成所有這些操作,同時(shí)用戶希望能夠在界面批量的完成一系列C、U、D操作之后一次性的對(duì)數(shù)據(jù)進(jìn)行保存。每本書(shū)籍都有一個(gè)由系統(tǒng)自動(dòng)分配的編碼作為主鍵,因此用戶不需要看到書(shū)籍的編碼。
    分析:如果我們現(xiàn)在只有一個(gè)離散的Grid控件。要完成上述功能我們還需要做以下一些工作:

  • 由于編碼不在Grid中顯示,因此找到一個(gè)辦法能夠管理每本書(shū)籍的編碼。
  • 由于客戶端需要緩存用戶的一系列C、U、D操作然后作批量的提交處理,因此必須做一些工作以便記錄下哪些書(shū)被修改了、哪些是新增的、哪些被刪除了。
  • 在提交時(shí)將所有的數(shù)據(jù)修改信息抽取出來(lái)組裝成可用于提交的格式。

    可見(jiàn)如果使用一個(gè)離散的Grid控件來(lái)制作這個(gè)界面,我們還必須要做不少工作。如果我們能夠選擇一個(gè)數(shù)據(jù)模型驅(qū)動(dòng)型的開(kāi)發(fā)框架,上面提到的很多功能框架中往往已經(jīng)具備。開(kāi)發(fā)人員要做的往往只是聲明好一個(gè)數(shù)據(jù)模型然后把它跟Grid關(guān)聯(lián)起來(lái)。如果您以前使用過(guò)VB或Delphi這一類開(kāi)發(fā)功能,應(yīng)該不難想像這個(gè)過(guò)程。

    場(chǎng)景2:想像一個(gè)用戶信息的錄入界面,如下圖。使用者需要輸入用戶的身份證,由于什么證的號(hào)碼中包含了很多信息,系統(tǒng)完全有可能從其中解析出出生日期和性別這樣的信息。因此為了方便錄入,我們可以讓表單中的出生日期和性別這兩個(gè)欄位支持自動(dòng)填入缺省值的功能,只要用戶錄入了身份證號(hào)碼,就可以馬上自動(dòng)填充上述兩個(gè)欄位。

    o_user_form1.png
    ?
    在基于離散控件的編程方式中,我們需要知道身份證、出生日期、性別這三個(gè)編輯框的id,并針對(duì)他們進(jìn)行編程。其代碼形式可能如下:

    var?id? = ?inputId.getValue();? // ?獲得身份證號(hào)碼
    ?? // ?對(duì)身份證進(jìn)行解析
    inputBrithday.setValue(brithday);? // ?為出生日期設(shè)置缺省值
    radioGroupSex.setValue(sex);? // ?為性別設(shè)置缺省值

    在基于數(shù)據(jù)模型驅(qū)動(dòng)型框架的編程方式中,我們并不需要關(guān)注界面上擺放了什么控件,只需要知道關(guān)注如何操作數(shù)據(jù)模型對(duì)象。其代碼形式可能如下:

    var?id? = ?dmUser.getValue( " id " );? // ?從數(shù)據(jù)模型(dmUser)中提取身份證號(hào)碼
    ?? // ?對(duì)身份證進(jìn)行解析
    dmUser.setValue( " birthday " ,?brithday);? // ?為出生日期設(shè)置缺省值
    dmUser.setValue( " sex " ,?sex);? // ?為性別設(shè)置缺省值

    可見(jiàn)在這種開(kāi)發(fā)模式中我們的代碼幾乎完全針對(duì)數(shù)據(jù)模型展開(kāi),當(dāng)我們?yōu)閐mUser中的brithday和sex賦值后,相應(yīng)的數(shù)據(jù)敏感控件會(huì)立刻自動(dòng)顯示出這些的數(shù)據(jù)。這樣的編程模式可以讓代碼有高度的一致性,當(dāng)我們制作復(fù)雜的用戶界面時(shí),可以不需要記住諸多的控件id。
    進(jìn)一步假設(shè)。如果用戶有一天覺(jué)得這樣的界面并不方便對(duì)多筆數(shù)據(jù)進(jìn)行方便的維護(hù),而要求對(duì)界面進(jìn)行如下調(diào)整。在刪除原先的表單,利用一個(gè)Grid控件來(lái)對(duì)用戶信息進(jìn)行維護(hù)。
    o_user_form2.png
    如果我們的編程方式是基于離散控件的,那么我們不可避免的要對(duì)先前編寫那段代碼做一些調(diào)整了。我需要將那段代碼移植到表格當(dāng)中。
    但是如果我們的編程方式是基于數(shù)據(jù)模型驅(qū)動(dòng)型框架的,那么我們要做的只是將界面上的表單刪掉,然后在放置一個(gè)與現(xiàn)有數(shù)據(jù)模型綁定的Grid控件。至于那段代碼,它完全不需要做任何變動(dòng)。

    綜上可見(jiàn),在MIS類Web應(yīng)用的表現(xiàn)層開(kāi)發(fā)方面。數(shù)據(jù)模型驅(qū)動(dòng)型的開(kāi)發(fā)框架可以為開(kāi)發(fā)人員帶來(lái)更多的實(shí)惠。不知道隨著時(shí)間的推移這一類的開(kāi)發(fā)框架會(huì)不會(huì)豐富起來(lái)?

  • Feedback

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-03 14:19 by wen3062
    能否寫個(gè)小例子,聽(tīng)著似乎有點(diǎn)明白,如果有個(gè)小例子就更好了。

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-03 20:29 by Benny Bao
    @wen3062
    都是理論性的東西,寫個(gè)例子不太容易??纯催@個(gè)現(xiàn)成的吧!
    http://61.151.239.187/dorado5/new-feature/brich.jsp
    這個(gè)界面上既有表格又有表單、還有一個(gè)工具條。本來(lái)都是不相關(guān)的控件,但是由于它們綁定了同一個(gè)數(shù)據(jù)模型,所以在操作時(shí)它們會(huì)時(shí)刻保持同步。

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-05 09:45 by 劉明
    例子看了,確實(shí)有趣,但就是有點(diǎn)慢。而且最重要的是網(wǎng)絡(luò)不適合通知者方式。這個(gè)好像有點(diǎn)像mvc,但根據(jù)網(wǎng)絡(luò)的限制mvc無(wú)法全部實(shí)現(xiàn)?,F(xiàn)在利用Ajax雖然可以實(shí)現(xiàn),但想想網(wǎng)絡(luò)消耗什么的,是不是有點(diǎn)得不償失呢?


    我是個(gè)新手,很多的概念什么的也比較生,發(fā)點(diǎn)個(gè)人見(jiàn)解,不要見(jiàn)怪。

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-05 11:16 by BennyBao
    @劉明 "但想想網(wǎng)絡(luò)消耗什么的,是不是有點(diǎn)得不償失呢?"
    你說(shuō)的應(yīng)該是網(wǎng)絡(luò)流量吧?Ajax恰恰是一種可以幫助網(wǎng)絡(luò)應(yīng)用節(jié)約流量的技術(shù)。盡管在第一次訪問(wèn)時(shí)可能會(huì)帶來(lái)比較大的流量(主要緣于需要下載更多的JS庫(kù)),但是從總體而言卻恰恰是能夠節(jié)約流量的(主要緣于減少了刷新頻率)。關(guān)于這一點(diǎn)詳細(xì)的解釋網(wǎng)上有很多資料可以參考。我想你之所以感覺(jué)那個(gè)例子慢部分原因也是因?yàn)槟闶堑谝淮卧L問(wèn)那個(gè)站點(diǎn),需要下載一些JS的包。
    另外:在Client端實(shí)現(xiàn)MVC本身跟AJAX并沒(méi)有太大的關(guān)系。Client端MVC主要解決的是開(kāi)發(fā)易用性、和可維護(hù)性方面的問(wèn)題;而AJAX主要解決的是用戶體驗(yàn)的問(wèn)題。

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-05 11:48 by BennyBao
    補(bǔ)充:不要把文中提到的"動(dòng)態(tài)數(shù)據(jù)綁定"中的Push Mode理解成是由Server端的數(shù)據(jù)模型通知Client端的控件,而是由Client端的數(shù)據(jù)模型通知Client端的控件。而至于Client端的數(shù)據(jù)模型如何與Server交互不在本文的討論中。

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-05 15:15 by 劉明
    嗯嗯,看了看前端MVC的大概意思,意思上感覺(jué)應(yīng)該不錯(cuò),開(kāi)始我理解為要跟server不斷的交互了,流量還不算大問(wèn)題,但不斷的請(qǐng)求和回應(yīng)可能比較麻煩,既然不是很牽扯server,這個(gè)問(wèn)題就沒(méi)什么了。但確實(shí)好像有點(diǎn)慢,不是剛進(jìn)入那會(huì)兒。我用了幾分鐘,怎么說(shuō)呢,有點(diǎn)鈍的感覺(jué)??赡芨鶭avaScript有關(guān)吧(代碼太多啥的)。

    也就是說(shuō)整體上感覺(jué)是MVC-請(qǐng)求/回應(yīng)-MVC,大概是這個(gè)樣子。但用JavaScript的前臺(tái)開(kāi)發(fā)代碼量應(yīng)該不算小。感覺(jué)增加了不少的量,但得到的東西不是很多的樣子。

    # 瑞道公司的產(chǎn)品dorado那位老大用過(guò)?  回復(fù)  更多評(píng)論   

    2006-09-05 15:22 by 澀味小刀
    看起來(lái)不錯(cuò),也看到一些開(kāi)放源碼的跡象,不知道是不是真的能夠用起來(lái)

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-05 15:24 by 劉明
    補(bǔ)充兩句:也許用xml做模型,JavaScript做控制,html做顯示,也是件不錯(cuò)的事情(瞎想的,如果跟你說(shuō)的雷同可以無(wú)視)。

    其實(shí)我個(gè)人覺(jué)得,如果真有更高的交互需求的話,用程序是否更好些?我個(gè)人就在考慮拋棄瀏覽器的一些應(yīng)用,改為軟件的實(shí)現(xiàn)。

    # re: [原創(chuàng)] Web表現(xiàn)層的Client端設(shè)計(jì)模式探討  回復(fù)  更多評(píng)論   

    2006-09-05 15:52 by liping
    這個(gè)以前的產(chǎn)品。extra我用過(guò),怎么說(shuō)吧,還可以吧。出來(lái)找工作很少人用,以前用它做過(guò)大項(xiàng)目,體檢中心的軟件。
    主站蜘蛛池模板: 久久久高清免费视频 | 亚洲gv白嫩小受在线观看| 亚洲精品精华液一区二区| 韩国免费一级成人毛片| 亚洲免费视频网址| 免费观看激色视频网站(性色)| 亚洲国产综合专区在线电影| 免费国产叼嘿视频大全网站| 亚洲v高清理论电影| 99久在线国内在线播放免费观看| 亚洲福利视频一区| 18禁美女裸体免费网站| 亚洲精品午夜久久久伊人| 最近高清中文字幕无吗免费看| 亚洲午夜成激人情在线影院| 国产又大又粗又长免费视频| 亚洲综合一区无码精品| 日本xxwwxxww在线视频免费| 日韩毛片在线免费观看| 国产亚洲成归v人片在线观看| a毛片全部播放免费视频完整18| 亚洲福利在线观看| 曰批全过程免费视频在线观看| 亚洲欧美日韩中文无线码| 亚洲成a人片在线观看老师| 国产精品青草视频免费播放| 亚洲AV无码久久精品色欲| 每天更新的免费av片在线观看| 亚洲午夜精品一区二区麻豆 | 亚洲成AV人网址| 一级做a爱片特黄在线观看免费看| 亚洲精品少妇30p| 在线看片韩国免费人成视频| 亚洲av无一区二区三区| 在线亚洲午夜理论AV大片| 最近免费字幕中文大全视频| AV激情亚洲男人的天堂国语| 亚洲AV成人片色在线观看高潮| 在线观看无码AV网站永久免费 | 国产高清在线免费| 青青操免费在线视频|