题解 | #分页#

思路：注意，total表示总页数，current表示当前高亮的页数，最多连续显示五页，其中12345则是最大的没有首页尾页，其中123456且当前为3是最小的只显示尾页，其中当前页居中后面最少两页加一个尾页，即如果尾页减去当前页小于3则只显示首页，反之首页尾页均显示。

<script type="text/javascript">
  function Pagination(container, total, current) {
    this.total = total;
    this.current = current;
    this.html = html;
    this.val = val;
    //界面中存在id=jsContainer的节点A
    this.el = document.querySelector('.pagination'); //TODO: 创建分页组件根节点
    if (!this.el) return;
    this.val()
    this.el.innerHTML = this.html();
    container.appendChild(this.el);
    //total <= 1 时，隐藏该组件
    if (this.total <= 1) {
        this.el.className = 'hide'; //TODO: 判断是否需要隐藏当前元素
    }
    function html() {
        if (this.total <= 1) return '';
        // 如果total<=5，则显示全部页数，隐藏“首页”和“末页”元素
        // 小于5页
        let li = ''
        if (this.total <= 5) {
            for (let i = 1; i <= total; i++) {
                if (this.current == i) {
                    li += `<li class="current">${i}</li>`
                } else {
                    li += `<li>${i}</li>`
                }
            }
        } else if (this.total > 5) {
            // 判断是否显示首页末页
            // 当current居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素
            // 只显示末页
            if (this.current <= 3) {
                for (let i = 1; i <= 5; i++) {
                    if (this.current === i) {
                        li += `<li class="current">${i}</li>`
                    } else {
                        li += `<li>${i}</li>`
                    }
                }
                li += `<li>末页</li>`
            } else if (this.total - this.current < 3) {
                // 只显示首页
                li += `<li>首页</li>`
                for (let i = this.total - 4; i <= this.total; i++) {
                    if (this.current === i) {
                        li += `<li class="current">${i}</li>`
                    } else {
                        li += `<li>${i}</li>`
                    }
                }
            } else {
                // 首末页都要显示
                li += `<li>首页</li>`
                for (let i = this.current - 2; i <= this.current + 2; i++) {
                    if (this.current === i) {
                        li += `<li class="current">${i}</li>`
                    } else {
                        li += `<li>${i}</li>`
                    }
                }
                li += `<li>末页</li>`
            }
        }
        return li
    }
    function val(current) {
        if (arguments.length === 0) return this.current;
        if (current < 1 || current > this.total || current === this.current) return;
        this.current = current;
        this.el.innerHTML = this.html();
    };
}
</script>

总结：首先读清题意，其次明确哪里待完善，最后考虑如何完善。