使用APICloud编写优雅的HTML5代码《一》：下拉刷新、上拉加载更多

摘要: 发​现​A​P​I​C​l​o​u​d​倡​导​符​合​C​M​D​以​及​A​M​D​规​范​的​J​S​编​码​标​准​,​提​供​基​于​H​T​M​L​5​的​跨​平​台​A​p​p​编​译​,​并​开​放​大​量​的​端​A​P​I​和​云​A​P​I​,​辅​助​A​p​p​开​发​及​运​营​,​云​端​并​重​,​方​向​很​是​新​颖​。​特​此​分​享​相​关​研​究​成​果，持​续​更​新​中​。

一、实现下拉刷新：

默认样式->代码清晰简洁明了，符合ECMA262规范的callback，最少只需5行代码：

apiready = function(){
    api.setRefreshHeaderInfo(function(ret, err){
        //refresh event callback
        toDoRequest();
    });
}    

//do ajax
function toDoRequest(){
        // GET、POST、PUT、DELETE、…
        api.ajax({
            url:'http://xxx.xxx.xxx'
        }, function(ret, err){
            api.refreshHeaderLoadDone(); //复位下拉刷新
            //do your business
        });
}

自定义样式->参数灵活可自由定义，非必选，实现自定义下拉刷新头的信息：

apiready = function(){
    var param = {};
    param.loadingImgae = 'widget://image/refresh.png'; //定义刷新小箭头的图片
    param.bgColor = '#ccc';                            //定义下拉刷新区域的背景
    param.textColor = '#fff';                          //定义下拉刷新提示文字的颜色
    param.textDown = '下拉试试...';                     //定义下拉刷新文字
    param.textUp = '松开试试...';                       //定义松开刷新文字
    param.showTime = true;                             //定义是否显示最后一次刷新时间
    api.setRefreshHeaderInfo(param, function(ret, err){
        toDoRequest();
    });
}

function toDoRequest(){
    api.ajax({
        url:'http://xxx.xxx.xxx'
    }, function(ret, err){
        api.refreshHeaderLoadDone();        //复位下拉刷新
        //do your business
    });
}

二、实现加载更多：

通过监听页面滚动到底部事件来实现：

apiready = function(){
    api. addEventListener({name:'scrolltobottom'}, function(ret, err){
        //refresh event callback
        toDoRequest();
    });
}

//do ajax
function toDoRequest(){
    // GET、POST、PUT、DELETE、…
    api.ajax({
        url:'http://xxx.xxx.xxx'
    }, function(ret, err){
        //do your business
    });
}

从接口规范上看，APICloud开放的端API简洁明了，效率高，规范、语义明确。极大提高了开发人员的工作效率，以及代码的可读性、维护性、扩展性。