题解 | #分页#

这个题目的边界要求，不明确，不过，问题不大，改个范围就可以了

本题的重点有两个

1.排除无用数据，用val函数

我不知道这个出题人，是哪里搞来的val函数，如下图所示，可见，该函数原来的作用多半是用于校正current的范围，是有作用的，所以我们需要有该功能的函数val

但是，单纯在本环境中执行该函数，并没有任何作用，甚至，还多执行了一遍this.html()函数，浪费内存，所以，为了适应本环境，我修改了val函数的代码，如下：

如果argument的长度为0，this.current 肯定是undefined

如果current的值范围不符合要求，直接返回false，这组件，不建了，直接退出

记得，正常情况下，return true，不然可就报错了

2.根据total和current的值去生成符合题目要求的html

a.total<5，首页、末页不用生成

b.total>5 && current <=3 显示末页

c.total>5 && total - current <= 2 也就是他们之间的间隔范围在0~2之内，比如total=10，current可以等于10、9、8

d.total>5 && current>=3 && current + 2 <= total 居中显示current，可以想象一下在total>5 && current>=3的情况下，此时，current站在中间，是不是往前补两个格子，往后补两个格子，都有数据，而不是空白，你就能理解为什么是current + 2 <= total 了

    function Pagination(container, total, current) {
      this.total = total;
      this.current = current;
      this.html = html;
      this.val = val;
      this.el = document.createElement('ul'); //TODO: 创建分页组件根节点
      if (!this.el) return;

      if (!this.val(current)) {
        return
      }

      this.el.innerHTML = this.html();
      container.appendChild(this.el);
      this.el.className = this.total <= 1 ? 'pagination hide' : 'pagination'; //TODO: 判断是否需要隐藏当前元素

      function html() {
        if (this.total <= 1) return '';

        //TODO: 生成组件的内部html字符串
        let htmlStr = ''
        if (total <= 5) {
          for (let i = 1; i <= this.total; i++) {
            if (i == this.current) {
              htmlStr += `<li class="current">${i}</li>`
              continue
            }
            htmlStr += `<li>${i}</li>`
          }
        } else if (this.total > 5 && this.current <= 3) {
          // 只显示末页
          for (let i = 1; i <= 5; i++) {
            if (i == this.current) {
              htmlStr += `<li class="current">${i}</li>`
              continue
            }
            htmlStr += `<li>${i}</li>`
          }
          htmlStr += '<li>末页</li>'
        } else if (this.total > 5 && this.total - this.current <= 2) {
          htmlStr += '<li>首页</li>'
          for (let i = this.total - 4; i <= this.total; i++) {
            if (i == this.current) {
              htmlStr += `<li class="current">${i}</li>`
              continue
            }
            htmlStr += `<li>${i}</li>`
          }
        } else if (this.total > 5 && this.current >= 3 && this.current + 2 <= this.total) {
          htmlStr += '<li>首页</li>'
          for (let i = this.current - 2; i <= this.current + 2; i++) {
            if (i == this.current) {
              htmlStr += `<li class="current">${i}</li>`
              continue
            }
            htmlStr += `<li>${i}</li>`
          }
          htmlStr += '<li>末页</li>'
        }
        return htmlStr
      }

      // 校正current的值，调用this.html()
      function val(current) {
        if (arguments.length === 0) return this.current; // 返回undefined
        if (current < 1 || current > this.total) return false;
        return true
      };
    }