前言
最近分頁功能使用的比較多，所以從網上下載個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;
}
效果圖
分頁組件
