Pertama, mari kita pahami aturan dasar dan masalah latihan yang berorientasi objek:
Pertama-tama tuliskan metode penulisan normal, dan kemudian ubah menjadi istilah penulisan yang berorientasi objek
Deformasi metode biasa
・ Cobalah untuk tidak memiliki fungsi bersarang
・ Mungkin ada variabel global
・ Masukkan pernyataan dalam fungsi Onload yang bukan penugasan ke dalam fungsi terpisah
Ubah ke berorientasi objek
・ Variabel global adalah atribut
・ Fungsi adalah metode
・ Buat objek di Onload
・ Tentang Mengubah Pointer Ini
Pertama, tingkatkan tata letak efek seret:
Struktur HTML:
<Div id = "box"> </div>
Gaya CSC:
#box {position: absolute; lebar: 200px; tinggi: 200px; latar belakang: merah;}
Langkah pertama adalah meninjau seret dan drop yang berorientasi pada proses
Salinan kode adalah sebagai berikut:
window.onload = function () {
// Dapatkan elemen dan nilai awal
var obox = document.geteLementById ('box'),
disx = 0, disy = 0;
// Acara Pers Mouse Container
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;
};
mengembalikan false;
};
};
Langkah 2: Tulis ulang proses yang berorientasi pada objek
Salinan kode adalah sebagai berikut:
window.onload = function () {
var drag = drag baru ('box');
drag.init ();
};
// Seret Konstruktor
function drag (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Drag.prototype.init = function () {
// Pointer ini
var me = ini;
this.obj.onmousedown = function (e) {
var e = e || peristiwa;
me.mousedown (e);
// Blokir acara default
mengembalikan false;
};
};
Drag.prototype.mousedown = function (e) {
// Pointer ini
var me = ini;
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;
};
Langkah 3: Lihat kode apa yang berbeda
Halaman beranda menggunakan konstruktor untuk membuat objek:
Salinan kode adalah sebagai berikut:
// Seret Konstruktor
function drag (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
}
Patuhi dengan aturan tertulis sebelumnya dan ubah variabel global menjadi atribut!
Kemudian tulis semua fungsi pada prototipe:
Salinan kode adalah sebagai berikut:
Drag.prototype.init = function () {
};
Drag.prototype.mousedown = function () {
};
Drag.prototype.mouseMove = function () {
};
Drag.prototype.mouseup = function () {
};
Mari kita lihat fungsi init terlebih dahulu:
Salinan kode adalah sebagai berikut:
Drag.prototype.init = function () {
// Pointer ini
var me = ini;
this.obj.onmousedown = function (e) {
var e = e || peristiwa;
me.mousedown (e);
// Blokir acara default
mengembalikan false;
};
};
Kami menggunakan variabel ME untuk menyimpan pointer ini, sehingga kode berikut tidak menunjukkan kesalahan yang ditunjuk oleh pointer ini.
Berikutnya adalah fungsi mousedown:
Salinan kode adalah sebagai berikut:
Drag.prototype.mousedown = function (e) {
// Pointer ini
var me = ini;
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 ();
}
};
Saat menulis ulang menjadi berorientasi objek, Anda harus memperhatikan objek acara. Karena objek acara hanya muncul di acara tersebut, kita perlu menyimpan variabel objek acara dan kemudian melewatkannya melalui parameter!
Tidak ada yang perlu diperhatikan dalam fungsi mousemove dan fungsi mouseup di belakangnya!
Masalah yang harus diperhatikan
Mengenai masalah penunjuk ini, ini sangat penting dalam berorientasi objek!
Pembacaan ekstensi ini:
http://div.io/topic/809
Mengenai masalah objek acara, objek acara hanya muncul dalam acara, jadi Anda harus memperhatikan metode saat menulis!