WEB开发的套路——优雅的编程

何谓优：高效、可读；何谓雅：清晰、量少。

优来自于习惯；雅来自于经验。

数据的请求和页面的填充

既然是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和存储过程，无需操心资源管理，效率高。