隨著近幾年前端行業的迅猛發展，各種層出不窮的新框架，新方法讓我們有點眼花繚亂。

最近剛好比較清閑，所以沒事準備擼擼前端的根基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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page}</a>` for(var i=1;i<=3;i++){ if(page-i>1){  str = `<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${page-i}</a>`+str } if(page+i<total){  str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${(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="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁</a><a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >1</a>`+str }; if(page<total){ str = str+`<a attr-action="setWhat" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >${total}</a><a class="lmw-add" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁</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; }};