<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

    [原創] Web表現層的Client端設計模式探討

    Posted on 2006-09-03 00:26 BennyBao 閱讀(2226) 評論(9)  編輯  收藏 所屬分類: AJAX

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

    隨著Ajax的升溫,開發人員逐漸對Web應用中的各種UI控件和開發框架開始有了越來越濃厚的興趣。目前所知的這方面的控件集或開發框架可以說是并不鮮見。筆者將這些產品大致分為兩個大類:離散控件集型和數據模型驅動型。這兩個詞大家應該很陌生,因為他們都是鄙人自造的。

    離散控件集型 - 此類產品以提供一系列相對獨立的界面控件為主要目的。控件的類型比較全面,例如搭建Web應用常見的各種Grid、Tree、Menu、ToolBar、Window等。不過此類產品一般不會過多的考慮界面中的數據和操作邏輯的封裝,至多只會提供相對簡單的靜態數據綁定*。我認為此類產品的主要出發點是改善Web應用的界面表現能力,同時借助自帶的SDK提供一種更加規范的開發模式。
    目前我所知的大部分產品似乎都屬于這一類別。例如: backbase、qooxdoo、NetAdventage、bindows等。
    Backbase實例中心:
    http://www.backbase.com/demos/explorer

    數據模型驅動型 - 此類產品除了要提供一組比較好用的UI控件集之外,更會提供對界面中數據模型的管理功能。其UI控件以數據敏感控件為主。數據敏感控件可以通過于數據模型的綁定來實現對表現層中數據的展示和控制。這種數據綁定可成為動態數據綁定*。可以說這一類產品的主要出發點除改善Web應用的界面表現能力外,也非常注重提供一種快速開發的模式。
    好的數據模型驅動型的開發框架應該首先包含離散控件集中的各種功能,它事實上是一種相對于單純的UI控件集而言更高層次的抽象。
    o_binding.png
    這種模式其實在以前CS下非常常見,例如VB、Delphi等RAD開發工具提交數據庫應用開發模式都屬于這種類型。不過到了BS下人們似乎都忘記這種開發模式。可能是因為不夠見多識廣,目前筆者所知的此類產品只有dorado。
    dorado的示例中心:
    http://sample.bstek.com

    對于上面提到的兩種數據綁定方式的解釋如下:

    靜態數據綁定 – 是指在控件可以根據指派給他的數據源(往往是XML數據源或簡單的數組)自動的提取并展示其中的數據。這種提取過程是主動完成的,當提取過程結束后控件無法繼續感知數據源中數據的變化。這事實上是從控件到數據源的拉模式(Pull Mode)。

    動態數據綁定 – 是指將控件以觀察者的角色注冊到數據源(往往是經過封裝的私有對象)中。數據源成為被觀察者。當數據源中的數據或狀態發生改變時會主動通知所有觀察者(即綁定的控件),然后再由控件自動提取數據完成展現的更新。這樣一旦綁定建立以后控件就可以實時的體現數據源中的最新變化。如果用戶利用這些控件對數據或狀態做了改變,那么這種改變自然也會通過數據源再實時的通知給所有其它相關的控件。這事實上是從數據源到控件的推模式(Push Mode)。
    ?
    回到關于離散控件集型和數據模型驅動型的討論。這兩種開發框架都有這自己的適用面。筆者認為離散控件集型的開發框架更加適合與一些像論壇這樣更加注重展現的應用。而對于那些具有明顯數據庫應用特性的的Web應用(例如MIS類應用),則數據模型驅動型的開發框架更能發揮它的優勢。
    得出以上結論的原因是我認為數據模型驅動型的開發框架能夠使開發人員將更多的精力投入到界面所需要實現的更能當中,至少在制作頁面的前期階段不必太多的關注界面的表現形式。同時如果能夠將更多的界面操作邏輯封裝到數據模型對象中,就可以保證在后期當最終用戶提出界面的修改要求時,開發人員可以用更小的代價來完成對界面的重構。

    讓我們來具體分析兩個場景:

    場景1:一個用慣了CS應用的用戶要求開發一個界面來維護公司目前擁有的所有書籍。為了方便的完成對所有書籍的CRUD操作,用戶希望以一個Grid控件來完成所有這些操作,同時用戶希望能夠在界面批量的完成一系列C、U、D操作之后一次性的對數據進行保存。每本書籍都有一個由系統自動分配的編碼作為主鍵,因此用戶不需要看到書籍的編碼。
    分析:如果我們現在只有一個離散的Grid控件。要完成上述功能我們還需要做以下一些工作:

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

    可見如果使用一個離散的Grid控件來制作這個界面,我們還必須要做不少工作。如果我們能夠選擇一個數據模型驅動型的開發框架,上面提到的很多功能框架中往往已經具備。開發人員要做的往往只是聲明好一個數據模型然后把它跟Grid關聯起來。如果您以前使用過VB或Delphi這一類開發功能,應該不難想像這個過程。

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

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

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

    在基于數據模型驅動型框架的編程方式中,我們并不需要關注界面上擺放了什么控件,只需要知道關注如何操作數據模型對象。其代碼形式可能如下:

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

    可見在這種開發模式中我們的代碼幾乎完全針對數據模型展開,當我們為dmUser中的brithday和sex賦值后,相應的數據敏感控件會立刻自動顯示出這些的數據。這樣的編程模式可以讓代碼有高度的一致性,當我們制作復雜的用戶界面時,可以不需要記住諸多的控件id。
    進一步假設。如果用戶有一天覺得這樣的界面并不方便對多筆數據進行方便的維護,而要求對界面進行如下調整。在刪除原先的表單,利用一個Grid控件來對用戶信息進行維護。
    o_user_form2.png
    如果我們的編程方式是基于離散控件的,那么我們不可避免的要對先前編寫那段代碼做一些調整了。我需要將那段代碼移植到表格當中。
    但是如果我們的編程方式是基于數據模型驅動型框架的,那么我們要做的只是將界面上的表單刪掉,然后在放置一個與現有數據模型綁定的Grid控件。至于那段代碼,它完全不需要做任何變動。

    綜上可見,在MIS類Web應用的表現層開發方面。數據模型驅動型的開發框架可以為開發人員帶來更多的實惠。不知道隨著時間的推移這一類的開發框架會不會豐富起來?

  • Feedback

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

    2006-09-03 14:19 by wen3062
    能否寫個小例子,聽著似乎有點明白,如果有個小例子就更好了。

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

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

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

    2006-09-05 09:45 by 劉明
    例子看了,確實有趣,但就是有點慢。而且最重要的是網絡不適合通知者方式。這個好像有點像mvc,但根據網絡的限制mvc無法全部實現。現在利用Ajax雖然可以實現,但想想網絡消耗什么的,是不是有點得不償失呢?


    我是個新手,很多的概念什么的也比較生,發點個人見解,不要見怪。

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

    2006-09-05 11:16 by BennyBao
    @劉明 "但想想網絡消耗什么的,是不是有點得不償失呢?"
    你說的應該是網絡流量吧?Ajax恰恰是一種可以幫助網絡應用節約流量的技術。盡管在第一次訪問時可能會帶來比較大的流量(主要緣于需要下載更多的JS庫),但是從總體而言卻恰恰是能夠節約流量的(主要緣于減少了刷新頻率)。關于這一點詳細的解釋網上有很多資料可以參考。我想你之所以感覺那個例子慢部分原因也是因為你是第一次訪問那個站點,需要下載一些JS的包。
    另外:在Client端實現MVC本身跟AJAX并沒有太大的關系。Client端MVC主要解決的是開發易用性、和可維護性方面的問題;而AJAX主要解決的是用戶體驗的問題。

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

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

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

    2006-09-05 15:15 by 劉明
    嗯嗯,看了看前端MVC的大概意思,意思上感覺應該不錯,開始我理解為要跟server不斷的交互了,流量還不算大問題,但不斷的請求和回應可能比較麻煩,既然不是很牽扯server,這個問題就沒什么了。但確實好像有點慢,不是剛進入那會兒。我用了幾分鐘,怎么說呢,有點鈍的感覺。可能跟JavaScript有關吧(代碼太多啥的)。

    也就是說整體上感覺是MVC-請求/回應-MVC,大概是這個樣子。但用JavaScript的前臺開發代碼量應該不算小。感覺增加了不少的量,但得到的東西不是很多的樣子。

    # 瑞道公司的產品dorado那位老大用過?  回復  更多評論   

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

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

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

    其實我個人覺得,如果真有更高的交互需求的話,用程序是否更好些?我個人就在考慮拋棄瀏覽器的一些應用,改為軟件的實現。

    # re: [原創] Web表現層的Client端設計模式探討  回復  更多評論   

    2006-09-05 15:52 by liping
    這個以前的產品。extra我用過,怎么說吧,還可以吧。出來找工作很少人用,以前用它做過大項目,體檢中心的軟件。
    主站蜘蛛池模板: 国产h视频在线观看免费| 丝瓜app免费下载网址进入ios| 2020久久精品亚洲热综合一本| 亚洲精品影院久久久久久| 久久精品国产精品亚洲毛片| 亚洲视频在线观看| 亚洲自偷自拍另类图片二区| 亚洲成年人免费网站| 久久精品国产亚洲av麻豆蜜芽| 亚洲av乱码一区二区三区| 亚洲乱色伦图片区小说| 亚洲日韩在线中文字幕综合| 男人和女人高潮免费网站| 黄色短视频免费看| 九九美女网站免费| 日韩在线播放全免费| 成人免费视频88| 日产国产精品亚洲系列| 亚洲中文字幕无码不卡电影| 亚洲成AV人片在线观看无| 亚洲精品国产成人中文| 四虎必出精品亚洲高清| 另类图片亚洲校园小说区| 成在人线av无码免费高潮水| 黄页免费在线观看| 91高清免费国产自产| 永久免费无码网站在线观看| 亚洲国模精品一区| 久久精品国产亚洲AV麻豆~| 亚洲国产高清视频在线观看| 久久亚洲精品高潮综合色a片| 二级毛片免费观看全程| 日韩精品免费在线视频| 无码中文在线二区免费| 高清在线亚洲精品国产二区| 亚洲精品制服丝袜四区| 中文字幕乱码亚洲精品一区| 一本久久A久久免费精品不卡| 久久国产高潮流白浆免费观看| 日韩一级免费视频| 国产亚洲婷婷香蕉久久精品|