1、面向对象特点
相比之前按照过程式写法,面向对象有以下几个特点;
1、抽象:抓住核心问题,就是将很多个方法放在一个对象上。对象由属性和方法组成,属性就是我们定义的变量,它是静态的;方法就是行为操作,函数,它是动态的。
2、封装:只能通过对象来访问函数。工厂方式,就是面向对象中的封装函数。构造函数,就是用来创建对象的函数。
3、继承:从已有对象中继承出新的对象。
4、多态:多对象的不同形态。
2、选项卡面向对象写法
1、首先简单写一个页面布局和样式:
<style> #div1 div{ 200px; height:200px; border:1px #000 solid; display:none;} .active{ background:red;} </style>
<div id="div1"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display:block">11111</div> <div>22222</div> <div>33333</div> </div> </body>
2、原先的选项卡的写法:
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++){ 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 = 'active'; aDiv[this.index].style.display = 'block'; }; }; }
3、用面向对象的写法:
1 window.onload = function(){ 2 var t1 = new Tab(); 3 t1.init(); 4 t1.autoPlay(); 5 }; 6 7 function Tab(){ //构造函数 8 this.oParent = document.getElementById('div1'); //定义全局变量 9 this.aInput = this.oParent.getElementsByTagName('input'); 10 this.aDiv = this.oParent.getElementsByTagName('div'); 11 this.iNow = 0; 12 } 13 14 Tab.prototype.init = function(){ //构造函数.原型.方法() 15 var This = this; //p1调用的init() 所以这里的this指向的是对象t1 16 for(var i =0;i<this.aInput.length;i++){ 17 this.aInput[i].index = i; 18 this.aInput[i].onclick = function(){ 19 This.change(this); //用对象t1调用change() 传入的参数是当前点击的按钮this.aInput[i] 20 }; 21 }; 22 } 23 24 Tab.prototype.change = function(obj){ 25 for(var i=0;i<this.aInput.length;i++){ //因为是对象t1调用的change函数 所以这里的this就是对象t1 26 this.aInput[i].className = ''; 27 this.aDiv[i].style.display = 'none'; 28 } 29 obj.className = 'active'; 30 this.aDiv[obj.index].style.display = 'block'; 31 } 32 33 Tab.prototype.autoPlay = function(){ 34 35 var This = this; //定时器没有对象调用 所以定时器里面的this指向要改成对象 36 37 setInterval(function(){ 38 39 if(This.iNow == This.aInput.length-1){ 40 This.iNow = 0; 41 }else{ 42 This.iNow++; 43 } 44 //console.log(This.iNow) 45 for(var i=0;i<This.aInput.length;i++){ 46 This.aInput[i].className = ''; 47 This.aDiv[i].style.display = 'none'; 48 } 49 This.aInput[This.iNow].className = 'active'; 50 This.aDiv[This.iNow].style.display = 'block'; 51 52 },1000) 53 54 }
需要注意的是,改this指向问题 :如果是事件或者是定时器,尽量让面向对象中的this指向对象。
4、利用面向对象继承的特点,我们可以控制多组选项卡:
首先在页面中增加一组选项卡
<div id="div2"> <input class="active" type="button" value="1"> <input type="button" value="2"> <input type="button" value="3"> <div style="display:block">11111</div> <div>22222</div> <div>33333</div> </div>
然后在构造函数中将id作为参数传入:
function Tab(id){ this.oParent = document.getElementById(id); this.aInput = this.oParent.getElementsByTagName('input'); this.aDiv = this.oParent.getElementsByTagName('div'); this.iNow = 0; }
最后传入页面id,直接创建不同的对象,继承对象的方法,这样就可以控制两组选项卡啦~
window.onload = function(){ var t1 = new Tab('div1'); t1.init(); t1.autoPlay(); var t2 = new Tab('div2'); t2.init(); t2.autoPlay(); };