首页 > 代码库 > 选项卡面向对象练习
选项卡面向对象练习
面向对象的选项卡 原则 ：先写出普通的写法，然后改成面向对象写法 。
普通方法变型：
尽量不要出现函数嵌套函数
可以有全局变量
把onload中不是赋值的语句放到单独函数中
改成面向对象：
全局变量就是属性
函数就是方法
Onload中创建对象
改this指向问题
下面是普通代码：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} input{padding:5px 10px;} input.on{background: red;} #div1 div{width:200px;height:200px;border:1px solid #ccc;display: none;} </style></head><body> <div id="div1"> <input class="on" type="button" value="http://www.mamicode.com/1"> <input type="button" value="http://www.mamicode.com/2"> <input type="button" value="http://www.mamicode.com/3"> <div style="display:block;">111</div> <div>222</div> <div>333</div> </div> <script> //普通写法 /*window.onload = function(){ var oParent = document.getElementById(‘div1‘); var aInput = oParent.getElementsByTagName(‘input‘); var aDiv = oParent.getElementsByTagName(‘div‘); for(var i = 0; i < aInput.length;i++){ //给每个input添加一个自定义属性index = i;闭包传值 aInput[i].index = i; aInput[i].onclick = function(){ for(var i = 0;i<aInput.length;i++){ aInput[i].className = ‘‘; aDiv[i].style.display=‘none‘; } this.className = ‘on‘; aDiv[this.index].style.display=‘block‘; } } }*/ /* 普通方法先变型: 尽量不要出现函数嵌套函数 可以有全局变量 把onload中不是赋值的语句放到单独函数中 */ var oParent = null; var aInput = null; var aDiv = null; window.onload = function(){ oParent = document.getElementById(‘div1‘); aInput = oParent.getElementsByTagName(‘input‘); aDiv = oParent.getElementsByTagName(‘div‘); init(); function init(){ for(var i = 0; i < aInput.length;i++){ //给每个input添加一个自定义属性index = i;闭包传值 aInput[i].index = i; aInput[i].onclick = change; } } function change(){ for(var i = 0;i<aInput.length;i++){ aInput[i].className = ‘‘; aDiv[i].style.display=‘none‘; } this.className = ‘on‘; aDiv[this.index].style.display=‘block‘; } } </script></body></html>面向对象改写如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} input{padding:5px 10px;} input.on{background: red;} #div1 div,#div2 div{width:200px;height:200px;border:1px solid #ccc;display: none;} </style></head><body> <div id="div1"> <input class="on" type="button" value="http://www.mamicode.com/1"> <input type="button" value="http://www.mamicode.com/2"> <input type="button" value="http://www.mamicode.com/3"> <div style="display:block;">111</div> <div>222</div> <div>333</div> </div> <hr> <div id="div2"> <input class="on" type="button" value="http://www.mamicode.com/1"> <input type="button" value="http://www.mamicode.com/2"> <input type="button" value="http://www.mamicode.com/3"> <div style="display:block;">111</div> <div>222</div> <div>333</div> </div> <script> //普通写法 /*window.onload = function(){ var oParent = document.getElementById(‘div1‘); var aInput = oParent.getElementsByTagName(‘input‘); var aDiv = oParent.getElementsByTagName(‘div‘); for(var i = 0; i < aInput.length;i++){ //给每个input添加一个自定义属性index = i;闭包传值 aInput[i].index = i; aInput[i].onclick = function(){ for(var i = 0;i<aInput.length;i++){ aInput[i].className = ‘‘; aDiv[i].style.display=‘none‘; } this.className = ‘on‘; aDiv[this.index].style.display=‘block‘; } } }*/ /* 改成面向对象 全局变量就是属性 函数就是方法 Onload中创建对象 改this指向问题 */ window.onload = function(){ var t1 = new Tab(‘div1‘); t1.init(); var t2 = new Tab(‘div2‘); t2.init(); }; function Tab(id){ this.oParent = document.getElementById(id); this.aInput = this.oParent.getElementsByTagName(‘input‘); this.aDiv = this.oParent.getElementsByTagName(‘div‘); } Tab.prototype.init = function(){ var This = this; for(var i=0;i<this.aInput.length;i++){ this.aInput[i].index = i; this.aInput[i].onclick = function(){ This.change(this); }; } }; Tab.prototype.change = function(obj){ for(var i = 0;i<this.aInput.length;i++){ this.aInput[i].className = ‘‘; this.aDiv[i].style.display=‘none‘; } obj.className = ‘on‘; this.aDiv[obj.index].style.display=‘block‘; } </script></body></html>效果如下:
选项卡面向对象练习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。