随着近几年前端行业的迅猛发展，各种层出不穷的新框架，新方法让我们有点眼花缭乱。
最近刚好比较清闲，所以没事准备撸撸前端的根基javascript,纯属练练手，写个分页，顺便跟大家分享一下
function pageFunc(conf){ this.myFunc = conf.click //用户点击要执行的方法 this.total = conf.total; //总页数 this.currentPage = 1; //当前页码 this.init() //初始化 } pageFunc.prototype.init = function(){ var total = this.total, currentPage = this.currentPage, _this = this; listeners = { 'setWhat' : function(opts) { _this.aClick(opts.src) return false; } }; listenersPre = { 'lmw-pre' : function(opts) { _this.prevClick() return false; } }; listenersAdd = { 'lmw-add' : function(opts) { _this.addClick() return false; } }; var rootele = this.createPage(1,total); document.getElementById('page-coat').innerHTML = rootele $on(document.getElementById('page-coat'), ['click'], listeners);//点击a标签 $on(document.getElementById('page-coat'), ['click'], listenersPre);//点击上一页 $on(document.getElementById('page-coat'), ['click'], listenersAdd);//点击下一页 } //创建HTML分页结构字符串 pageFunc.prototype.createPage = function(page,total){ var str = `<a class="lmw-current" href="#">${page}</a>` for(var i=1;i<=3;i++){ if(page-i>1){ str = `<a attr-action="setWhat" href="#">${page-i}</a>`+str } if(page+i<total){ str = str+`<a attr-action="setWhat" href="#">${(page+i)}</a>` } }; if(page-4>1){ str = '<span>...</span>'+str }; if(page+4<total){ str = str+'<span>...</span>' }; if(page>1){ str = `<a class="lmw-pre" href="#">上一页</a><a attr-action="setWhat" href="#">1</a>`+str }; if(page<total){ str = str+`<a attr-action="setWhat" href="#">${total}</a><a class="lmw-add" href="#">下一页</a>` }; return str } //上一页方法 pageFunc.prototype.prevClick = function(){ var total = this.total var va = --this.currentPage var newret = this.createPage(va, total) document.getElementById('page-coat').innerHTML = newret this.myFunc(va) } //下一页方法 pageFunc.prototype.addClick = function(){ var total = this.total var va = ++this.currentPage var newret = this.createPage(va, total) document.getElementById('page-coat').innerHTML = newret this.myFunc(va) }; //点击方法 pageFunc.prototype.aClick = function(_this){ var total = this.total var va = parseInt(_this.innerText); this.currentPage = va var rootele = this.createPage(va, total) document.getElementById('page-coat').innerHTML = rootele this.myFunc(va) }; //二：封装事件代理方法 function $on(dom, event, listeners) { $addEvent(dom, event, function(e) { var e = e || window.event, src = e.target || e.srcElement, action, returnVal; while (src && src !== dom) { action = src.getAttribute('attr-action') || src.getAttribute('class') ; if (listeners[action]) { returnVal = listeners[action]({ src : src, e : e, action : action }); if (returnVal === false) { break; } } src = src.parentNode; } }); }; //1、封装跨浏览器事件绑定方法 function $addEvent(obj, type, handle) { if(!obj || !type || !handle) { return; } if( obj instanceof Array) { for(var i = 0, l = obj.length; i < l; i++) { $addEvent(obj[i], type, handle); } return; } if( type instanceof Array) { for(var i = 0, l = type.length; i < l; i++) { $addEvent(obj, type[i], handle); } return; } //2、解决IE中this指向window的问题 function createDelegate(handle, context) { return function() { return handle.apply(context, arguments); }; } if(window.addEventListener) { var wrapper = createDelegate(handle, obj); obj.addEventListener(type, wrapper, false); } else if(window.attachEvent) { var wrapper = createDelegate(handle, obj); obj.attachEvent("on" + type, wrapper); } else { obj["on" + type] = handle; } };
使用方法：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>分页效果</title>
<style type="text/css">
#page-coat a{
text-decoration:none;
display: inline;
float: left;
padding: 3px 10px 3px 10px;
overflow: hidden;
border:1px solid #ccc;
color:#999;
margin-right: 5px;
cursor: pointer;
background: #fff;
}
#page-coat a:hover{
border: 1px solid #FF6600;
background-color: #FF6600;
color: #fff;
}
#page-coat span{
display: inline;
float: left;
color:#999;
background: #fff;
}
#page-coat a.lmw-current{
color: #FF6600;
border: 1px solid #FF6600;
background-color: #FFEEE5;
}
</style>
</head>
<body class="l-bg2">
<div id="page-coat">
</div>
</body>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript">
var conf = {
'total':100,
'click':function(e){ //e为当前页码
/* $.get('/php',{"page":e},function(data){
console.log('ok')
})*/
}
}
var page = new pageFunc(conf);
</script>
</html>
用原生还是比较麻烦的，为了实现业务，还得去封装一个模仿JQ的.on事件绑定方法。写的比较简陋，一些配置接口没有暴露出来，还可以再抽象暴露。
欢迎加入大前端交流群！群号：277942610，VIP新群