利用jquery的易扩展特性简化JS的开发

1.前言

Jquery的出现让Web前端开发人员从繁重的HTML和javascript中解放出来，使其可以有更多的精力专注于页面的展现和业务处理。在项目的开发中应充分利用jquery的动态扩展属性来简化我们的开发，在最近的一个项目中就遇到这样一个情景，通过动态扩展避免了相似代码的重复开发。

2.背景

         项目要求提供一个资料填报(数据录入、文件上传)功能，填报的资料可以反显，编辑，对数据的更改要有详细的审计，资料填报的样式如下：

本身实现这样一个页面很简单，但项目中这样的填报页面有3,40个，每页有2，30个变量需要处理。这就需要有一个好点的方法来处理一些通用的问题，我们知道资料填写页面一般需要做几件事情：

a.根据前置选择条件确定后续是否需要输入。

b.数据有效性的验证

c.数据组织保存

d.数据反显

另外还希望达到容易修改，非开发人员也能胜任，降低部署测试、后续需求维护的成本。

 

3.实现

         要做的事情就是如何将以上的几点归纳为统一实现，填报页面中不包含任何javascript语句，所以我们需要用jquery在页面显示时动态调整各种编辑框的行为。实现方式是：

a.      为需要动态可用的编辑框指定可用的前置条件 

<tr>
			<td valign="top" align="right">是否设立专门的信息管理机构：</td>
			<td>
				<table>
					<tr>
						<td colspan="2">
							<input type="checkbox" chkboxmode="chk_only_one" name="has_aqgljg" value="1"/>是
							<input type="checkbox" chkboxmode="chk_only_one" name="has_aqgljg" value="0"/>否
						</td>
					</tr>
					<tr>
						<td align="right">管理机构名称:</td>
						<td><input id="IdJGMC" type="text" chkfun="isphone" name="aqgljg_jgmc" enablebind="has_aqgljg:1"/></td>
					</tr>
					<tr>
						<td align="right">负责人姓名:</td>
						<td><input type="text" name="aqgljg_fzr"  enablebind="has_aqgljg:1"/></td>
					</tr>
					<tr>
						<td align="right">职务:</td>
						<td><input type="text" name="aqgljg_zw"  enablebind="has_aqgljg:1"/></td>
					</tr>
					<tr>
						<td align="right">电话:</td>
						<td><input type="text" name="aqgljg_dh"  enablebind="has_aqgljg:1"/></td>
					</tr>
				</table>
			</td>
		</tr>

djbhbm_bmmc,djbhbm_lxr变量等添加enablebind属性表明只有在has_djbhbm值选择为1的时候才可用(可输入)。

b.      实现一批数据有效性检测函数，定义input标签的时候指定使用的检测函数

标签添加chkfun属性在点击保存的时候对该输入项做有效性检测,min,max限制有效输入的最小和最大长度。chkfun为isint时min,max表示最小值和最大值。chkboxmode属性值chk_only_one限制同名多个checkbox只允许同时选择一个，类似radio。 属性值chk_must_one限制同名checkbox必须最少选择一个，这些都在保存前做检测。

c.      每页输入的数据作为一条记录在数据库中用json格式保存，在保存时候枚举所有的input标签，判断input的类型取值，组织成json并base64编码后提交到服务器。

d.      解析json数据，根据变量名找到input标签并设置值。

e.      动态为每个input标签添加title属性，保存json数据的时候一并保存，方便数据查看，并且在做数据审计的时候需要知道每个变量所描述的信息

        可以看出input标签所表示的内容是 $(this).parent().prev().html()

所以实现上面引擎的流程是:

页面加载：设置所有input标签的title属性->获取该页面的json数据->为input标签赋值->为checkbox,radio等绑定处理事件->设置input标签是否可用。

保存:调用chkfun检查输入是否有效->检查checkbox的chkboxmode选择是否有效->枚举所有input取值生成json并base64编码->保存

资源下载:http://download.youkuaiyun.com/detail/scybs/7656433