牛客练习 2018.10.19

最新推荐文章于 2022-07-22 11:31:27 发布

DiuDiu_yang

最新推荐文章于 2022-07-22 11:31:27 发布

阅读量238

点赞数

CC 4.0 BY-SA版权

分类专栏：前端面试文章标签：函数闭包 arguments call apply

本文链接：https://blog.youkuaiyun.com/qq_41261490/article/details/83153129

前端面试专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了一个分页组件的实现方法，通过一个名为pagination的函数，实现了在不同条件下分页显示的逻辑。同时，文章还讲解了如何通过二次封装函数partialUsingArguments来简化函数调用，提高代码复用性和可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分页组件是web开发中常见的组件，请完成pagination函数，在id为jsPagination的DOM元素中完成分页的显示部分，需求如下
1、最多连续显示5页，居中高亮显示current页（如demo1所示)
2、total为0时，隐藏整个元素（如demo2所示）
3、如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素（如demo3所示）
4、当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如demo4和demo5所示)
5、total、current均为正整数，1 <= current <= total

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none!important;
        }
        .pagination{
            margin: 0 auto;
            padding: 0;
            list-style: none;
            text-align: center;
        }
        .pagination li{
            display: inline-block;
            width: 30px;
            height: 30px;
            overflow: hidden;
            line-height: 30px;
            margin: 0 5px 0 0;
            font-size: 14px;
            text-align: center;
            border: 1px solid #00bc9b;
            color: #00bc9b;
            cursor: pointer;
        }
        .pagination li.current,
        .pagination li:hover{
            background: #00bc9b;
            color: #ffffff;
        }
        .demo {
            margin: 10px 0;
            padding: 10px;
            background: #eeeeee;
            text-align: center;
        }
    </style>
</head>
<body>
<ul class="pagination" id="jsPagination">
    <li>首页</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>末页</li>
</ul>
</body>
<script>
    //分成四种情况：只有首页；只有末页；首页末页都有；首页末页都没有
    function pagination(total, current) {
        var wrapper = document.getElementById('jsPagination'),
            liList = wrapper.children;
        if(total == 0){ //demo2
            wrapper.className = 'hide';
        }else if(total <= 5){ //demo3 首页末页都没有
            liList[0].className = 'hide';
            liList[6].className = 'hide';
            for(var i=1;i<=5;i++){
                liList[i].innerHTML = i;
                if(i == current){
                    liList[i].className = 'current';
                }
                if(i>total){
                    liList[i].className = 'hide';
                }
            }
        }else{ //total>5
            if(current<=3){ //这时没有首页 只有尾页 demo4
                liList[0].className = 'hide';
                for(var i=1;i<=5;i++){
                    liList[i].innerHTML = i;
                    if(i == current){
                        liList[i].className = 'current';
                    }
                }
            }else{//这时有首页
                if(current+2>=total){//没有末页  demo5
                    liList[6].className = 'hide';
                    for(var i=5;i>0;i--){
                        liList[i].innerHTML = total;
                        if(total == current){
                            liList[i].className = 'current';
                        }
                        total--;
                    }
                }else{//也有末页 demo1
                    var start = current-2;
                    for(var i=1;i<=5;i++){
                        liList[i].innerHTML = start;
                        if(start == current){
                            liList[i].className = 'current';
                        }
                        start++;
                    }
                }
            }
        }
    }
    pagination(10,5);
</script>
</html>

二次封装函数

实现函数 partialUsingArguments，调用之后满足如下条件：
1、返回一个函数 result
2、调用 result 之后，返回的结果与调用函数 fn 的结果一致
3、fn 的调用参数为 partialUsingArguments 的第一个参数之后的全部参数以及 result 的调用参数

function partialUsingArguments(fn) {
     //先获取p函数第一个参数之后的全部参数
     var args = Array.prototype.slice.call(arguments,1);
     //声明result函数
     var result = function(){
         //使用concat合并两个或多个数组中的元素
         return fn.apply(null, args.concat([].slice.call(arguments)));
     }
     return result;
 }

arguments不能用slice方法直接截取，需要先转换为数组，var args = Array.prototype.slice.call(arguments);合并参数可以使用concat方法，并且也需要将arguments先转换为数组才能使用concat进行合并。最用使用apply执行传入的函数即可。

args.concat([].slice.call(arguments)) //将参数转化为数组，然后合并