zoukankan      html  css  js  c++  java
  • jquery分页插件的修改

    前言

    最近分页功能使用的比较多,所以从网上下载个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;
    }
    
    

    效果图
    分页组件

  • 相关阅读:
    博客园
    未释放的已删除文件
    ssh连接缓慢
    剑指 Offer 38. 字符串的排列
    剑指 Offer 37. 序列化二叉树
    剑指 Offer 50. 第一个只出现一次的字符
    剑指 Offer 36. 二叉搜索树与双向链表
    剑指 Offer 35. 复杂链表的复制
    剑指 Offer 34. 二叉树中和为某一值的路径
    剑指 Offer 33. 二叉搜索树的后序遍历序列
  • 原文地址:https://www.cnblogs.com/scarecrowlxb/p/6760581.html
Copyright © 2011-2022 走看看