First, let’s understand the basic rules and problems of object-oriented exercises:
First write out the normal writing method, and then change it to object-oriented writing term
Ordinary method deformation
・Try not to have nested functions
・There can be global variables
・Put statements in the onload function that are not assignments into separate functions
Change to object-oriented
・Global variables are attributes
・Function is method
・Create an object in onload
・About changing this pointer
First, improve the layout of the drag effect:
HTML structure:
<div id="box"></div>
csc style:
#box{position: absolute;width: 200px;height: 200px;background: red;}
The first step is to review the process-oriented drag and drop
The code copy is as follows:
window.onload = function (){
// Get the element and initial value
var oBox = document.getElementById('box'),
disX = 0, disY = 0;
// Container mouse press event
oBox.onmousedown = function (e){
var e = e || window.event;
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
oBox.style.left = (e.clientX - disX) + 'px';
oBox.style.top = (e.clientY - disY) + 'px';
};
document.onmouseup = function (){
document.onmousemove = null;
document.onmouseup = null;
};
return false;
};
};
Step 2: Rewrite process-oriented to object-oriented
The code copy is as follows:
window.onload = function (){
var drag = new Drag('box');
drag.init();
};
// Constructor Drag
function Drag(id){
this.obj = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
Drag.prototype.init = function (){
// this pointer
var me = this;
this.obj.onmousedown = function (e){
var e = e || event;
me.mouseDown(e);
// Block default events
return false;
};
};
Drag.prototype.mouseDown = function (e){
// this pointer
var me = this;
this.disX = e.clientX - this.obj.offsetLeft;
this.disY = e.clientY - this.obj.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
me.mouseMove(e);
};
document.onmouseup = function (){
me.mouseUp();
}
};
Drag.prototype.mouseMove = function (e){
this.obj.style.left = (e.clientX - this.disX) + 'px';
this.obj.style.top = (e.clientY - this.disY) + 'px';
};
Drag.prototype.mouseUp = function (){
document.onmousemove = null;
document.onmouseup = null;
};
Step 3: See what the code is different
The home page uses a constructor to create an object:
The code copy is as follows:
// Constructor Drag
function Drag(id){
this.obj = document.getElementById(id);
this.disX = 0;
this.disY = 0;
}
Abide by the previous written rules and turn global variables into attributes!
Then write all the functions on the prototype:
The code copy is as follows:
Drag.prototype.init = function (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = function (){
};
Let's take a look at the init function first:
The code copy is as follows:
Drag.prototype.init = function (){
// this pointer
var me = this;
this.obj.onmousedown = function (e){
var e = e || event;
me.mouseDown(e);
// Block default events
return false;
};
};
We use the me variable to save this pointer, so that the following code does not show the error pointed by this pointer.
Next is the mouseDown function:
The code copy is as follows:
Drag.prototype.mouseDown = function (e){
// this pointer
var me = this;
this.disX = e.clientX - this.obj.offsetLeft;
this.disY = e.clientY - this.obj.offsetTop;
document.onmousemove = function (e){
var e = e || window.event;
me.mouseMove(e);
};
document.onmouseup = function (){
me.mouseUp();
}
};
When rewriting it into object-oriented, you should pay attention to the event object. Because the event object only appears in the event, we need to save the event object variables and then pass it through the parameters!
There is nothing to pay attention to in the mouseMove function and mouseUp function behind it!
Issues to be aware of
Regarding the issue of this pointer, this is particularly important in object-oriented!
This extension reading:
http://div.io/topic/809
Regarding the issue of event objects, event objects only appear in events, so you should pay attention to the method when writing!