js面向对象的特点：
继承(inheritance)：对象方法和属性的继承
多态(polymorphism)：组件开发
抽象(abstract)：抓住核心问题
封装(encapsulation)：把功能写出方法
面向过程式切换面板实现：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>切换面板</title>
<style>
#div1 input {
background: white;
}
#div1 input.active {
background: yellow;
}
#div1 div {
width: 200px;
height: 200px;
background: #CCC;
display: none;
}
</style>
<script>
window.onload = function() {
var div = document.getElementById(‘div1‘);
var ipt = oDiv.getElementsByTagName(‘input‘);
var divContents = oDiv.getElementsByTagName(‘div‘);
for(var i = 0; i < aBtn.length; i++) {
ipt[i].index = i;
ipt[i].onclick = function() {
//隐藏所有，显示所点击面板
for(var i = 0; i < ipt.length; i++) {
ipt[i].className = ‘‘
ipt[i].style.display = ‘none‘;
}
this.className = ‘active‘;
ipt[this.index].style.display = ‘block‘;
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">saysomething</div>
<div>sayHello</div>
<div>sayGoodbye</div>
</div>
</body>
</html>
面向对象方法：
window.onload = function() {
new TabSwitch(‘div1‘);
};
function TabSwitch(id) {
//将属性挂到this
var _this = this;//注意this的改变
var div = document.getElementById(id);
this.ipt = div.getElementsByTagName(‘input‘);
this.divContents = div.getElementsByTagName(‘div‘);
for(var i = 0; i < this.ipt.length; i++) {
this.ipt[i].index = i;
this.ipt[i].onclick = function() {
_this.fnClick(this);
};
}
};
//函数不嵌套，方法写入原型
TabSwitch.prototype.fnClick = function(ref) {
for(var i = 0; i < this.ipt.length; i++) {
this.ipt[i].className = ‘‘
this.divContents[i].style.display = ‘none‘;
}
ref.className = ‘active‘;
this.divContents[ref.index].style.display = ‘block‘;
}
时间： 2024-10-12 21:24:34