利用jquery的易扩展特性简化JS的开发
来源:互联网 发布:js split 数组 编辑:程序博客网 时间:2024/05/14 08:12
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.csdn.net/detail/scybs/7656433
- 利用jquery的易扩展特性简化JS的开发
- 用NAN简化Google V8 JS引擎的扩展
- 如何利用jQuery扩展自己的插件
- jQuery-简化的javaScript
- jQuery的实用特性扩展类库:jQuery++
- 利用snapcraft-gui工具来简化我们的snap开发
- [C#] 合理利用扩展方法的“污染”特性
- 扩展JQuery和JS的方法
- 分享13个帮助你简化开发的jQuery插件
- 分享 13 个帮助你简化开发的 jQuery 插件
- Redis的扩展特性
- ExtJS4对JS语法的扩展 及 新类库特性
- jquery-direct.js 大大简化js 异步调用服务器端的方法
- 利用jQuery来简化radio,checkbox,select,radio表单元素的操作
- jQuery 学习第七课 扩展jQuery的功能 插件开发
- 利用js对象的特性去除数组和重复项
- 利用JS对象的特性去除数组中的重复项
- 如何利用Java的反射的机制来简化Structs应用程序的开发
- 生成AWR性能报告!
- 二进制和十进制互转
- 在cmd中编译java程序
- Linux 安装C++ MySQL Connection客户端
- STL 源码剖析 算法 stl_algo.h -- nth_element
- 利用jquery的易扩展特性简化JS的开发
- 无题
- FreeBSD、Solaris、Linux、Unbutu、MacOS操作系统
- STL 源码剖析 算法 stl_algo.h -- merge sort
- Ubuntu 14.04系统下,休眠之后无法启动的问题解决
- UVA10635- Prince and Princess
- PE病毒技术剖析
- Python函数的嵌套
- STL 源码剖析 算法 stl_algo.h -- inplace_merge