day35-面向对象案例一 分页

1.面向对象案例一分页

结构分析：

<div>
    <div class="first">首页</div>
    <div class="prev">上一页</div>
    <div class="list">
        <p>1</p>
        <p>2</p>
        <p>3</p>
        <p>4</p>
        <p>5</p>
    </div>
    <div class="next">下一页</div>
    <div class="last">尾页</div>
</div>

为了好区分每个div，所以每个div都加上类名

页码规律分析：

1. 总页数小于等于5时，展示页码尾：1~总页数

2. 总页数大于5时

   • 当前页小于等于3，展示1~5

   • 当前页大于等于总页数-2，展示总页数-4~总页数

   • 其余情况展示当前页-2~当前页+2

代码分析：

代码基本结构

function Page(classname){
    this.box = document.querySelector('.' + classname)
    
}
​
var page = new Page(".pagination")

参数分析

1. 上一页、下一页、首页、尾页 这些显示的文字，能满足大部分人的需求，但不能满足所有项目的需求，为了让封装好的插件更具适用性，将这些显示的文字作为参数

2. 在代码需要用总页数做判断，是需要计算总页数的，公式如下：总页数 = Math.ceil(数据总条数/每页显示的条数)，而数据总条数和每页显示的条数又要根据项目的实际情况，也就需要在调用本插件的时候当做参数传传入

由于参数较多，所以将所有参数组成对象传入，即：

function Page(classname,options){
    this.box = document.createElement('div') // 自己创建一个div容器
    // 将创建好的div容器放到预定好的盒子中
    document.querySelector('.' + classname).appendChild(this.box) 
    // 给创建好的div设置样式
    this.setStyle(this.box,{
        display:"flex",
        justifyContent:"center",
        alignItems:"center"
    })
    
}
// 设置样式的方法
Page.prototype.setStyle = function(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr]
    }
}
// new构造函数并传入需要的实参
var page = new Page(".pagination",{
    language:{
        first:"首页",
        prev:"上一页",
        next:"下一页",
        last:"尾页"
    },
    pageData:{
        total:100,
        pageSize:10
    }
})

代码逻辑分析：

参数是可选项，所以要对参数做默认值

function Page(classname,options={}){ // 给options设置默认值
     this.box = document.createElement('div') // 自己创建一个div容器
    // 将创建好的div容器放到预定好的盒子中
    document.querySelector('.' + classname).appendChild(this.box) 
    // 给创建好的div设置样式
    this.setStyle(this.box,{
        display:"flex",
        justifyContent:"center",
        alignItems:"center"
    })
    // 将传入的options参数作为对象的options属性
    this.options = options
    // 自定义默认值
    this.default = {
        language:{
            first:"首",
            prev:"上",
            next:"下",
            last:"尾"
        },
        pageData:{
            total:1000,
            pageSize:12
        }
    }
    // 调用设置默认值的方法
    this.setDefault()
}
// 设置默认值的方法
Page.prototype.setDefault = function(){
    // 如果传入的options中传了language键
    if(this.options.language){
        for(var attr in this.options.language){
            // 使用options传入的值替换掉自定义的默认值
            this.default.language[attr] = this.options.language[attr]
        }
    }
    if(this.options.pageData){
        for(var attr in this.options.pageData){
            this.default.pageData[attr] = this.options.pageData[attr]
        }
    }
}

此时参数就成了可选项

有了参数后，可以计算总页数，定义当前页，....

创建div标签

Page.prototype.createDiv = function(){
    for(var attr in this.default.language){
        var div = document.createElement('div')
        div.innerText = this.default.language[attr];
        div.className = attr
        this.setStyle(div,{
            margin:"5px",
            padding:"5px",
            border:"1px solid #000"
        })
        this.box.appendChild(div)
    }
}

创建好的标签少了中间放页码的div，所以要在自定义的默认值中，加一个list，用来存放这div

this.default = {
    language:{
        first:"首",
        prev:"上",
        list:'',
        next:"下",
        last:"尾"
    },
    pageData:{
        total:1000,
        pageSize:12
    }
}

对创建标签的方法进行修改 - 因为放页码的盒子要又不同的样式以及在别的方法中会用到这div，所以将div赋值给一个自定义的属性：

对象新增属性

this.setDefault()
// 总页数属性
this.totalPage = Math.ceil(this.default.pageData.total/this.default.pageData.pageSize)
// 当前页属性 - 当前页默认为1
this.currentPage = 1
// 设置放页码盒子的属性
this.list = null

创建页码的方法修改:

Page.prototype.createDiv = function(){
    for(var attr in this.default.language){
        var div = document.createElement('div')
        if(attr=='list'){ // 如果是list，就将div赋值给自定义的属性list
            this.list = div
        }else{
            // 其余div都设置内容和样式
            div.innerText = this.default.language[attr];
            this.setStyle(div,{
                margin:"5px",