原生js编写基于面向对象的分页组件
本文实例为大家分享了一个基于面向对象的分页组件的具体实现代码，供大家参考，具体内容如下
文字表达有限，直接上代码了
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>一个基于面向对象的分页组件</title>
<style>
html,body{padding:0;margin:0;}
p{padding:0;margin:0;}
a{text-decoration:none}
.Paging{overflow:hidden;}
.Paging-item{float:left;padding:10px15px;background:#4caf50;color:#fff;margin-left:5px;}
.Paging-item-active{background:#ff568e;}
</style>
</head>
<body>
<divid="page"></div>
</body>
<script>
//分页组件类
functionPaging(container,opt){
//自定义事件
this.eventHandlers={};
//默认设置
this.config={
nowNum:1,
allNum:10,
callback:function(){}
}
if(opt){
this.extend(this.config,opt);
}
//外层容器
this.Box=null;
//渲染组件
this.render(container);
}
Paging.prototype={
constructor:Paging,
/*绑定自定义事件*/
on:function(eventType,eventHandler){
if(typeofthis.eventHandlers[eventType]==='undefined'){
this.eventHandlers[eventType]=[];
}
this.eventHandlers[eventType].push(eventHandler);
},
/*触发自定义事件*/
fire:function(eventType){
if(this.eventHandlers[eventType]instanceofArray){
varlen=this.eventHandlers[eventType].length;
for(vari=0;i<len;i++){
this.eventHandlers[eventType][i]();
}
}
},
/*渲染UI结构*/
renderUI:function(){
this.Box=document.createElement('div');
this.Box.className='Paging';
varnowNum=this.config.nowNum;
varallNum=this.config.allNum;
//当前页大于或等于4，第一页才能隐藏，总数大于5才能显示首页
if(nowNum>=4&&allNum>=6){
varpageA=document.createElement('a');
pageA.className='Paging-itemPaging-item-start'
pageA.href='#1';
pageA.innerHTML='首页';
this.Box.appendChild(pageA);
};
//当前页只要不是第一页就显示上一页
if(nowNum>=2){
varpageA=document.createElement('a');
pageA.className='Paging-itemPaging-item-pre'
pageA.href='#'+(nowNum-1);
pageA.innerHTML='上一页';
this.Box.appendChild(pageA);
}
//只有5页时
if(allNum<=5){
for(vari=1;i<=allNum;i++){
varpageA=document.createElement('a');
pageA.className='Paging-item'
pageA.href='#'+i;
if(nowNum==i){
pageA.className='Paging-itemPaging-item-active'
pageA.innerHTML=i;
}else{
//pageA.innerHTML='['+i+']';
pageA.innerHTML=i;
}
this.Box.appendChild(pageA);
}
}else{
for(vari=1;i<=5;i++){
varpageA=document.createElement('a');
pageA.className='Paging-item'
pageA.href='#'+(nowNum-3+i);
//对当前页为前2页的处理
if(nowNum===1||nowNum===2){
pageA.href='#'+i;
if(nowNum===i){
pageA.className='Paging-itemPaging-item-active'
pageA.innerHTML=i;
}else{
//pageA.innerHTML='['+i+']';
pageA.innerHTML=i;
}
}/*对当前页为后2页的处理*/elseif((allNum-nowNum)===0||(allNum-nowNum)===1){
/*==
<ahref="">[6]</a>
<ahref="">[7]</a>
<ahref="">[8]</a>
<ahref="">[9]</a>
<ahref="">10</a>
==*/
pageA.href='#'+((allNum-5)+i);
if((allNum-nowNum)===0&&i===5){
pageA.className='Paging-itemPaging-item-active'
pageA.innerHTML=((allNum-5)+i);
}elseif((allNum-nowNum)===1&&i===4){
pageA.className='Paging-itemPaging-item-active'
pageA.innerHTML=((allNum-5)+i);
}else{
//pageA.innerHTML='['+((allNum-5)+i)+']'
pageA.innerHTML=((allNum-5)+i)
}
}else{
if(nowNum===(nowNum-3+i)){
pageA.className='Paging-itemPaging-item-active'
pageA.innerHTML=(nowNum-3+i);
}else{
//pageA.innerHTML='['+(nowNum-3+i)+']'
pageA.innerHTML=(nowNum-3+i)
}
}
this.Box.appendChild(pageA);
}
}
if((allNum-nowNum)>=1){
varpageA=document.createElement('a');
pageA.className='Paging-itemPaging-item-next'
pageA.href='#'+(nowNum+1);
pageA.innerHTML='下一页';
this.Box.appendChild(pageA);
}
//选择7为标准，或7以下才能显示
if((allNum-nowNum)>=3&&allNum>=6){
varpageA=document.createElement('a');
pageA.className='Paging-itemPaging-item-end'
pageA.href='#'+allNum;
pageA.innerHTML='尾页';
this.Box.appendChild(pageA);
}
},
/*为UI绑定事件*/
bindUI:function(){
varself=this;
this.config.callback(this.config.nowNum,this.config.allNum);
//利用事件委托
self.Box.onclick=function(e){
vare=e||window.event;
vartarget=e.target||e.srcElement;
if(typeofe.target.getAttribute('href')==='string'){
varnowNum=parseInt(target.getAttribute('href').substring(1));
//console.log(nowNum);
self.Box.innerHTML='';
newPaging(null,{
nowNum:nowNum,
allNum:self.config.allNum,
callback:self.config.callback
})
}
returnfalse;
}
},
/*渲染UI*/
render:function(container){
this.renderUI();
this.bindUI();
if(container){
varcon=document.getElementById(container);
con.appendChild(this.Box);
}else{
document.body.appendChild(this.Box);
}
},
/*继承对象*/
extend:function(obj1,obj2){
for(attrinobj2){
obj1[attr]=obj2[attr];
}
}
}
//初始化调用
varpage=newPaging(null,{
nowNum:1,
allNum:10,
callback:function(nowNum,allNum){
console.log('当前页：'+nowNum)
console.log('总页：'+allNum)
}
});
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。