随着近几年前端行业的迅猛发展,各种层出不穷的新框架,新方法让我们有点眼花缭乱。
最近刚好比较清闲,所以没事准备撸撸前端的根基javascript,纯属练练手,写个分页,顺便跟大家分享一下
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'),listenersPre);//点击上一页
$on(document.getElementById('page-coat'),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 = '...'+str
};
if(page+4<total){
str = str+'...'
};
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,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],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;
}
};
使用方法:
用原生还是比较麻烦的,为了实现业务,还得去封装一个模仿JQ的.on事件绑定方法。写的比较简陋,一些配置接口没有暴露出来,还可以再抽象暴露。