何谓优:高效、可读;何谓雅:清晰、量少。
优来自于习惯;雅来自于经验。
数据的请求和页面的填充
既然是WEB开发,先show一段通过ajax请求获取搜索列表视图的代码:
//填充主内容视图
function fillMainContentsView() {
var uri = encodeURI("get_web_view.do");
var v_id = "get_product_listview_by_search";
var view_id = "main_contents_view";
var pageNo = g_curPageNo;
//搜索文本参数
var p1 = g_keyText;
//填充列表总数
fillListCount();
//使用POST方法调用接口
$.post(uri, {v_id:(""+v_id), pageNo:(""+pageNo), p1:(""+p1)}, function(data) {
var obj = $.parseJSON(data);
var emptyHtml = g_TIPS;
//调用状态失败(无数据或通信异常),使用数据为空的提示填充目标组件
if(obj[FsSpec.STATUS] != FsSpec.STATUS_OK) {
$("#"+view_id).html(emptyHtml);
g_hasMore = false;
return;
}
//调用成功获取结果中的内容
var result = obj[FsSpec.CONTENTS];
//获取列表头部、主体和尾部
var header = result[FsSpec.CONTENTS_HEADER];
var body = result[FsSpec.CONTENTS_BODY];
var tail = result[FsSpec.CONTENTS_TAIL];
var html = header+body+tail;
//填充HTML文本块
$("#"+view_id).html(html);
//结果集小于分页记录数,则表明无后续数据,则不显示【更多】按钮
if(obj[FsSpec.RS_COUNT] < obj[FsSpec.PAGE_SIZE]) {
$("div.pager").hide();
g_hasMore = false;
} else { //等于则表明还有后续数据,则显示【更多】按钮
$("div.pager").show();
g_hasMore = true;
}
));
}
其中的“$.post”可以换成“$.getJSON”只不过,无需再使用“$.parseJSON()”方法。
该代码的目标就是,调用接口,获取一个列表的HTML文本块,包括3个部分:表头、表体和表尾。
且支持分页,当本次获取的记录数小于分页数时,表明已无数据,则无需显示【更多】按钮;否则则需要显示【更多】按钮。
更多的处理如何呢?再show一段代码即可:
//填充更多内容
function showMore() {
var uri = encodeURI("get_web_view.do");
var v_id = "get_product_listview_by_search";
var view_id = "main_contents_view";
//自增页次
var pageNo = ++g_curPageNo;
//搜索文本参数
var p1 = g_keyText;
//填充列表总数
fillListCount();
//使用POST方法调用接口
$.post(uri, {v_id:(""+v_id), pageNo:(""+pageNo), p1:(""+p1)}, function(data) {
var obj = $.parseJSON(data);
//调用状态失败(无数据或通信异常),不做数据填充,只需隐藏【更多】按钮
if(obj[FsSpec.STATUS] != FsSpec.STATUS_OK) {
$("div.pager").hide();
g_hasMore = false;
return;
}
//调用成功获取结果中的内容
var result = obj[FsSpec.CONTENTS];
//获取列表头部、主体和尾部
var header = result[FsSpec.CONTENTS_HEADER];
var body = result[FsSpec.CONTENTS_BODY];
var tail = result[FsSpec.CONTENTS_TAIL];
var html = header+body+tail;
//添加HTML文本块
$("#"+view_id).append(html);
//结果集小于分页记录数,则表明无后续数据,则不显示【更多】按钮
if(obj[FsSpec.RS_COUNT] < obj[FsSpec.PAGE_SIZE]) {
$("div.pager").hide();
g_hasMore = false;
} else { //等于则表明还有后续数据,则显示【更多】按钮
$("div.pager").show();
g_hasMore = true;
}
));
}
显示更多的代码中,页次自增1(显示下一页数据);
调用过程与首次填充相同,只是HTML为添加(append())模式,而不是设置(html())。
接口的定义及效果图
则见下图:
点评
(1)将数据和UI模板通过配置化的方式进行定义,方便数据内容与UI的调整(无需进入部署修改JSP);
(2)简化了数据的处理,页面获取到的已经是填充好的内容,页面代码简洁,思路清晰。
(3)数据定义采用集中数据管理,支持SQL和存储过程,无需操心资源管理,效率高。