javascript基础之面向对象（中）

来源：互联网发布：怎样在官网下载java 编辑：程序博客网时间：2024/05/21 09:13

这里做一个选项卡切换，先用面向流程的方法实现，再改装成面向对象的形式。
看如下代码：

代码块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个：btn和con，方法有btnClick()通过prototype原型申明。这段代码有特别多的this，这也是面向对象里面见的最多的，我在后边都标注了每个this代表什么。
面向对象对象整体结构性更好，当然选项卡切换这种简单的功能用面向对象反而麻烦，面向对象在简单的程序里提现不出什么来，在大型项目才会有用武之地，当然先简单的培养这种思路。做项目的时候，多考虑如果用面向对象怎么写，慢慢练习，循序渐进啦。
下篇会讲述一下闭包的概念~~~~~~~~~~

0 0