Discuz X3中自动加载更多的代码分析

dly · 发表于 2013-8-26 11:47:05

在研究DiscuzX3.0的过程中需要使用无刷新自动加载更多数据代替翻页效果，但是又不局限与DZ官方默认的只有帖子列表对帖子才有效果，仔细研究了一下分析如下，以备查询。

需要注意三处：
1、模板前台效果页中的“加载更多”按钮，作用：显示“加载中”与引入需要的js文件；
2、最重要的autoloadpage.js文件，作用：实现自动加载的主代码段；
3、模板页中需要加载数据的DOM结构化，作用：在2中的js容易处理DOM元素，原则是可选取、以替换、容易使用js的正则处理。

具体实现细节分析：

第1步：模板页的“加载更多”按钮与js主文件的引入。

<u><a class="bm_h" href="javascript:;" rel="$multipage_more" curpage="$page" id="autopbn" totalpage="$maxpage" picstyle="$_G[forum][picstyle]" forumdefstyle="$_G[cookie][forumdefstyle]">{lang next_page_extra}</a>
<script type="text/javascript" src="http://yourweb.com/{$_G[setting][jspath]}autoloadpage.js?{VERHASH}"></script></u>
<div id="pgbtn" class="pgbtn"><a href="http://youweb.com/forum.php?mod=forumdisplay&fid={$_G[fid]}&filter={$filter}&orderby={$_GET[orderby]}{$forumdisplayadd}&{$multipage_archive}&page=$nextpage" hidefocus="true">{lang next_page_extra}</a></div>

复制代码

其中，注意下划线的部分，a标签里需要的变量都是在对应的php文件里面备好。前三个很重要：rel代表将要去提取数据的php文件地址，curpage代表当前页，totalpage代表总页数；后面两个：picstyle与forumdefstyle分别代表图片格式与板块默认格式，如果开发其他单独页，基本用不到。

第2步：细看autoloadpage.js文件。

(function() {
var autopbn = $('autopbn');
var nextpageurl = autopbn.getAttribute('rel').valueOf();
var curpage = parseInt(autopbn.getAttribute('curpage').valueOf());
var totalpage = parseInt(autopbn.getAttribute('totalpage').valueOf());
var picstyle = parseInt(autopbn.getAttribute('picstyle').valueOf());
var forumdefstyle = parseInt(autopbn.getAttribute('forumdefstyle').valueOf());
picstyle = picstyle && !forumdefstyle;
var autopagenum = 0;
var maxpage = (curpage + autopagenum) > totalpage ? totalpage : (curpage + autopagenum);
var loadstatus = 0;
autopbn.onclick = function() {
var oldloadstatus = loadstatus;
loadstatus = 2;
autopbn.innerHTML = '正在加载, 请稍后...';
getnextpagecontent();
loadstatus = oldloadstatus;
};
if(autopagenum > 0) {
window.onscroll = function () {
var curtop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
if(curtop + document.documentElement.clientHeight + 500 >= document.documentElement.scrollHeight && !loadstatus) {
loadstatus = 1;
autopbn.innerHTML = '正在加载, 请稍后...';
setTimeout(getnextpagecontent, 1000);
}
};
}
function getnextpagecontent() {
if(curpage + 1 > totalpage) {
window.onscroll = null;
autopbn.style.display = 'none';
return;
}
if(loadstatus != 2 && curpage + 1 > maxpage) {
autopbn.innerHTML = '下一页 »';
if(curpage + 1 > maxpage) {
window.onscroll = null;
}
return;
}
curpage++;
var url = nextpageurl + '&t=' + parseInt((+new Date()/1000)/(Math.random()*1000));
var x = new Ajax('HTML');
x.get(url, function (s) {
s = s.replace(/\n|\r/g, '');
if(s.indexOf("id="autopbn"") == -1) {
$("autopbn").style.display = "none";
window.onscroll = null;
}
if(!picstyle) {
var tableobj = $('threadlisttableid');
var nexts = s.match(/\<tbody id="normalthread_(\d+)"\>(.+?)\<\/tbody>/g);
for(i in nexts) {
if(i == 'index' || i == 'lastIndex') {
continue;
}
var insertid = nexts[i].match(/<tbody id="normalthread_(\d+)"\>/);
if(!$('normalthread_' + insertid[1])) {
var newbody = document.createElement('tbody');
tableobj.appendChild(newbody);
var div = document.createElement('div');
div.innerHTML = '<table>' + nexts[i] + '</table>';
tableobj.replaceChild(div.childNodes[0].childNodes[0], tableobj.lastChild);
}
}
} else {
var nexts = s.match(/\<li style="width:\d+px;" id="picstylethread_(\d+)"\>(.+?)\<\/li\>/g);
for(i in nexts) {
var insertid = nexts[i].match(/id="picstylethread_(\d+)"\>/);
if(!$('picstylethread_' + insertid[1])) {
$('threadlist_picstyle').innerHTML += nexts[i];
}
}
}
var pageinfo = s.match(/\<span id="fd_page_bottom"\>(.+?)\<\/span\>/);
nextpageurl = nextpageurl.replace(/&page=\d+/, '&page=' + (curpage + 1));
$('fd_page_bottom').innerHTML = pageinfo[1];
if(curpage + 1 > totalpage) {
autopbn.style.display = 'none';
} else {
autopbn.innerHTML = '下一页 »';
}
loadstatus = 0;
});
}
})();

复制代码

[ib]先看参数：

var autopbn = $('autopbn');//代表“加载更多”按钮的ID，可以获取对应上面的一下其他参数如下

var nextpageurl = autopbn.getAttribute('rel').valueOf();//获取下一页数据的地址

var curpage = parseInt(autopbn.getAttribute('curpage').valueOf());//当前页数

var totalpage = parseInt(autopbn.getAttribute('totalpage').valueOf());//总页数

var picstyle = parseInt(autopbn.getAttribute('picstyle').valueOf());//图片风格（扩展不必要）

var forumdefstyle = parseInt(autopbn.getAttribute('forumdefstyle').valueOf());//版块默认风格(扩展不必要）

picstyle = picstyle && !forumdefstyle;//风格判断（扩展不必要）

var autopagenum = 0;//是否自动加载更多（当页面下拉时）默认为0不自动加载，如果设置大于0，则是可自动加载的页数，超过此页数后将出现“下一页”按钮。

var maxpage = (curpage + autopagenum) > totalpage ? totalpage : (curpage + autopagenum);//最大页的判断结合自动加载的页数，决定出现“下一页”或者“加载更多”，还是隐藏此按钮。

var loadstatus = 0;//加载状态标记

接下来是绑定事件：一个是onclick，一个是onscroll，功能类似。

loadstatus = 1;//更改状态
autopbn.innerHTML = '正在加载, 请稍后...';//更改按钮字样
setTimeout(getnextpagecontent, 1000);//关键——调用获取加载数据主函数。

最后就是加载数据的主函数：getnextpagecontent 的函数体定义。

前面两大块就是判断，”加载中“按钮的显示与字样。最关键的是：

var x = new Ajax('HTML');
x.get(url, function (s) {}

复制代码

此函数功能是获取指定URL的内容并插入到页面中。
本文的细节与重点都在此间。主要有三点：
1、    s = s.replace(/\n|\r/g, '');
         if(s.indexOf("id=\"autopbn\"") == -1) {
            $("autopbn").style.display = "none";
            window.onscroll = null;
         }
注意红色部分一定要替换成自己定义的”加载中“按钮的ID

2、var tableobj = $('threadlisttableid');

041909lipb4b0b3pp44ixw.jpg.thumb.jpg

如图所示，红色部分与途中高亮显示的是所有要填加载的数据的共同的容器或者说是父标签的ID，这个必须有，下面插入新数据时必须用到。

3、var nexts = s.match(/\<tbody id="normalthread_(\d+)"\>(.+?)\<\/tbody>/g);
   var insertid = nexts.match(/<tbody id="normalthread_(\d+)"\>/);

注意红色部分，是负责在ajax获取对应url的html数据后检索需要的数据的，因此建议此段具有正则匹配的高效性与可操作性。避免使用太平常标签例如 div（匹配不精确），或者太复杂（不容易匹配）。

   if(!$('normalthread_' + insertid[1])) {
                     var newbody = document.createElement('tbody');

后面这两句注意，新建DOM元素的名字的统一规律，这样样式才能统一。

针对第3点，举个实例：（如下图）

041908n00xh5x0yihie10x.jpg.thumb.jpg

在实际项目中，遇到了以高亮显示的为数据基本主元素的数据集合。就是div元素，这样为了js计算方便，就需要把其内部的div元素尽量去掉，所有div外部再增家一个容器功能的父元素，此例中为threaddaily_box

这样，在js猪代码中应该为：

var tableobj = $('threadsdaily_box');

[插件制作] Discuz X3中自动加载更多的代码分析

相关帖子