您的位置：首页 > Web前端 > JavaScript

JS——面向对象实例

2017-09-17 22:35 246 查看

面向过程的选项卡

<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById("div1");
var oBtn = oDiv.getElementsByTagName("input");
var aDiv = oDiv.getElementsByTagName("div");

for (var i = 0 ;i < oBtn.length; i++){
oBtn[i].index = i;
oBtn[i].onclick = function(){
//清空内容
for(var i = 0; i < oBtn.length; i++){
oBtn[i].className ='';
aDiv[i].style.display = "none";
}
//为点击的按钮添加active
this.className = "active";

//为对应div加上display:block
aDiv[this.index].style.display = "block";
}
}
}
</script>
<body>
<div id="div1">
<input type="button" class="active" value="a">
<input type="button" value="b">
<input type="button" value="c">
<div style = "display: block">aaaa</div>
<div>bbbb</div>
<div>cccc</div>
</div>

</body>

改写成面向对象

原则：

不能有函数嵌套，但可以有全局变量。

过程：

onload  ->  构造函数

全局变量 ->  属性

函数    ->  方法

实例：

//原来的onload，变成TabSwitch函数,把div的ID作为参数传进去
function TabSwitch(id){
var _this = this;

//先获取最外层的div
var oDiv = document.getElementById(id);

//这些全局变量，都变成了TabSwitch对象上的属性
this.oBtn = oDiv.getElementsByTagName("input");
this.aDiv = oDiv.getElementsByTagName("div");

for (var i = 0 ;i < this.oBtn.length; i++){
this.oBtn[i].index = i;
this.oBtn[i].onclick = function(){
//下面定义的方法，是在TabSwitch对象上的，所以我们需要_this，而this指的是按钮
_this.fnClick(this);
};
}
}

//这里的oBtn其实就是上面的按钮
TabSwitch.prototype.fnClick = function (oBtn){
//清空内容
for(var i = 0; i < this.oBtn.length; i++){
this.oBtn[i].className ='';
this.aDiv[i].style.display = "none";
}
//为点击的按钮添加active
oBtn.className = "active";

//为对应div加上display:block
this.aDiv[oBtn.index].style.display = "block";
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航