杭州web前端开发入门培训

学习下基于jQuery数据加载流-Web前端之家

先前学习过一些基于jQuery数据加载流的知识，觉得方法很多，但是万变不离其宗，今天就回顾下最原始的数据预加载的功能。

实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。

但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。

h5项目里需要实现简单的分页功能，由于是移动端，考虑用『加载更多』会更好，而不是PC端的翻页。

基于按钮实现加载更多

最简单的就是给一个加载更多的按钮，如果还有数据，点击下加载更多，继续拉几条数据；直到没有更多数据了，隐藏加载更多按钮。

这里提前准备好数据。演示数据格式：blog.json

{     "list": [         {             "title": "这是title",             "url": "http://www.xxx.com/x1.html",             "desc": "摘要"         },         {             "title": "这是title2",             "url": "http://www.xxx.com/x2.html",             "desc": "摘要"         }] }

页面html：

加载更多按钮样式：loadmore.css:

@charset "utf-8"; .js-load-more{     padding:0 15px;     width:120px;     height:30px;     background-color:#D31733;     color:#fff;     line-height:30px;     text-align:center;     border-radius:5px;     margin:20px auto;     border:0 none;     font-size:16px;     display:none;/*默认不显示，ajax调用成功后才决定显示与否*/ }

加载更多的js代码：

$(function(){    /*初始化*/     var counter = 0; /*计数器*/     var pageStart = 0; /*offset*/     var pageSize = 4; /*size*/     /*首次加载*/     getData(pageStart, pageSize);    /*监听加载更多*/     $(document).on('click', '.js-load-more', function(){         counter ++;         pageStart = counter * pageSize;         getData(pageStart, pageSize);     }); });

这里的代码并不多。其中getData(pageStart, pageSize)是业务逻辑代码，负责从服务端拉去数据。这里给个示例：

function getData(offset,size){     $.ajax({         type: 'GET',         url: 'json/blog.json',         dataType: 'json',         success: function(reponse){            var data = reponse.list;            var sum = reponse.list.length;            var result = '';            /****业务逻辑块：实现拼接html内容并append到页面*********/             //console.log(offset , size, sum);             /*如果剩下的记录数不够分页，就让分页数取剩下的记录数             * 例如分页数是5，只剩2条，则只取2条             *             * 实际MySQL查询时不写这个不会有问题             */             if(sum - offset < size ){ size = sum - offset; } /*使用for循环模拟SQL里的limit(offset,size)*/ for(var i=offset; i< (offset+size); i++){ result +=' ';             }             $('.js-blog-list').append(result);            /*******************************************/             /*隐藏more按钮*/             if ( (offset + size) >= sum){                 $(".js-load-more").hide();             }else{                 $(".js-load-more").show();             }         },         error: function(xhr, type){             alert('Ajax error!');         }     }); }

还是比较简单的。

基于滚动事件实现加载更多

上面我们通过按钮点击实现加载更多，整体过程还是比较简单的。这里，我提供另一种方法实现加载更多：基于于滚动(scroll)事件。

直接贴代码了：

$(function(){    /*初始化*/     var counter = 0; /*计数器*/     var pageStart = 0; /*offset*/     var pageSize = 7; /*size*/     var isEnd = false;/*结束标志*/     /*首次加载*/     getData(pageStart, pageSize);    /*监听加载更多*/       $(window).scroll(function(){        if(isEnd == true){            return;         }        // 当滚动到最底部以上100像素时， 加载新内容         // 核心代码         if ($(document).height() - $(this).scrollTop() - $(this).height()<100){ counter ++; pageStart = counter * pageSize; getData(pageStart, pageSize); } }); });

可以看出，代码变化不大，主要看核心代码里的判断条件：当滚动到最底部以上100像素时， 加载新内容。

业务逻辑getData(pageStart, pageSize)只需要把if ( (offset + size) >= sum)里面的逻辑改成：

if ( (offset + size) >= sum){     isEnd = true;//没有更多了}

就行了。

当然，这里面还有要优化的地方，例如：如何防止滚动过快，服务端没来得及响应造成多次请求？

综合实例

通过上面的例子，显然第二种更好，不用去点击。但是第二个方法有个问题：如果设置页面大小每次显示2条或3条(size=2)，总记录是20，你会发现无法触发向下滚动加载更多的逻辑。这时候有个加载更多的点击按钮就好了。

因此，我们可以把以上两种方法合在一起：默认使用滚动事件实现加载更多，当显示数目太小不足以触发向下滚动加载更多的逻辑时，使用加载更多点击事件。

这里，我对加载更多这个行为进行简单的抽象，写了个简单的插件：loadmore.js

/*  * loadmore.js  * 加载更多  *  * @time 2016-4-18 17:40:25  * @author 飞鸿影~  * @email jiancaigege@163.com  * 可以传的参数默认有：size,scroll 可以自定义  * */;(function(w,$){    var loadmore = {          /*单页加载更多 通用方法          *           * @param callback 回调方法          * @param config 自定义参数          * */         get : function(callback, config){            var config = config ? config : {}; /*防止未传参数报错*/             var counter = 0; /*计数器*/             var pageStart = 0;            var pageSize = config.size ? config.size : 10;            /*默认通过点击加载更多*/             $(document).on('click', '.js-load-more', function(){                 counter ++;                 pageStart = counter * pageSize;                 callback && callback(config, pageStart, pageSize);             });            /*通过自动监听滚动事件加载更多,可选支持*/             config.isEnd = false; /*结束标志*/             config.isAjax = false; /*防止滚动过快，服务端没来得及响应造成多次请求*/             $(window).scroll(function(){                /*是否开启滚动加载*/                 if(!config.scroll){                    return;                 }                /*滚动加载时如果已经没有更多的数据了、正在发生请求时，不能继续进行*/                 if(config.isEnd == true || config.isAjax == true){                    return;                 }                /*当滚动到最底部以上100像素时， 加载新内容*/                 if ($(document).height() - $(this).scrollTop() - $(this).height()<100){ counter ++; pageStart = counter * pageSize; callback && callback(config, pageStart, pageSize); } }); /*第一次自动加载*/ callback && callback(config, pageStart, pageSize); }, } $.loadmore = loadmore; })(window, window.jQuery || window.Zepto);

如何使用呢？很简单：

$.loadmore.get(getData, {    scroll: true,  //默认是false,是否支持滚动加载    size:7,  //默认是10    flag: 1, //自定义参数，可选，示例里没有用到});

第一个参数是回调函数，即我们的业务逻辑。我把最终修改过的业务逻辑方法贴出来：

function getData(config, offset,size){     config.isAjax = true;     $.ajax({         type: 'GET',         url: 'json/blog.json',         dataType: 'json',         success: function(reponse){             config.isAjax = false;            var data = reponse.list;            var sum = reponse.list.length;            var result = '';            /************业务逻辑块：实现拼接html内容并append到页面*****************/             //console.log(offset , size, sum);             /*如果剩下的记录数不够分页，就让分页数取剩下的记录数             * 例如分页数是5，只剩2条，则只取2条             *             * 实际MySQL查询时不写这个             */             if(sum - offset < size ){ size = sum - offset; } /*使用for循环模拟SQL里的limit(offset,size)*/ for(var i=offset; i< (offset+size); i++){ result +=' ';             }             $('.js-blog-list').append(result);            /*******************************************/             /*隐藏more*/             if ( (offset + size) >= sum){                 $(".js-load-more").hide();                 config.isEnd = true; /*停止滚动加载请求*/                 //提示没有了             }else{                 $(".js-load-more").show();             }         },         error: function(xhr, type){             alert('Ajax error!');         }     }); }

基本上与最初写的是一样的。

总结

其实还有那种滑动加载流等等功能，上面只是最原始的数据加载方法，希望能帮助到大家！