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的高级面向对象基础

1、javascript包含:     ECMAscript:描述了JS的语法和基本对象(核心)、     DOM(文档对象模型:操作节点)、     BOM(浏览器对象模型:document,ale...
  • alvinfqz
  • alvinfqz
  • 2016年06月07日 00:07
  • 367

前端基础进阶(十):面向对象实战之封装拖拽对象

终于 前面几篇文章,我跟大家分享了JavaScript的一些基础知识,这篇文章,将会进入第一个实战环节:利用前面几章的所涉及到的知识,封装一个拖拽对象。为了能够帮助大家了解更多的方式与进行对...
  • Fuohua
  • Fuohua
  • 2017年04月28日 17:04
  • 254

javascript中的面向对象,你了解多少?

Javascript 是面向对象开发的脚本语言,既然javascript是面向对象开发的,那么面向对象的前提:抽象,应该必须有,那么看看这个对象的创建,该如何抽象,然后封装呢?那么来看看javascr...
  • wangyongxia921
  • wangyongxia921
  • 2014年03月07日 21:13
  • 3091

JavaScript如何实现面向对象和继承机制?

JavaScript实现面向对象?  function MyObject() {    this.name="myobject";    this.type="class";    this.meth...
  • u012575451
  • u012575451
  • 2016年10月02日 13:23
  • 680

深入javascript面向对象,js的原型链、继承

进阶面向对象——————————————————————–在JS源码中,系统对象也是基于原型的程序, 尽量不要去添加和修改系统对象的方法 包装对象——————————————————————–基本类型...
  • u014420383
  • u014420383
  • 2015年08月15日 08:57
  • 1257

设计模式-可复用面向对象软件的基础 [读书笔记]

1.将软件与设计模式比拟为城市与建筑模式,那么在面向对象的解决方案里,我们将对象和接口看成墙壁和门窗,模式的核心在于提供了相关问题的解决方案。   在软件设计中可能会遇到很多类似的问题,在每次遇到类似...
  • AnnaLoad
  • AnnaLoad
  • 2016年04月17日 10:26
  • 1634

java入门、java学习:如何理解Java面向对象

首先要说明一点,对象不是java的,事实上他只是一种概念,一种用于解决问题的程序设计的思想方法。要理解对象就必须得要和面向对象结合起来。在面向对象中把某一类事物所共有的属性和行为抽象出来之后就形成了一...
  • javaniuniu
  • javaniuniu
  • 2016年05月23日 10:59
  • 1950

JavaScript面向对象编程指南(第2版) 笔记

2.1 检查变量是否存在时,更好的选择是使用 typeof var result = ""; if (typeof somevar !== "undefined"){ return = "y...
  • xczuis
  • xczuis
  • 2015年09月26日 21:11
  • 1521

《JavaScript面向对象精要》

这本书应该是 14 年(或15年)买的,那时人比较傻,看不明白,匆匆看了几十页就束之高阁了,但是一有点很确定,这是本好书。今天终于来到了这里,感觉过了一道坎。引用类型就是对象,对象就是引用类型类型分原...
  • wozaixiaoximen
  • wozaixiaoximen
  • 2017年01月08日 15:34
  • 411

javascript中的面向对象理解(一)

一、注意:提到“面向对象”这一概念,众所周知,javascript中的面向对象思想与其他的编程语言(例如:PHP、Java等)是有着很大区别的。因此,我们先复习下,传统意义上,面向对象的相关概念,以便...
  • u014516981
  • u014516981
  • 2016年10月19日 23:48
  • 1947
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript基础之面向对象(中)
举报原因:
原因补充:

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