关闭

javascript基础之面向对象(中)

87人阅读 评论(0) 收藏 举报
分类:

这里做一个选项卡切换,先用面向流程的方法实现,再改装成面向对象的形式。奋斗

看如下代码:

代码块1:

<style>
	#btn button{background:#fff;}
	#btn button.active{background:gold;}
	.content{background:#ccc;width:300px;height:300px;display:none;}
</style>
<script>
	window.onload=function(){
		var btn = document.querySelectorAll('button');
		var con = document.querySelectorAll('.content');
		for(var i=0;i < btn.length;i++ ){
			btn[i].index = i;
			btn[i].onclick=function(){
				for(var j=0;j<btn.length;j++){
					btn[j].className='';
					con[j].style.display='none';
				}
				this.className='active';
				con[this.index].style.display='block';
			};
		}
	}
</script>
<body>
	<div id="btn">
		<button class="active">按钮1</button>
		<button>按钮2</button>
		<button>按钮3</button>
	</div>
	<div>
		<div style="display:block" class="content">这是按钮1里面的内容</div>
		<div class="content">这是按钮2里面的内容</div>
		<div class="content">这是按钮3里面的内容</div>
	</div>
</body>
简单解释一下,通过点击button按钮来让下边的div内容块切换。window.onload方法大家都知道,外层for循环语句用来给按钮绑定点击事件,内部for循环语句就是清除按钮的class和隐藏底部的内容快。很简单明了。

那么现在开始把它改装成面向对象的形式,怎么做呢?可怜

代码块2:

<script>
	function TabClick(TagName,className){
		var _this = this;						//this代表TabClick对象
		this.btn = document.querySelectorAll(TagName);			//TabClick属性
		this.con = document.querySelectorAll("."+className);		//TabClick属性
		for(var i=0;i < this.btn.length;i++ ){				//this代表TabClick对象
			this.btn[i].index = i;
			this.btn[i].onclick= function(){
				_this.btnClick(this);				//this代表被点击的button对象
			};
		}
	}
	TabClick.prototype.btnClick=function(oBtn){				//Btn代表被点击的button对象
		for(var j=0;j < this.btn.length;j++){				//this代表TabClick对象
			this.btn[j].className='';
			this.con[j].style.display='none';
		}
		oBtn.className='active';
		this.con[oBtn.index].style.display='block';			//his代表TabClick对象
	}
	window.onload=function(){
		new TabClick('button','content');
	}
</script>


        构造一个对象TabClick,它的属性有2个:btncon方法有btnClick()通过prototype原型申明。这段代码有特别多的this,这也是面向对象里面见的最多的,我在后边都标注了每个this代表什么。

        面向对象对象整体结构性更好,当然选项卡切换这种简单的功能用面向对象反而麻烦,面向对象在简单的程序里提现不出什么来,在大型项目才会有用武之地,当然先简单的培养这种思路。做项目的时候,多考虑如果用面向对象怎么写,慢慢练习,循序渐进啦。

       下篇会讲述一下闭包的概念~~~~~~~~~~




0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1382次
    • 积分:80
    • 等级:
    • 排名:千里之外
    • 原创:7篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档