把面向过程的程序改写成面向对象的形式，在这里楼主举两个小例子（拖拽，选项卡）;
修改原则：
1.不能有函数套函数，但可以有全局变量
2.onload→构造函数
3.全局变量→属性
4.函数→方法
5.this、事件、闭包、传参
对象与闭包
通过闭包传递this
一:拖拽
面向过程的写法：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拖拽</title>
<script>
window.onload=function(){
var oDiv=document.getElementById('div');
oDiv.onmousedown=function(ev){
var ev=ev||window.event;
var disX=ev.clientX-oDiv.offsetLeft;
var disY=ev.clientY-oDiv.offsetTop;
document.onmousemove=function(ev){
var ev=ev||window.event;
oDiv.style.left=ev.clientX-disX+'px';
oDiv.style.top=ev.clientY-disY+'px';
}
document.onmouseup=function(){
document.onmousemove=document.onmouseup=null;
}
return false;
}
}
</script>
<style>
div{width:100px;height:100px;background: red;position: absolute;}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
面向对象的写法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>拖拽</title>
<script>
window.onload=function(){
var oDrag=new drag('div');
}
function drag(id){
this.oDiv=null;
this.disX=0;
this.disY=0;
this.oDiv=document.getElementById(id);
var _this=this;//注意这里的this的指向问题
this.oDiv.onmousedown=function(){
_this.mousedown();
}
}
drag.prototype.mousedown= function (ev){
var _this=this;//注意这里的this的指向问题
var ev=ev||window.event;
this.disX=ev.clientX-this.oDiv.offsetLeft;
this.disY=ev.clientY-this.oDiv.offsetTop;
document.onmousemove=function(){
_this.mousemove();
}
document.onmouseup=function(){
_this.mouseup();
}
return false；
}
drag.prototype.mousemove=function (ev){
var ev=ev||window.event;
this.oDiv.style.left=ev.clientX-this.disX+'px';
this.oDiv.style.top=ev.clientY-this.disY+'px';
}
drag.prototype.mouseup=function mouseup(){
document.onmousemove=document.onmouseup=null;
}
</script>
<style>
div{width:100px;height:100px;background: red;position: absolute;}
</style>
</head>
<body>
<div id="div"></div>
</body>
</html>
一:选项卡
面向过程的写法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>选项卡</title>
<script>
window.onload=function(){
var oBtn=document.getElementsByTagName('input');
var oDiv=document.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='';
oDiv[i].style.display='none';
}
this.className='active';
oDiv[this.index].style.display='block';
}
}
}
</script>
<style>
div{width:200px;height:200px;border:1px solid #000;display: none;}
.active{background: red;}
</style>
</head>
<body>
<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>
</body>
</html>
面向对象的写法
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>选项卡</title>
<script>
window.onload=function(){
var oSwitch=new Switch();
}
function Switch(){
this.oBtn= document.getElementsByTagName('input');
this.oDiv= document.getElementsByTagName('div');
var _this=this;//注意这里的this的指向问题
for(var i=0;i<this.oBtn.length;i++){
this.oBtn[i].index=i;
this.oBtn[i].onclick=function(){
_this.Switch1(this);//注意这里的this的指向问题
};
}
}
Switch.prototype.Switch1=function(btn){
for(var i=0;i<this.oBtn.length;i++){
this.oBtn[i].className='';
this.oDiv[i].style.display='none';
}
btn.className='active';
this.oDiv[btn.index].style.display='block';
}
</script>
<style>
div{width:200px;height:200px;border:1px solid #000;display: none;}
.active{background: red;}
</style>
</head>
<body>
<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>
</body>
</html>
效果地址：
http://www.sunyimin.cn/Switch.html
http://www.sunyimin.cn/Drag.html
楼主感悟：面向对象的写法其逻辑性不是很强，写法有点杂乱，对于初学者来说，一般都是将程序写成面向过程的，然后再将它改写成面向对象的，以上几个步骤一定要熟练掌握，一点要反复熟练，你才能体会到面向对象的好处，以上改写步骤如有不懂，可以相互交流。
