M109-es6学习资料和js手册-25面向对象基础01实例
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
面向对象的方式选项卡实例：
面向过程的选项卡：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>面向对象的选项卡</title>
<style type="text/css">
#my input{
background:#fff;
border:none;
}
#my input.active{
background:green;
}
#my div{
width:200px;
height:200px;
background:#ccc;
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oMy=document.getElementById("my");
var oBtn=oMy.getElementsByTagName("input");
var oDiv=oMy.getElementsByTagName("div");
for(var i=0;i<oBtn.length;i++){
//为按钮添加点击事件
oBtn[i].index=i;
oBtn[i].onclick=function(){
for(var k=0;k<oBtn.length;k++){
oBtn[k].className="";
oDiv[k].style.display="none";
}
this.className="active";
oDiv[this.index].style.display="block";
}
}
}
</script>
</head>
<body>
<div id="my">
<input type="button" value="aaa" class="active" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</body>
</html>
如何封装呢？
改写：
1 window.onload
2 变量
3 函数
4 函数不能嵌套
函数的嵌套用全局变量实现，避免了函数中局部变量无法访问到。
Var oDiv=null;
各部分的对应关系
1 window.onload初始化整个程序，可以将onload变成构造函数
2 变量变成对象的属性
3 函数变成对象的方法
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>面向对象的选项卡</title>
<style type="text/css">
#my input{
background:#fff;
border:none;
}
#my input.active{
background:green;
}
#my div{
width:200px;
height:200px;
background:#ccc;
display:none;
}
</style>
<script type="text/javascript">
//将window.onload作为构造函数初始化
window.onload=function(){
new TabSwitch("my");
}
function TabSwitch(obj_id){
var _this=this;
var oMy=document.getElementById(obj_id);
this.oBtn=oMy.getElementsByTagName("input");//全局变量
this.oDiv=oMy.getElementsByTagName("div");
for(var i=0;i<this.oBtn.length;i++){
//为按钮添加点击事件
this.oBtn[i].index=i;
//this.oBtn[i].onclick=this.fnclick;
//这里将this.fnclick赋值给this.oBtn[i]
//这个时候this->input
this.oBtn[i].onclick=function(){
//如何避免呢？将对象的this保存到_this
_this.fnclick(this);//传递this.oBtn[i]
}
}
}
//给对象添加方法fnclick
TabSwitch.prototype.fnclick=function(oBtn){
//alert(this);//[object HTMLInputElement]
for(var k=0;k<this.oBtn.length;k++){
this.oBtn[k].className="";
this.oDiv[k].style.display="none";
}
oBtn.className="active";//应该把this.oBtn[i]作为参数传递给fnclick
this.oDiv[oBtn.index].style.display="block";
}
</script>
</head>
<body>
<div id="my">
<input type="button" value="aaa" class="active" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>面向对象的选项卡</title>
<style type="text/css">
.my input{
background:#fff;
border:none;
}
.my input.active{
background:green;
}
.my div{
width:200px;
height:200px;
background:#ccc;
display:none;
}
</style>
<script type="text/javascript">
//将window.onload作为构造函数初始化
window.onload=function(){
new TabSwitch("my");
new TabSwitch("my_box");
}
function TabSwitch(obj_id){
var _this=this;
var oMy=document.getElementById(obj_id);
this.oBtn=oMy.getElementsByTagName("input");//全局变量
this.oDiv=oMy.getElementsByTagName("div");
for(var i=0;i<this.oBtn.length;i++){
//为按钮添加点击事件
this.oBtn[i].index=i;
//this.oBtn[i].onclick=this.fnclick;
//这里将this.fnclick赋值给this.oBtn[i]
//这个时候this->input
this.oBtn[i].onclick=function(){
//如何避免呢？将对象的this保存到_this
_this.fnclick(this);//传递this.oBtn[i]
}
}
}
//给对象添加方法fnclick
TabSwitch.prototype.fnclick=function(oBtn){
//alert(this);//[object HTMLInputElement]
for(var k=0;k<this.oBtn.length;k++){
this.oBtn[k].className="";
this.oDiv[k].style.display="none";
}
oBtn.className="active";//应该把this.oBtn[i]作为参数传递给fnclick
this.oDiv[oBtn.index].style.display="block";
}
</script>
</head>
<body>
<div id="my" class="my">
<input type="button" value="aaa" class="active" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
<div id="my_box" class="my">
<input type="button" value="aaa" class="active" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">aaa</div>
<div>bbb</div>
<div>ccc</div>
</div>
</body>
</html>
小结：面向对象的东西，函数不能嵌套，变量作为属性，函数作为方法，注意this的切换。
对于css的样式来说，少用id,多用class。