这里做一个选项卡切换,先用面向流程的方法实现,再改装成面向对象的形式。
看如下代码:
代码块1:
简单解释一下,通过点击button按钮来让下边的div内容块切换。window.onload方法大家都知道,外层for循环语句用来给按钮绑定点击事件,内部for循环语句就是清除按钮的class和隐藏底部的内容快。很简单明了。<style> #btn button{background:#fff;} #btn button.active{background:gold;} .content{background:#ccc;width:300px;height:300px;display:none;} </style> <script> window.οnlοad=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].οnclick=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>
那么现在开始把它改装成面向对象的形式,怎么做呢?
代码块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].οnclick= 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.οnlοad=function(){ new TabClick('button','content'); } </script>
构造一个对象TabClick,它的属性有2个:btn和con,方法有btnClick()通过prototype原型申明。这段代码有特别多的this,这也是面向对象里面见的最多的,我在后边都标注了每个this代表什么。
面向对象对象整体结构性更好,当然选项卡切换这种简单的功能用面向对象反而麻烦,面向对象在简单的程序里提现不出什么来,在大型项目才会有用武之地,当然先简单的培养这种思路。做项目的时候,多考虑如果用面向对象怎么写,慢慢练习,循序渐进啦。
下篇会讲述一下闭包的概念~~~~~~~~~~