上篇文章分享了如何用面向对象思想编写选项卡，在文章最后留了一个拖拽的例子，希望大家可以试着写一下，现在我就谈谈我在这过程中遇到的一些问题和解决方法。（本文主要是想和js初学者分享经验，代码中的更改this指向，事件绑定均采用的比较初级的方法，也希望能有大神能指导，分享一下经验）。
现在我们来看看面向过程式的编程的代码，HTML只有一个div元素，设置宽高和背景颜色。
#div1{
width: 100px;
height: 100px;
background: red;
position: absolute;
}
<body>
<div id='div1'></div>
</body>
window.onload=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.onmousedown=function(ev){
var ev=ev || window.event;
disX=ev.clientX-oDiv.offsetLeft;
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=null;
document.onmouseup=null;
}
return false;
}
}
还是用上一篇文章提到的方法，先将变量和方法提取出来，不要出现函数的嵌套，出现嵌套的将其中的函数提取出来。变量为oDiv,disX和disY,我将代码中的三个事件绑定的函数命名为fnDown,fnMove,fnUp,因此将上面的代码改为如下格式：
var oDiv,disX,disY;
window.onload=function(){
oDiv=document.getElementById('div1');
disX=0;
disY=0;
oDiv.onmousedown=fnDown();
}
function fnDown(ev){
var ev=ev || window.event;
disX=ev.clientX-oDiv.offsetLeft;
disY=ev.clientY-oDiv.offsetTop;
document.onmousemove=fnMove();
document.onmouseup=fnUp();
return false;
}
function fnMove=function(ev){
var ev=ev || window.event;
oDiv.style.left=ev.clientX-disX+'px';
oDiv.style.top=ev.clientY-disY+'px';
};
function fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
}
然后用面向对象的思想将属性和方法添加到对象中，并在属性和方法前面加上this，因此改变的代码如下：
window.onload=function(){
var d1=new Drag('div1');
d1.init();
};
function Drag(id){
this.oDiv=document.getElementById(id);
this.disX=0;
this.disY=0;
};
Drag.prototype.init=function(){
this.oDiv.onmousedown=this.fnDowm();
};
Drag.prototype.fnDowm=function(ev){
var ev=ev || window.event;
this.disX=ev.clientX-this.oDiv.offsetLeft;
this.disY=ev.clientY-this.oDiv.offsetTop;
document.onmousemove=this.fnMove();
document.onmouseup=this.fnUp();
return false;
};
Drag.prototype.fnMove=function(ev){
var ev || window.event;
this.oDiv.style.left=ev.clientX-this.disX+'px';
this.oDiv.style.top=ev.clientY-this.disY+'px';
};
Drag.prototype.fnMove=function(){
document.onmousemove=null;
document.onmouseup=null;
};
和前面一样，找出其中this的指向错误并改正。但是除了this指向问题，上面还有一个关于事件的问题。document.onmousemove=this.fnMove();，向这样在事件上添加方法的方式是不正确的，正确的调用方式是这样：document.onmousemove=function(ev){};,因此将方法改为以下形式。
Drag.prototype.init=function(){
this.oDiv.onmousedown=function(ev){
var ev=ev || window.event;
this.fnDown(ev);
return false;
};
};
Drag.prototype.fnDown = function(ev){
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
this.fnMove(ev);
};
document.onmouseup=function(){
this.fnUp();
}
};
Drag.prototype.fnMove=function(ev){
this.oDiv.style.left=ev.clientX-this.disX+'px';
this.oDiv.style.top=ev.clientY-this.disY+'px';
};
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
};
最后要找到错误的this指向，并改正。关于this指向，我认为最简单的方法就是看函数是怎么调用的，函数名 '.' 左边的就是this的指向。下面我们来举个例子：
Drag.prototype.init=function(){
this.oDiv.onmousedown=function(ev){
var ev=ev || window.event;
this.fnDown(ev);
return false;
};
};
原型上面的init()方法的调用方式是d1.init()，因此函数内的this指向就是d1，那么this.oDiv指向就是正确的，但是onmouseover()的调用方式是this.oDiv.onmousedown，其内部this指向就是this.oDiv，而在该函数内部，this.fnDown(ev)语句this指向是oDiv，而oDiv是没有方法和属性的，因此这里的this指向就是错误的，需要修正。
下面的几个方法中this也这来来分析，并将其改为正确的指向。修改this的指向还是和上一篇修改的方法一样。因此改完后代码为：
window.onload=function(){
var d1=new Drag('div1');
d1.init();
};
function Drag(id){
this.oDiv=document.getElementById(id);
this.disX=0;
this.disY=0;
}
Drag.prototype.init=function(){
var This=this;
this.oDiv.onmousedown=function(ev){
var ev=ev || window.event;
This.fnDown(ev);
return false;
};
};
Drag.prototype.fnDown = function(ev){
var This = this;
this.disX = ev.clientX - this.oDiv.offsetLeft;
this.disY = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = function(ev){
var ev = ev || window.event;
This.fnMove(ev);
};
document.onmouseup=function(){
This.fnUp();
}
};
Drag.prototype.fnMove=function(ev){
this.oDiv.style.left=ev.clientX-this.disX+'px';
this.oDiv.style.top=ev.clientY-this.disY+'px';
};
Drag.prototype.fnUp=function(){
document.onmousemove=null;
document.onmouseup=null;
};
这样就可以正常运行了。
作为一名小白，就应该多动脑，多动手。在这过程中你会学到很多。通过以上方法来训练面向对象的编程思想，多练习，以后写出面向对象思想的代码就很简单了。
因为以上代码也是我通过看视频学的，所以还有点疑问，希望有人能解答一下。上面只有onmousedown时间是绑定在oDiv上，后面的时间都是绑定在document上，我试着将后面的事件也绑定在oDiv中，程序也能运行，但是快速拖动就会产生停顿的问题，而在document上就没有类似的情况，这是为什么？
网友评论