Primero, comprendamos las reglas y problemas básicos de los ejercicios orientados a objetos:
Primero escriba el método de escritura normal y luego cámbielo al término de escritura orientado a objetos
Deformación del método ordinario
・ Trate de no tener funciones anidadas
・ Puede haber variables globales
・ Ponte las declaraciones en la función de entrada que no son asignaciones en funciones separadas
Cambiar a objeto orientado
・ Las variables globales son atributos
・ La función es método
・ Crear un objeto en Onload
・ Acerca de cambiar este puntero
Primero, mejore el diseño del efecto de arrastre:
Estructura HTML:
<div id = "box"> </div>
Estilo CSC:
#box {posición: absoluto; ancho: 200px; altura: 200px; fondo: rojo;}
El primer paso es revisar el arrastre y la caída orientados al proceso.
La copia del código es la siguiente:
window.onload = function () {
// Obtener el elemento y el valor inicial
var obox = document.getElementById ('box'),
disx = 0, disy = 0;
// evento de prensa de mouse de contenedores
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;
};
devolver falso;
};
};
Paso 2: Reescribir el proceso orientado a los objetos
La copia del código es la siguiente:
window.onload = function () {
var drag = new Drag ('Box');
drag.init ();
};
// arrastre de constructor
function drag (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Drag.prototype.init = function () {
// Este puntero
var me = esto;
this.obj.onmousedown = function (e) {
var e = e || evento;
yo.mousedown (e);
// Bloquear eventos predeterminados
devolver falso;
};
};
Drag.prototype.mouseDown = function (e) {
// Este puntero
var me = esto;
this.disx = e.clientx - this.obj.offsetleft;
this.disy = e.clienty - this.obj.offsettop;
document.onmouseMove = function (e) {
var e = e || Window.event;
yo.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;
};
Paso 3: vea lo que el código es diferente
La página de inicio usa un constructor para crear un objeto:
La copia del código es la siguiente:
// arrastre de constructor
function drag (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
¡Cumplir con las reglas escritas anteriores y convertir las variables globales en atributos!
Luego escriba todas las funciones en el prototipo:
La copia del código es la siguiente:
Drag.prototype.init = function () {
};
Drag.prototype.mouseDown = function () {
};
Drag.prototype.mouseMove = function () {
};
Drag.prototype.MouseUp = function () {
};
Echemos un vistazo a la función init primero:
La copia del código es la siguiente:
Drag.prototype.init = function () {
// Este puntero
var me = esto;
this.obj.onmousedown = function (e) {
var e = e || evento;
yo.mousedown (e);
// Bloquear eventos predeterminados
devolver falso;
};
};
Usamos la variable ME para guardar este puntero, de modo que el siguiente código no muestre el error apuntado por este puntero.
El siguiente es la función MouseDown:
La copia del código es la siguiente:
Drag.prototype.mouseDown = function (e) {
// Este puntero
var me = esto;
this.disx = e.clientx - this.obj.offsetleft;
this.disy = e.clienty - this.obj.offsettop;
document.onmouseMove = function (e) {
var e = e || Window.event;
yo.mousemove (e);
};
document.onmouseUp = function () {
me.mouseup ();
}
};
Al reescribirlo en objeto orientado, debe prestar atención al objeto del evento. Debido a que el objeto del evento solo aparece en el evento, ¡necesitamos guardar las variables del objeto del evento y luego pasarlo a través de los parámetros!
¡No hay nada a quien prestar atención en la función MouseMove y la función de mouseup detrás de ella!
Problemas a tener en cuenta
Con respecto al tema de este puntero, ¡esto es particularmente importante en los objetos orientados!
Esta lectura de extensión:
http://div.io/topic/809
Con respecto al tema de los objetos del evento, los objetos de eventos solo aparecen en los eventos, por lo que debe prestar atención al método al escribir.