当前位置:首页 >  站长 >  网站运营 >  正文

复杂表单应用解耦 淘宝机票订单实践

 2012-11-08 14:31  来源: Taobaoued   我来投稿   yangyang的个人主页 撤稿纠错

  短视频,自媒体,达人种草一站服务

背景

在web应用中,复杂表单这类web应用富交互元素多,业务逻辑复杂,犬牙交错,且需求变化频繁。及容易成为晦涩和幽暗之地,也经常是各种代码坏味道的来源。针对这种典型的复杂应用,本文以淘宝机票订单为例提出一种架构模式梳理和消化表单带来的复杂性。

 

模块和组件划分

解决复杂表单的的第一步,划分模块。

概念上,为了复用和解耦方便,应将模块按照功能的内聚程度进行划分。强相关,频繁沟通和交互的功能应该归为一个模块。模块间尽量不存在依赖关系。也就是常说的“高内聚,低耦合”。

如下图所示,淘宝机票订单页面主要有被分为7个主要模块。

 

模块划分完毕,下一步确认组成模块的组件。

关于模块和组件的区分。一般按照以下三个纬度考量。

是否有业务逻辑参与。

是否包含html。

是否具备一定独立性。

“模块”,定义为一个包含”html”、”css(图片被认为是css的一部分)“、”javascript”的代码集。模块的应用方式多为通过web模板技术(如:velocity、freemarker、php)。因为包含了html,使得模块必须通过服务端合并加载并且最终推送到用户浏览器。此外,“模块”还是具备一定独立业务和交互的集合,最好可以被其他页面引用。良好的独立性也可以帮助协同开发,在实际开发中可多人可以并行开发多个独立模块,提高效率。

“组件”,定义为一个仅包含”css”和”javascript”的代码集。正因为不包含html,所以组件可通过javascript异步加载。因为这种可异步加载的特性,组件在复用方面的容易性远超模块。组件没有业务逻辑或者仅有少部分公共业务逻辑。业务逻辑越多,组件的可复用性就越低。

模块、组件间通讯

组件/模块划分的目的是将彼此间相对独立的功能分离,前面通过模块和组件的划分解决了分离问题。实际中,模块之间存在协作关系。模块间应以一种轻量的方式协作。一般的为了更好的分离和解耦,可以考虑用广播的方式在模块间沟通,考虑使用事件的方式在组件间通讯。

如下图所示,淘宝机票订单页面的数据流向。

 

不同模块在后期均有可能扩展小功能。例如不定期的活动优惠等。事件广播可以让不同模块/组件间新增功能影响面缩小。在淘宝机票订单中应用中,使用广播组件通讯主要用来完成以下意图。

 

1、知会。

知会的特性在于异步通讯。广播发起方只需要放出事件,无需等待其他关注者完成处理。称为异步广播。例如表单模块的内容变更需要知会到显示订单金额的模块,显示订单金额的模块接受事件后需要更改金额。

基于这种方式的通讯,各模块之需要做好自己的事情,外部关注的时间广播出去即可。异步广播还有一个好处是系统坚固性比较强,广播发送者不会因为时间监听者的使用不当而异常。

2、请求数据

例如,模块6(负责提交)需要在被点击后从模块2(乘机人表单),模块4(联系地址)、模块7(金额计算)。获取具体数据提交。请求数据的场景特性在于,广播发起者需要等待时间处理者完成处理后再继续下一步行为。称为同步广播。同步广播的应用有些费解。代码说明原理和应用。

基于此机制。提交模块只需要负责综合校验,浮层,网络请求及异常处理。而具体请求的内容由其他模块决定。对后续模块的扩充起到了很好的左右。

复杂组件拆分

模块和组件划分完毕后,可能会发现某些组件非常复杂,几乎占据了整个web应用一半以上的代码。这部分组件由纯js实现,并且使用javascript模块加载器加载。

同一个组件大量代码纠结在一起,最终还是会导致架构腐化。因此,复杂组件需要进一步拆分。在淘宝机票订单中,乘机人信息组件是一个复杂组件。如下图所示:

 

拆分这类输入型的复杂组件,一般来说有两种思路方式。

纵切,组件树型式。

将组件进一步划分为更细力度的输入组件,将每个输入域作为一个单独组件。最终形成一个组件树。

 

这样的组织方式结构严谨层级清晰,最大的优点是很容易支持字段扩展。

但考虑如下场景,为了尽量友好的提示用户,需要在输入域外的某处增加提示帮助。

 

这种场景下组件树的组织方式每次在面对变化时就会略显手忙脚乱。难道把每个地方出现的tip都座位独立组件看待吗?

字段级的适普性降低了适应细节调整的能力,付出的代价在于界面体验。

横切,AOP式。

将所有输入域抽象的看待为同一个组件。按照组件的富应用特性分层看待。在本例中,乘机人组件被按照从简单到复杂分为3个切面。

切面1-基础展现层只负责最基础的可完成输入的表单控件,及基础dom管理。

切面2-富展现层负责修饰base层的基础html控件,形成富输入控件。

切面3-校验层负责对base层的输入数据进行业务级校验。

未来,如果新增tip或者其他业务逻辑,增加一个新切面即可,完全或者很少需要修改老代码文件。

 

 

淘宝机票订单采用了AOP这种方式,从最终代码量上来看,可以看出复杂度被比较均衡的分布到不同文件中去。

 

同样,这种方式也有局限,如果需要扩展字段,那将是一个灾难,你有可能需要到每一个切面里面去做修改。

有句老话说的好,没有最优方案,只有最适合的解决方案,任何解决方案,都需要放到具体场景中去评判。事实上,对这个问题的进一步研究,可以发现以下规律。

对于一个组件、模块,同时追求简单设计、适普性(字段级扩充)、界面体验是不可能的。如果场景需要适应字段灵活扩展,那就采用纵切的模式。如果使用场景需字段确定,需要更多细节控制力度,那就横切,AOP式。如果两者都要兼顾,就需要引入复杂设计,综合运用横切和纵切。但是这样形成的最终设计会很复杂,开发和可维护性上会有代价付出。

 

对于淘宝机票这类互联网应用,使用了横切的方式来拆分组件,因为在这个场景中,字段的数量是相对固定的,而围绕固定数量字段的优化需求是层出不穷的。然而在企业内网应用或者网站后台web应用中,字段的变化会比较频繁。建议主要采用纵切的思路划分。

表单校验

有表单的地方就有校验。项目初期,校验的功能总是不起眼。等待项目后期时候经常会发现校验已经占据了巨大工作量并且成为海量bug的源头。因此校验是一种典型的容易被轻视单又蕴含巨大工作量的事情,需要特别对待,专门设计。

一般来说,这根据校验根据其复杂度可以分为以下两类:

格式校验

格式校验一般是校验用户输入的格式是否满足要求,比如是否数字、电话号码、邮箱等等。此类校验的特点是校验域单一,一般只对一个input或者某个组件的value进行检查。格式类校验应与与用户展现非常接近,一种非常好的做法是将此类校验信息直接描述在html标签属性中。html5中input的pattern属性就是一种基于这种思想的解决方案。

逻辑校验

逻辑校验是满足格式校验后,继续进行的与业务相关的校验,例如是否存在相同用户名,输入的生日是否和身份证号不符等等。此类校验的一般涉及多个输入域,要综合处用户的输入内容一起校验。此类校验逻辑复杂,不适合写在html中。

目前有很多流行的form校验框架解决校验问题,如何引入合适的校验框架,先从理解校验这件事的过程开始。

典型的一个校验过程如下,用户在某个input处完成输入,应用在某个时刻被触发校验,可以是失去焦点或者keyup或者其他。被触发的校验过程找到此处input所需要的校验规则(有时候这个规则被直接写在html中)判单正确与否,如果正确,可能有提示,如果错误,可能也有提示。

从以上场景的描述中,可以找到校验的几个关键环节。这里局部采用一下管理学上经典的5w1h问题分析方法来分析问题

who: 哪个输入控件的内容需要校验。这是框架是解决不了的。要对哪个输入域做校验应该是应用传递进入的。

when: 何时被触发校验。比如说是“who”失去焦点时。变化太多,框架解决不了。只能被动触发。

what: 做什么校验。有时候这个”what”被写在html中。基本上,所有格式校验都是固定的,这个问题应框架解决。但框架应预留接口做更加复杂的业务校验。

how: 校验完毕后的动作。框架不能决定做什么,但是在校验结果出来后,框架应能知会到外部调用者。

在设计框架或者选择已有框架时,首先要区分框架的边界,简单来说,就是做什么和不做什么。框架应实现相对固定的业务流程。同时对可变部分预留足够的灵活性。

一个通用的校验框架一定是不含界面部分的。界面是多变和难以穷举的,是用tip显示错误,还是在输入域附近显示,是否需要动画,是否需要修改输入域的视觉状态,这些可变化的部分应为框架外部内容,由更专业的tip组件或者popup来完成。框架只应该负责在校验完成时候知会相关组件完成显示错误提示等若干事情。

基于以上的分析,校验框架应该具备以下规格

1. 解决what问题。内置了各种格式校验规则,如电话号码、e-mail等.并且能够灵活定义新的逻辑校验。

2. 解决who问题。说明如何根据输入的字符真正找到who对应的value。并且能够对于这个who使用哪些校验规则

3. 解决when问题。提供一个触发校验的方法。

4. 解决how问题。产生校验结果后能够知会外部的功能框架。

在淘宝机票订单应用中,依据上述原则自行设计了一个Validator框架,接口定义如下,Validator是校验框架对象。

在构造函数中提供表格化的校验逻辑定义型式。如下图所示,传递如下结构,定义每个字段对应的校验方式。在下图中,定义每行为一个field,每个field有若干rule,每个rule可以是框架内置的格式校验,也可以是自定义的逻辑校验,实际上是函数名。

 

Validator框架提供validate()方法,validate方法有两个行为,如果不指定参数,将依次执行完所有field的校验,并且将最终结果返回。如果执行一个field name,框架将只校验field name对应的输入域。

一旦执行validate()方法,无论校验结果如何,框架均向其观察者发送事件’onValidate’。以便触发后续动作。

一些辅助参数,需要提供一个从field name找到输入域value的function。

总结

在处理复杂表单时,首先通过合理模块、组件划分,将复杂度分散。然后利用详细和广播机制解决分散的模块和组件间通问题。接着,过于复杂的组件要考虑进一步拆分,具体拆分的方式有纵切和横切两种,根据具体使用场景决定。最后,不要小看了校验,需要特别对待,专门设计。

申请创业报道,分享创业好点子。点击此处,共同探讨创业新机遇!

相关标签
网站表单
html表单

相关文章

  • aspmaker如何加入在线HTML编辑器

    做网站的都知道,网站后台的详细内容,必须要带HTML编辑器,这样才能做出丰富多彩的内容。常见的编辑器有:百度出品的UEditor,xhEditor开源HTML编辑器,KindEditor开源HTML编辑器,阿里的KISSY,还有国外的fckeditor编辑器等,各有所长,而aspmaker自带有fc

    标签:
    html表单
  • 目前为止用户体验度最好的表单:浮动标签式的表单

    在当今这个互联网时代,填写表单对用户来说就是家常便饭,在网站进行注册登录时、在网上购物时,都免不了填写表单这一环。表单是网页设计中重要的组成部分之一,在获取用户信息方面发挥着不可或缺的作用,它是用户和网站的一种互动形式,这种形式的互动越顺畅,网站的用户转化率就越高。这也是为什么许多站长们一直在研究如

  • SEO中常用HTML代码大全 及权重排序

    做SEO必须要懂HTML,说的是一点都没错,不过其实是不需要全部都懂,最重点的你懂了会用,基本上都是事半功倍了。可以这么说一个不懂代码的优化人员不算是一个合格的好优化。下面就总结一下做优化,必须要懂得几个最重要的html代码,希望能帮到大家。

    标签:
    seo优化
    html表单
  • 织梦自定义表单的全面优化策略

    我们在使用织梦CMS搭建网站的时候,通常需要用到自定义表单来实现诸如在线订单、在线留言、在线报名的功能,然而,织梦CMS的自定义表单功能不是非常完善,下面由湖南长沙网站建设公司-飞云专业建站工作室和大家分享一下,如何全面优化织梦CMS自定义表单系统(以下内容适用于5.7sp1版本):一、优化提示框织

    标签:
    网站表单
  • 4S店售后在线预约完美解决方案

    应对这种快节奏的社会环境、预约一词开始始慢慢变得火热、甚至流行起来。例如去拜访某企业负责人。前台礼貌的问你一句“先生/女士!请问有没有预约”这个时候要是没有预约、请不要责怪也不要带有情绪。因为时间上的冲突、即便如愿会面、也可能因一方准备不充分、而让此次会面与初衷大相径庭、而达不到预期、甚至起到相反的

  • 如何选择最佳SEO网站系统?

    在当今以网络为主导的时代,网站本质上给人留下第一-印象,它提供了一种向来自世界各地的网络用户介绍自己及其业务的窗口。您所说的话和怎么说对消费者产生了巨大的影响,大多数购物者在访问页面的几秒钟内就留下了深刻的印象。糟糕的用户体验、缺乏启发性的内容以及过时的外观等都会将客户拒之门外。如何选择最佳SEO网

  • 中小企业网站建设9个关键步骤

    无论您是自由soho,或者是五店老板或其他类型的中小型企业,一个优秀的网站对您公司的成功至关重要。

  • 网站定位需要注意的问题:竞争能力越强,排名越好

    大家在做网站的时候可以好好的思考一下,到底应该如何去确定网站的细分方向。

    标签:
    网站定位
  • 网站索引量直在下降是什么原因

    所谓网站索引量,就是指搜索弓|擎把你的网页内容索取到数据库中。简单理解就是网站中有多少页面可以作为搜索候选结果,就是网站的索引量。网站的索引量越高,说明参与排名的机会就越大。那么,在网站SEO优化过程中,索引量一直在下降,也是很多站长遇到的一个很棘手的问题,下面笔者就带大家分析一下是什么原因。

  • 网站运营到底怎么更好的盈利?

    (文/守护袁昆)站长这个词已经很久没有被提及了,但这个群体一直存在。通过做网站去盈利的站长、SEO优化人员,面对流量渠道的分散,流量的精准度问题,怎样让网站实现更好的盈利呢?

  • 导致网站被降权的原因有哪些?

    网站的标题和内容经常改,因为如果你的标题一直改动会被搜索引擎认为网站不稳定,导致搜索引擎对网站信任度不高,如果你这时候还继续去修改的话,就容易导致网站被搜索引擎惩罚,导致降权的可能发升。

    标签:
    网站降权原因
  • 网站被降权的特征有哪些?

    大量的垃圾外链挂靠也会导致网站被降权,垃圾外链指的是大部分被触犯百度搜索引擎规则的内容的外链。这些页面被降权了,如果还继续挂外链到你网站上,也会牵连被降权的可能发送。

    标签:
    网站降权原因
  • 可惜了! 又一SEO论坛站已打包出售

    之前一个做的不错的叫暴风SEO论坛的网站,建站初期在连续卢松松博客投了几个月广告,而引起了我的关注,近日发现疑似准备出售,可惜了!下图中这个叫暴风SEO论坛的网站,建站初期在卢松松博客投了几个月广告;后面我看他网站质量不错,就主动给他做了推荐,加入博客大全的名站导航

    标签:
    网站
    论坛
  • 滴滴的内部赛马:网约车与出租车各自进化,一亿补贴投向快的新出租

    在商业策略上,“内部赛马”是互联网企业保持良性发展的重要方式。两个具有高度竞合关系的业务板块良性竞争,可以不断裂变出更多能独挡一面的业务。种种迹象表明,快的新出租或许只是一个开始,未来滴滴可能会有更多的独立品牌业务。

    标签:
    滴滴出行
  • 站长爆料:网站被勒索交换友链

    有站长私下爆料,最近收到奇葩邮件,对方要求交换网站友链,发布软文,不妥协就攻击网站,真是啥人都有!

    标签:
    网站
    站长

热门排行

信息推荐

扫一扫关注最新创业资讯