管理系统开发中的一些经验和规范
Wishes: 一切为了简化和标准化。
1 适用背景
本文档中的规范，具有一定的适用性，当然也可以根据需要扩展改造到适合其他开发环境下。
适用场景：
1. 以增删改查为基础的管理界面。
2. 弹出窗口非iframe加载，以ajax动态弹窗（iframe需要占用的资源更多，和当前页面共享方法和数据比较麻烦）。
3. 正常情况下，弹出窗口在关闭后，dom资源及javascript对象被回收，释放资源。
4. 增，改，查看单条数据，默认采用弹出窗口，但不局限于弹窗，也可整个内容区跳转。
2 页面及Controller层
| 页面 | Controller层 | 说明 |
| manage | manage | 用于搜索条件，新增按钮等操作功能 |
| list | List | 分页查询列表数据 |
| add | add | 新增页面(可加入一些新增需要的) |
|
| doAdd | 执行新增操作 |
| Update | update | 修改页面 |
|
| doUpdate | 执行修改操作 |
| view | view | 查看页面 |
2.1 manage页面
功能定位：
a. 用于搜索条件罗列，新增按钮等操作功能；
b. queryList方法，用于处理分页及查询。
c. 放置一个空的dom节点，<div id=”dl”></div> 用于装载列表分页数据。
优点：
a. 搜索条件和列表分离，无需刷新列表页面后保存搜索条件数据。
b. 搜索条件和新增等操作分离，分页列表只需关心列表相关数据。
c. 调用搜索方法，无需追加参数，直接在方法中获取（详见queryList方法说明）。
2.2 list页面
功能定位：
a. 表头展示，数据列表展示;
b. 数据操作(修改，删除等);
c. 分页展示跳转。
d. 操作事件绑定。
优点：
a. 搜索区域和列表区域分离，列表区域只需关心列表部分内容。
b. 和pageQuery继承，只需要使用 #showPageQuery(${pageQuery}, ‘queryList’);即可实现分页操作。
c. 每个单行数据的操作当前设计为放在列表后面的操作区域里面。
缺点：
a. 每行后面按钮堆叠，看上去不够美观。 强迫症患者可以通过把操作按钮统一为一个，通过checkbox选择数据及进行处理。或者更好的展现形式。
2.3 add页面
功能：
a. 新增内容编辑区域；执行新增保存操作。
b. 新增成功后，刷新后面的列表。
优点：新增页面及操作和其它功能页面分离，更加独立方便查找更新。
2.4 update页面
功能：修改页面，修改单条数据。
2.5 view页面
单条数据详情查看页，类似修改页面，内容全部为只读，无修改功能（可和修改页面合并，可选功能）。
3 pageQuery对象说明
相关成员变量及方法参看源代码。
说明及注意事项：
a. PageQuery对象如果不传入一个map，则会尝试获取一个servletRequest对象进行请求参数获取。
b. 在每次获取分页数据前，一定要进行count，并调用 setTotalCount方法，才会将DAO层需要的参数计算出并放入参数map中。(不设置将会造成分页信息不准或者抛出异常).
c. 设置totalCount后，PageQuery会自动计算，总页数（pageCount）,自动校正当前页码是否越界，如果越界修正为最大页码。
d. PageQuery配合velocity相关宏定义即可实现分页的简单调用。
4 javascript使用经验
4.1 前端的MVC模型。
传统模式：
<button οnclick=”update_function(232)”>修改</button>
function update_function(id){
//执行update操作
}
数据绑定模式：
<button class=”Jupdate-Item” data-itemid=”232”>修改</button>
$(“. Jupdate-Item”).click(function(){
var jthis=$(this);
var itemId=jthis.data(‘itemid’);
// 调用更新页面
});
看上去还要复杂一点，但是为什么要这么做？
a. 一点也不复杂，DOM只绑定数据和触发的class等，没有在DOM里面嵌套一句javascript语句。
b. 方便前端调试，HTML片段和js完全分离。
c. 绑定的事件都是匿名方法，在dom节点回收后，绑定的事件没有引用也被回收。
再来看看成熟的框架用的模型：
//bootstrap的事件绑定，dom元素上没有onclick事件。
<a class="close" data-dismiss="alert" href="#">×</a>
this.$element = $(element)
.delegate('[data-dismiss="modal"]', 'click.dismiss.modal', $.proxy(this.hide, this));
4.2 jquery常用的事件绑定
参见以下博文：
http://my.oschina.net/davidzhang/blog/408969
728
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
