javascript面向对象编程（实践之无刷新分页插件）

最新推荐文章于 2022-06-20 22:57:15 发布

BeyondQqiang

最新推荐文章于 2022-06-20 22:57:15 发布

阅读量1k

点赞数

分类专栏： javaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/BeyondQqiang/article/details/18664997

版权

javaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

经过前面六章javascript的面向对象编程学习，对于js的面向对象没有那么陌生，逐渐的开始了解了一些概念，但是光有理论是不行的，实践才是出真知的道路，所以这里就利用前面的知识，当然最主要的都是最后总结出来的一个“甘露模型”，当然这个甘露模型是我自己经过感悟李战大哥所讲的经过个人更改的，如果你有兴趣研究的话推荐去看李战大哥的《悟透javascript》。

开始准备写一个简单的贪吃蛇游戏的，但是最后还是由于所学知识有限，没能够很好的构思好，所以没有成功，其实之前我有写用js写过一个贪吃蛇游戏，但是代码比较乱，准备这次完善的，但是这么短的时间终究没有开动，恰好前天看到有人在用js做无刷新分页，于是就有了这个想法，也立马开始实践，经过断断续续一天的编码终于也算是实现了，下面先贴出效果图：

希望有能够理解的朋友给出点意见，我还同时会把代码放到开源中国上，期待大神给出建议！

由于采用的思想是分页仅仅做分页功能，并不去处理数据，所以我在代码吧直接把服务器产生的数据直接返回并未做处理。

代码包含四个文件，一个是Demo页面，用来做使用指导。一个是之前写的一个ajax类库，一个就是这篇文章的主题js，一个就是一个简单的服务器脚本。全部贴上！

Demo页：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS分页插件</title>
<style type="text/css">
#easyPageDiv{ width:435px; height:40px; line-height:40px; border:1px solid #CCC; text-align:center;}
#easyPageDiv .easypage_ul{ list-style:none; margin:0; padding:0; margin-left:13px;}
#easyPageDiv .easypage_ul li{ float:left; margin-left:10px;}
#easyPageDiv .easypage_span{ float:left;margin:0; padding:0; margin-left:15px;}
</style>
</head>
<body>

<div id="easyPageDiv"></div>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="easypage.js"></script>
<script type="text/javascript">
window.onload = function() {
	var p = new easyPage({
		count : 22,
		num : 3,
		url : 'http://localhost/oasys/getnews.php',
		get : 'p',
		containr : document.getElementById('easyPageDiv')
	});
	p.showPage(function(data) {
		alert(data);	//这里接受服务器返回的数据,作为回调函数
	});
}
</script>
</body>
</html>

ajax类库：

/**
 * @todo	ajax库
 * @author	zhangqiang<501729495@qq.com>
 */
var Ajax = function() {
	var createXMLHttp= function() {
		var xmlhttp = null;
	    if ( window.XMLHttpRequest ) {		//IE7,Mozilla,safari,firefox,Opare......
	    	xmlhttp = new XMLHttpRequest();
	    }  else if ( window.ActiveXObject ) {	//Old version IE
	    	var XMLArray = new Array('MSxml2.XMLHTTP.5.0', 'MSxml2.XMLHTTP.4.0',
	                'MSxml2.XMLHTTP.3.0', 'MSxml2.XMLHTTP', 'Microsoft.XMLHTTP');
	        var success = false;
	        for( var i = 0;i < XMLArray.length && ! success; i++ ) {
	            try{
	                xmlhttp = new ActiveXObject( XMLArray[i] );	
	                success = true;
	                break;
	            } catch(e2) {}
	        }
	        if( ! success ) throw new Error('Fail To Create XMLHttpRequest Object');
	    }
        return xmlhttp;
	};
	var toQuery = function( o ) {
        if ( o == null || typeof(o) != 'object' ) return '';
        var _query = '', _str = '';
        for ( _key in o ) {
            if ( o.hasOwnProperty(_key) ) _str = _key + '=' + encodeURI(o[_key]);
            _query == '' ? _query += _str : _query += ('&'+_str);
        }
        return _query;
    };
	var statechange = function( xmlhttp, callback ) {
        xmlhttp.onreadystatechange = function() {
            if ( xmlhttp.readyState == 4 ) {
                if ( xmlhttp.status == 200 ) if ( callback != undefined ) callback(xmlhttp.responseText);
                else {
                    throw new Error('Request Error');
                }
            }
        };
    };
    return {
    	get : function( url, args, callback ) {
    		var xmlhttp = createXMLHttp();
            if ( xmlhttp == null ) return;
            var _query = toQuery(args);
            url = ( url.indexOf('?') != -1 ) ? url + '&' + _query : url + '?' + _query;

            //Register the onreadystatechange function
            statechange(xmlhttp, callback);
            xmlhttp.open('GET', url, true);
            xmlhttp.send();
    	},
    	post : function( url, args, callback ) {
    		//Create an ajax object
            var xmlhttp = createXMLHttp();
            if ( xmlhttp == null ) return;
            
            //Register the onreadystatechange function
            statechange(xmlhttp, callback);
            xmlhttp.open('POST', url, true);
            xmlhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xmlhttp.send(toQuery(args));
    	}
    };
}();

js分页库：

/**
 * @todo	分页库
 * @author	zhangqiang<501729495@qq.com>
 */
function Class(aBase, aDefine) {  
    function prototype_() {};  
    prototype_.prototype = aDefine;     //准备子类的方法  
    var aPrototype = new prototype_();  
    //准备父类的方法和属性  
    for ( k in aBase ) {  
        if ( k != '__construct' ) {  
            aPrototype[k] = aBase[k];  
        }  
    }  
    if ( aBase.__construct ) {  
        aPrototype.super = aBase.__construct;       //记录父类构造函数,做直接调用父类构造方法使用  
    }  
    aPrototype.parent = aBase;  //记录父类,做向上调用使用  
    aDefine.__construct.prototype = aPrototype;     //挂载原型  
    return aDefine.__construct;  
}  
var easyPage = Class(Object, {
	count : null,	//总条目数	
	num : null,		//每页显示的条目数
	total : null,	//总页数
	currentpage : null,	//当前页码
	url : null,		//点击地址
	containr : null,	//UI放置容器DIV
	get : null,			//地址栏获取的标记名,默认为esayp
	selfUI : null,		//自定义UI渲染函数
	idxLeft : 2,		//左边空出的页码个数
	
	__construct : function(args) {
		this.idxLeft = parseInt(args.idxLeft)&&parseInt(args.idxLeft) > 0 ? parseInt(args.idxLeft) : this.idxLeft;
		this.currentpage = 1;
		this.count = args.count;	
		this.num = args.num;		
		this.total = parseInt( this.count % this.num > 0 ? (this.count / this.num)+1 : this.count / this.num  );	
		this.url = args.url;	
		this.containr = args.containr;
		this.get = args.get || 'esayp';
	},
	showPage : function(fncall, fn) {
		this.selfUI = fn ? fn : null;
		this.startUI(fncall);
	},
	//绑定a标签的点击事件
	bindEvent : function(_oa, fncall, pnum) {
		_self = this;
		Ajax.post(_oa.href, {}, function(data) {
			fncall(data);
			_self.currentpage = pnum;
			_self.startUI(fncall);
		});	
		return false;
	},
	//启动渲染UI
	startUI : function(fncall) {
		//检测是否有自定义UI渲染函数
		//方便重写UI
		this.containr.innerHTML = '';
		if ( ! this.selfUI ) {
			this.renderUI(fncall, this);	
		} else {
			this.selfUI(fncall, this);
		}
	},
	//渲染分页UI
	renderUI : function(fncall, _self) {
		var _UI = {first : '首页', prev : '上一页', next : '下一页', last : '尾页'};
		var _oUl = document.createElement('ul');
		_oUl.className = 'easypage_ul';
		for ( k in _UI ) {
			if ( k == 'next' ) {
				var iStart = _self.currentpage-_self.idxLeft <= 0 ? 1 : _self.currentpage-_self.idxLeft;
				var iEnd = iStart + _self.idxLeft*2;
				iEnd = iEnd >= _self.total ? _self.total : iEnd;
				for ( var i = iStart; i <= iEnd; i++ ) {
					(function(i) {
						var _oLi = document.createElement('li');
						var _oA = document.createElement('a');
						_oA.href = _self.url+'?'+_self.get+'='+i;
						_oA.onclick = function() {
							_self.bindEvent(this, fncall, i);
							return false;
						}
						_oA.innerHTML = i;
						_oLi.appendChild(_oA);
						_oUl.appendChild(_oLi);	
					})(i);
				}
			}
			(function(k) {
				var _oLi = document.createElement('li');
				var _oA = document.createElement('a');
				switch ( k ) {
					case 'first' :
						_oA.href = _self.url+'?'+_self.get+'=1';
						_oA.onclick = function() {
							_self.bindEvent(this, fncall, 1);
							return false;
						}
						break;
					case 'prev' :
						_oA.href = _self.url+'?'+_self.get+'='+(_self.currentpage-1 <= 0 ? 1 : _self.currentpage-1);
						_oA.onclick = function() {
							_self.bindEvent(this, fncall, _self.currentpage-1 <= 0 ? 1 : _self.currentpage-1);
							return false;
						}
						break;
					case 'next' :
						_oA.href = _self.url+'?'+_self.get+'='+(_self.currentpage+1 > _self.total ? _self.total : _self.currentpage+1);
						_oA.onclick = function() {
							_self.bindEvent(this, fncall, _self.currentpage+1 > _self.total ? _self.total : _self.currentpage+1);
							return false;
						}
						break;
					case 'last' :
						_oA.href = _self.url+'?'+_self.get+'='+_self.total;
						_oA.onclick = function() {
							_self.bindEvent(this, fncall, _self.total);
							return false;
						}
						break;
				}
				_oA.innerHTML = _UI[k];
				_oLi.appendChild(_oA);
				_oUl.appendChild(_oLi);	
			})(k);
		}
		var _oSpan = document.createElement('span');
		_oSpan.className = 'easypage_span';
		_oSpan.innerHTML = _self.currentpage+'/'+_self.total+'  共 '+_self.total+' 页';
		_self.containr.appendChild(_oUl);
		_self.containr.appendChild(_oSpan);
	}
});

服务器脚本文件：