本机js编写面向对象的分页组件。
在本文中，我们分享了面向对象分页组件的具体实现代码，供您参考。详情如下文本表达式是有限的，直接在代码上。
面向对象的分页组件
HTML，正文{填充：0；边距：0；}
{填充：0；边距：0；}
{文字装饰：无}
分页{溢出：隐藏；}
寻呼项目{浮动：左；填充：10px 15px；背景：# 4caf50；颜色：# FFF；margin-left: 5px；}
项目背景：{。分页活动# ff568e；}
分页组件类
函数分页（容器，选择）{
自定义事件
这eventhandlers = { }；
默认设置
这个。
NowNum：1，
AllNum：10，
回调：（函数）{ }
}
如果（选择）{
This.extend（this.config，OPT）；
}
/外部容器
此框= null；
渲染组件
This.render（容器）；
}
分页.原型= {
构造函数：分页，
绑定自定义事件
关于函数（事件类型，事件句柄）{
如果（typeof，eventhandlers {事件类型} = 'undefined）{
这个eventhandlers { } = { }事件类型；
}
这个eventhandlers { }推（EventHandler）事件类型；
}，
触发自定义事件
火：功能（事件类型）{
如果（这。eventhandlers { } {事件类型是数组）
VaR len =这。eventhandlers { }长的事件类型；
对于（var i = 0；i < i；i + +）{
这个eventhandlers { } { }（）事件类型；
}
}
}，
用户界面的结构
任德瑞：函数（）{
这个盒子= document.createelement（'div）；
这个盒子。类名= 'paging；
无功nownum = this.config.nownum；
无功allnum = this.config.allnum；
当前页面大于或等于4，第一页可以隐藏，总数超过5，以便显示主页。
如果（nownum > = 4 allnum > = 6）{
VaR页= document.createelement（A）；
PageA。类名= 'paging-item寻呼项目启动
PageA。href =1#；
PageA。innerHTML =主页；
this.box.appendchild（页）；
}；
当前页，只要它不是第一页显示
如果（nownum > = 2）{
VaR页= document.createelement（A）；
PageA。类名= 'paging-item寻呼项目前
PageA。href =# +（nownum-1）；
PageA。innerHTML =；
this.box.appendchild（页）；
}
当页面仅为5 /
如果（allnum <= 5）{
对于（var i = 1；i < = allnum；i++）{
VaR页= document.createelement（A）；
PageA。类名= 'paging-item
PageA。href =我# +；
如果（nownum = =我）{
PageA。类名= 'paging-item寻呼项目活动
PageA。innerHTML =我；
其他{ }
PageA。innerHTML ={+我+}；
PageA。innerHTML =我；
}
this.box.appendchild（页）；
}
其他{ }
对于（var i = 1；i < 5；i + +）{
VaR页= document.createelement（A）；
PageA。类名= 'paging-item
PageA。href =# +（nownum-3 +我）；
当前页是前2页。
如果（nownum = = = 1 = = = 2 { nownum | |）
PageA。href =我# +；
如果（nownum =我）{
PageA。类名= 'paging-item寻呼项目活动
PageA。innerHTML =我；
其他{ }
PageA。innerHTML = / /{+我+}；
PageA。innerHTML =我；
}
* /如果在当前页2页} / *（（allnum nownum）= = = 0 | |（allnum nownum）= 1）{
{ 6 }
{ 7 }
{ 8 }
{ 9 }
十
=
PageA。href =# +（（allnum-5）+我）；
如果（（allnum nownum）= = = = = = 0我5）{
PageA。类名= 'paging-item寻呼项目活动
PageA。innerHTML =（（（allnum-5）+我）；
} else if（（allnum nownum）= = = = = = 1我4）{
PageA。类名= 'paging-item寻呼项目活动
PageA。innerHTML =（（（allnum-5）+我）；
其他{ }
{+/页.innerHTML =（（allnum-5）+我）+}
PageA。innerHTML =（（allnum-5）+我）
}
其他{ }
如果（nownum = = = {（nownum-3 +我））
PageA。类名= 'paging-item寻呼项目活动
PageA。innerHTML =（nownum-3 +我）；
其他{ }
{+ / /页.innerHTML =（nownum-3 +我）+}
PageA。innerHTML =（nownum-3 +我）
}
}
this.box.appendchild（页）；
}
}
如果（（allnum nownum）> = 1）{
VaR页= document.createelement（A）；
PageA。类名= 'paging-item分页项下的
PageA。href =# +（nownum + 1）；
PageA。innerHTML =；
this.box.appendchild（页）；
}
7 7或以下为标准，以便显示
如果（（allnum nownum）allnum > = 3 > = 6）{
VaR页= document.createelement（A）；
PageA。类名= 'paging-item寻呼项目结束
PageA。href =# + allnum；
页.innerHTML =；
this.box.appendchild（页）；
}
}，
UI绑定事件
BindUI：函数（）{
var =；
This.config.callback（this.config.nownum，这个配置。allnum）；
使用事件委托
自我。箱。onclick=功能（e）{
VaR E = e window.event | |；
VaR目标= e.target e.srcelement | |；
如果（typeof e.target.getattribute（'href）= 'String'）{
无功nownum = parseInt（target.getattribute（'href）。Substring（1））；
/ / console.log（nownum）；
自我。箱.innerHTML =；
新分页（空，{
NowNum：nownum，
AllNum：self.config.allnum，
self.config.callback回调：
}）
}
返回false；
}
}，
渲染：函数（容器）{
This.renderUI（）；
This.bindUI（）；
如果（容器）{
无功控制= document.getelementbyid（容器）；
Con.appendChild（这个盒子）；
其他{ }
document.body.appendchild（这个盒子）；
}
}，
对象继承
扩展功能（obj1，obj2）{
对于（ATTR在obj2）{
obj1 { } { } = obj2 attr属性；
}
}
}
初始化调用
页=新的分页（空，{
NowNum：1，
AllNum：10，
回调函数：函数（nownum，allnum）{
console.log（当前页：+ nownum ）
console.log（页：+ allnum ）
}
}）；
以上是本文的全部内容，希望能对您有所帮助，希望大家多多支持。