Tout d'abord, comprenons les règles de base et les problèmes des exercices orientés objet:
Écrivez d'abord la méthode d'écriture normale, puis changez-la en terme d'écriture orienté objet
Déformation de la méthode ordinaire
・ Essayez de ne pas avoir de fonctions imbriquées
・ Il peut y avoir des variables globales
・ Mettez des instructions dans la fonction onload qui ne sont pas des affectations dans des fonctions distinctes
Changer d'objet orienté
・ Les variables globales sont des attributs
・ La fonction est la méthode
・ Créer un objet dans Onload
・ Pour changer ce pointeur
Tout d'abord, améliorez la disposition de l'effet de traînée:
Structure HTML:
<div id = "box"> </ div>
Style CSC:
#box {position: absolu; largeur: 200px; hauteur: 200px; fond: rouge;}
La première étape consiste à revoir la traînée et la chute axées sur le processus
La copie de code est la suivante:
window.onload = function () {
// Obtenez l'élément et la valeur initiale
var obox = document.getElementById ('box'),
disx = 0, disy = 0;
// Événement de presse de la souris conteneur
obox.onmousedown = fonction (e) {
var e = e || window.event;
disx = e.clientx - this.offsetLeft;
disy = e.clienty - this.offsetTop;
document.onmousemove = fonction (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;
};
retourne false;
};
};
Étape 2: Réécrivez orienté vers le processus à l'objet
La copie de code est la suivante:
window.onload = function () {
var drag = new Drag ('box');
drag.init ();
};
// traînée de constructeur
fonction glisser (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Drag.prototype.init = function () {
// ce pointeur
var me = ceci;
this.obj.onmousedown = fonction (e) {
var e = e || événement;
me.mousedown (e);
// bloque les événements par défaut
retourne false;
};
};
Drag.prototype.mousedown = fonction (e) {
// ce pointeur
var me = ceci;
this.disx = e.clientx - this.obj.offsetLeft;
this.disy = e.clienty - this.obj.offsetTop;
document.onmousemove = fonction (e) {
var e = e || window.event;
me.mousmove (e);
};
document.onmouseup = function () {
me.mouseup ();
}
};
Drag.prototype.mousmove = fonction (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;
};
Étape 3: Voir ce que le code est différent
La page d'accueil utilise un constructeur pour créer un objet:
La copie de code est la suivante:
// traînée de constructeur
fonction glisser (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Respectez les règles écrites précédentes et transformez les variables globales en attributs!
Ensuite, écrivez toutes les fonctions du prototype:
La copie de code est la suivante:
Drag.prototype.init = function () {
};
Drag.prototype.mousedown = function () {
};
Drag.prototype.mousmove = function () {
};
Drag.prototype.mouseup = function () {
};
Jetons un coup d'œil à la fonction init en premier:
La copie de code est la suivante:
Drag.prototype.init = function () {
// ce pointeur
var me = ceci;
this.obj.onmousedown = fonction (e) {
var e = e || événement;
me.mousedown (e);
// bloque les événements par défaut
retourne false;
};
};
Nous utilisons la variable ME pour enregistrer ce pointeur, de sorte que le code suivant ne montre pas l'erreur pointée par ce pointeur.
Ensuite, la fonction Mousedown:
La copie de code est la suivante:
Drag.prototype.mousedown = fonction (e) {
// ce pointeur
var me = ceci;
this.disx = e.clientx - this.obj.offsetLeft;
this.disy = e.clienty - this.obj.offsetTop;
document.onmousemove = fonction (e) {
var e = e || window.event;
me.mousmove (e);
};
document.onmouseup = function () {
me.mouseup ();
}
};
Lorsque vous le réécrivez en orienté objet, vous devez prêter attention à l'objet de l'événement. Parce que l'objet événement n'apparaît que dans l'événement, nous devons enregistrer les variables d'objet de l'événement, puis la transmettre par les paramètres!
Il n'y a rien à faire attention dans la fonction Mousemove et la fonction de souris de souris!
Problèmes à connaître
En ce qui concerne la question de ce pointeur, cela est particulièrement important dans les objets!
Cette lecture d'extension:
http://div.io/topic/809
En ce qui concerne la question des objets d'événement, les objets d'événement n'apparaissent que dans les événements, vous devez donc faire attention à la méthode lors de l'écriture!