Commençons par comprendre les règles et enjeux de base des exercices orientés objet :
Écrivez d'abord la méthode d'écriture normale, puis remplacez-la par la méthode d'écriture orientée objet
Transformation de méthode ordinaire
·Essayez de ne pas avoir de fonctions imbriquées
·Peut avoir des variables globales
·Mettez les instructions de non-affectation de la fonction onload dans une fonction distincte
Passer à l'orientation objet
·Les variables globales sont des attributs
·Les fonctions sont des méthodes
·Créer des objets en onload
·Modifiez ce problème de pointeur
Améliorez d'abord la disposition de l'effet de glisser :
Structure HTML :
style csc :
#box{position : absolue;largeur : 200px;hauteur : 200px;arrière-plan : rouge;}
La première étape consiste à revoir le glisser-déposer orienté processus
window.onload = fonction (){
// Récupère l'élément et la valeur initiale
var oBox = document.getElementById('box'),
disX = 0, disY = 0;
//Événement de presse de souris de 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;
};
return false ;
};
};
La deuxième étape consiste à réécrire l'orienté processus en orienté objet
window.onload = fonction (){
var drag = new Drag('box');
Drag.init();
};
// Glissement du constructeur
fonction Glisser(id){
This.obj = document.getElementById(id);
Ceci.disX = 0;
This.disY = 0;
>
Drag.prototype.init = fonction (){
// ce pointeur
var moi = ceci;
This.obj.onmousedown = fonction (e){
var e = e || événement ;
me.mouseDown(e);
//Bloquer l'événement par défaut
return false ;
};
};
Drag.prototype.mouseDown = fonction (e){
// ce pointeur
var moi = 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.mouseMove(e);
};
Document.onmouseup = fonction (){
me.mouseUp();
>
};
Drag.prototype.mouseMove = fonction (e){
This.obj.style.left = (e.clientX - this.disX) 'px';
This.obj.style.top = (e.clientY - this.disY) 'px';
};
Drag.prototype.mouseUp = fonction (){
Document.onmousemove = null;
Document.onmouseup = null;
};
La troisième étape consiste à voir les différences dans le code
La page d'accueil utilise un constructeur pour créer un objet :
// Glissement du constructeur
fonction Glisser(id){
This.obj = document.getElementById(id);
Ceci.disX = 0;
This.disY = 0;
>
Suivez les règles écrites précédemment et transformez toutes les variables globales en attributs !
Ensuite, écrivez simplement les fonctions sur le prototype :
Drag.prototype.init = fonction (){
};
Drag.prototype.mouseDown = function (){
};
Drag.prototype.mouseMove = function (){
};
Drag.prototype.mouseUp = fonction (){
};
Jetons d'abord un coup d'œil à la fonction init :
Drag.prototype.init = fonction (){
// ce pointeur
var moi = ceci;
This.obj.onmousedown = fonction (e){
var e = e || événement ;
me.mouseDown(e);
//Bloquer l'événement par défaut
return false ;
};
};
Nous utilisons la variable me pour enregistrer le pointeur this, afin que l'erreur signalée par ceci ne se produise pas dans le code suivant
Vient ensuite la fonction mouseDown :
Drag.prototype.mouseDown = fonction (e){
// ce pointeur
var moi = 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.mouseMove(e);
};
Document.onmouseup = fonction (){
me.mouseUp();
>
};
Lorsque vous le réécrivez en mode orienté objet, faites attention à l'objet événement. Étant donné que l'objet événement n'apparaît que dans les événements, nous devons enregistrer l'objet événement dans des variables, puis le transmettre via des paramètres !
Il n'y a rien à surveiller dans les fonctions mouseMove et mouseUp suivantes !
Choses à noter
Concernant la problématique de ce pointeur, cela est particulièrement important en orienté objet !
Cette lecture prolongée :
http://div.io/topic/809
Concernant la problématique des objets événementiels, les objets événementiels n'apparaissent que dans les événements, alors faites attention lors de l'écriture des méthodes !
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
