随着近几年前端行业的迅猛发展，各种层出不穷的新框架，新方法让我们有点眼花缭乱。
最近刚好比较清闲，所以没事准备撸撸前端的根基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 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 href="#" >上一页</a><a attr-action="setWhat" href="#" >1</a>`+str }; if(page<total){ str = str+`<a attr-action="setWhat" href="#" >${total}</a><a 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> <div> </div> </body> <script type="text/javascript" src="https://www.jb51.net/js/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/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>