JQuery让前端飞程序员

jquery分页插件的修改

2017-04-25  本文已影响149人  scarecrowlxb

前言

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

效果图

分页组件
上一篇下一篇

猜你喜欢

热点阅读