前言
最近分页功能使用的比较多，所以从网上下载个jquery分页插件来使用，
之前用的都挺好的，直到昨天出现了逻辑问题，反复查看自己的代码，最后发现是点击页码后执行了多个点击事件。最后只有自己查看源码在做修改。
场景
在同一个页面里多次初始化分页插件，之后点击分页页码时就会出错，原因是：点击后调用多个点击事件，最先调用的点击事件更改了当前页码，之后调用的点击事件使用了更改后的错误的当前页码
解决方法
- 每次初始化之前让页面重载以清除之前注册的点击事件（然而此种做法弊端太多，不适用）
- 每次初始化之前解除绑定事件，这就需要查看插件源码了
源码
(function($){
var ms = {
init:function(obj,args){
return (function(){
ms.fillHtml(obj,args);
ms.bindEvent(obj,args);
})();
},
//填充html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled">上一页</span>');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
}
//下一页
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">下一页</span>');
}
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.on("click","a.tcdNumber",function(){
var current = parseInt($(this).text());
ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current);
}
});
//上一页
obj.on("click","a.prevPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current-1);
}
});
//下一页
obj.on("click","a.nextPage",function(){
var current = parseInt(obj.children("span.current").text());
ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount});
if(typeof(args.backFn)=="function"){
args.backFn(current+1);
}
});
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 15,
current : 1,
backFn : function(){}
},options);
$(this).addClass("component-page");
ms.init(this,args);
}
})(jQuery);
可以看到在绑定事件时使用的是jquery里的on绑定，同时使用了匿名函数；而on绑定属于DOM2级事件绑定，DOM2级事件必须使用removeEventListener来解绑，在jquery里对应的就是off事件
不过值得注意的是解绑时传递的参数必须和绑定时的参数相同，插件中使用匿名函数所以无法解绑。
修改
既然无法解绑那就对插件源码进行修改
思路 ：把匿名事件提取出去，同时使用函数名来替代。在绑定之前先进行解绑，可以在bindEvent里进行解绑，不过不符合单一职责原则，所以给ms对象添加一个解绑属性 unbindEvent,在调用bindEvent之前调用 unbindEvent
修改后的代码
(function($){
var ms = {
init:function(obj,args){
//使用parData属性来接受参数，使得参数在提取出来的函数中使用
ms.parData.obj = obj;
ms.parData.args = args;
return (function(){
ms.fillHtml(obj,args);
ms.unbindEvent(obj, args);
ms.bindEvent(obj,args);
})();
},
// 接受参数的属性
parData: {
},
//填充html
fillHtml:function(obj,args){
return (function(){
obj.empty();
//上一页
if(args.current > 1){
obj.append('<a href="javascript:;" class="prevPage">上一页</a>');
}else{
obj.remove('.prevPage');
obj.append('<span class="disabled">上一页</span>');
}
//中间页码
if(args.current != 1 && args.current >= 4 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+1+'</a>');
}
if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){
obj.append('<span>...</span>');
}
var start = args.current -2,end = args.current+2;
if((start > 1 && args.current < 4)||args.current == 1){
end++;
}
if(args.current > args.pageCount-4 && args.current >= args.pageCount){
start--;
}
for (;start <= end; start++) {
if(start <= args.pageCount && start >= 1){
if(start != args.current){
obj.append('<a href="javascript:;" class="tcdNumber">'+ start +'</a>');
}else{
obj.append('<span class="current">'+ start +'</span>');
}
}
}
if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){
obj.append('<span>...</span>');
}
if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){
obj.append('<a href="javascript:;" class="tcdNumber">'+args.pageCount+'</a>');
}
//下一页
if(args.current < args.pageCount){
obj.append('<a href="javascript:;" class="nextPage">下一页</a>');
}else{
obj.remove('.nextPage');
obj.append('<span class="disabled">下一页</span>');
}
})();
},
//函数部分,注意其中的参数修改了
fun: {
numEvent: function(){
var current = parseInt($(this).text());
ms.fillHtml(ms.parData.obj,{"current":current,"pageCount":ms.parData.args.pageCount});
if(typeof(ms.parData.args.backFn)=="function"){
ms.parData.args.backFn(current);
}
},
prevEvent: function(){
var current = parseInt(ms.parData.obj.children("span.current").text());
ms.fillHtml(ms.parData.obj,{"current":current-1,"pageCount":ms.parData.args.pageCount});
if(typeof(ms.parData.args.backFn)=="function"){
ms.parData.args.backFn(current-1);
}
},
nextEvent: function(){
var current = parseInt(ms.parData.obj.children("span.current").text());
ms.fillHtml(ms.parData.obj,{"current":current+1,"pageCount":ms.parData.args.pageCount});
if(typeof(ms.parData.args.backFn)=="function"){
ms.parData.args.backFn(current+1);
}
}
},
// 解除绑定事件
unbindEvent: function(obj, args) {
return (function(){
obj.off("click","a.tcdNumber",ms.fun.numEvent);
//上一页
obj.off("click","a.prevPage",ms.fun.prevEvent);
//下一页
obj.off("click","a.nextPage",ms.fun.nextEvent);
})();
},
//绑定事件
bindEvent:function(obj,args){
return (function(){
obj.on("click","a.tcdNumber",ms.fun.numEvent);
//上一页
obj.on("click","a.prevPage",ms.fun.prevEvent);
//下一页
obj.on("click","a.nextPage",ms.fun.nextEvent);
})();
}
}
$.fn.createPage = function(options){
var args = $.extend({
pageCount : 15,
current : 1,
backFn : function(){}
},options);
$(this).addClass("component-page");
ms.init(this,args);
}
})(jQuery);
插件使用方式
引入jquery，引入插件（在jquery之后）
编写初始化代码
// commonPage 是页面中的一个元素，用来承载分页部分
$(".commonPage").createPage({
pageCount: Number(count), //总页数，除非是你自己写在这里的数字，否则建议使用Number把它转换成数字
current: Number(current), // 当前页码
backFn: function(p){
//回掉函数，p为点击的页码数 比如点击2则p为2
console.log(p);
}
});
特别说明分页样式需要自己写，下面贴出我的样式
/* 分页组件中的样式,component-page是分页插件自动添加上去的类名*/
.component-page a {
text-decoration: none;
}
.component-page a:hover {
text-decoration: none;
}
.component-page {
padding: 15px 20px;
text-align: left;
color: #ccc;
text-align: center;
}
.component-page a {
display: inline-block;
color: #428bca;
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
border: 1px solid #ddd;
margin: 0 2px;
border-radius: 4px;
vertical-align: middle;
}
.component-page a:hover {
text-decoration: none;
border: 1px solid #428bca;
}
.component-page span.current {
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #fff;
background-color: #428bca;
border: 1px solid #428bca;
border-radius: 4px;
vertical-align: middle;
}
.component-page span.disabled {
display: inline-block;
height: 25px;
line-height: 25px;
padding: 0 10px;
margin: 0 2px;
color: #bfbfbf;
background: #f2f2f2;
border: 1px solid #bfbfbf;
border-radius: 4px;
vertical-align: middle;
}
效果图
分页组件
