简介
作为一个懒人,在项目做多了之后,必然而然的会去思考如何简化日复一日的重复劳动,从辛劳的体力劳动中解脱出来将精力用到更有用的地方去。而作为B/S系统的开发,消耗最多时间的莫过于表单处理。只要有信息交互,不可避免的会用到表单,从最原始的POST/GET到目前流行的Ajax,从Struts1的流行到WebWork、Struts2、SpringMVC等服务器端架构的设计,初衷都是为了简化复杂的表单业务逻辑处理。然而这些似乎还不够,某个组件或框架本身只能解决它所在位置上的单一问题,如何从众多框架的设计思想中提炼精髓,有效的组合运用,最终实现最少的代码量满足最多的业务需求,才是软件设计开发的王道...
设计思想
- 可用性
- 最少的代码
- 直观的信息表达
- 可扩展性
- 可重用性
- 任何设计都不是万能药
现阶段解决方案
作为懒人当然先用流程的开源框架最为方便(精力有限,有余力的同学可自行开发)。
- 基于Jquery-Tools的声明式表单校验及信息提示组件
- 基于Jquery-Form的表单自动序列化及Ajax提交组件
- 基于Jquery-Loading的遮罩层,用于提交后遮盖页面防止提交过程中的意外操作。
逻辑定义
- 采用Ajax方式的提交,页面无刷新,因此也不再需要ActionFrom之类的服务端支持;
- 表单的method和action标识了Ajax提交的模式及服务路径;
- 声明式的校验逻辑直接定义到对应的表单控件。如required代表该字段必选,max-length代表可输入的最大长度;
- 通过传递form对象给最终的提交方法,用方法封装的方式实现从校验到提交到提交完成回调的完整逻辑,简化页面的代码量(通常一个系统中页面提交的逻辑只会有几种);
业务流程
- 提交方法执行后,首先触发表单校验;
- 通过遍历表单控件及其上绑定的校验规则,对表单控件输入的有效性进行校验,校验失败时提示相关失败信息,并终止提交;
- 当所有校验都通过时,自动调用Ajax提交,提交参数通过表单的自动序列化得到;
- 服务器端代码执行完后,返回响应,触发Ajax的回调函数(通常会提供一个默认的),回调函数自动执行;
- 完成表单。
示例截图
除了为表单控件多加了几个属性,与通常的表单没有任何区别,更没有复杂的JS代码了。
注:更精简的模式是直接定义提交按钮为submit,然后拦截submit,这样连按钮都跟原来没区别了。
现阶段的问题
- 信息提示对于动态控件支持不够:如类似MiltipleSelect组件,将默认的<select>隐藏,改用DIV来模拟,由于popup信息提示依赖于控件的定位,控件被隐藏后popup将错位。
- 对于checkbox之类的多选控件支持不够:如服务端自动生成的多个checkbox,需要指定某些需要校验某些不需要的情况