javascript基础之面向对象(中)

原创 2015年11月21日 16:14:22

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

看如下代码:

代码块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代表什么。

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

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




版权声明:欢迎大家一起交流

相关文章推荐

JavaScript中支持面向对象的基础

  • 2008年06月03日 09:46
  • 160KB
  • 下载

Javascript面向对象基础

  • 2012年05月22日 14:02
  • 119KB
  • 下载

Javascript面向对象基础

面向对象基础 建议先下载对应的代码: https://coding.net/u/Jill/p/dankal-jill/git 1、什么是面向对象编程(01) 用对象的思想去写代码,就是面向对...

JavaScript面向对象基础PPT

  • 2017年05月07日 22:00
  • 2.07MB
  • 下载

面向对象的JavaScript基础

  • 2016年08月01日 09:59
  • 126KB
  • 下载

javascript面向对象技术基础(六)

看了那么多关于闭包的文章,觉得这篇写的不错,分享给大家。 转自:http://www.iteye.com/wiki/Object_Oriented_JavaScript/1317-javascr...
  • han8888
  • han8888
  • 2011年10月21日 17:08
  • 138

Javascript面向对象基础.rar

  • 2011年03月20日 08:04
  • 549KB
  • 下载

JavaScript基础(十一)---- 面向对象的继承方法

1. 原型链的继承把父类私有+公有的属性和方法,都给了子类公有的;(让子类.prototype=父类的实例)例子:function F(){ this.x=100; //父类私有 ...

javascript面向对象技术基础

  • 2013年10月10日 14:16
  • 81KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript基础之面向对象(中)
举报原因:
原因补充:

(最多只允许输入30个字)