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

[原创] Web表现层的Client端设计模式探讨

Posted on 2006-09-03 00:26 BennyBao 阅读(2151) 评论(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我用过,怎么说吧,还可以吧。出来找工作很少人用,以前用它做过大项目,体检中心的软件。

    只有注册用户登录后才能发表评论。


    网站导航: