Pertama, mari kita fahami peraturan asas dan isu latihan berorientasikan objek:
Tulis kaedah penulisan biasa dahulu, kemudian tukar kepada kaedah penulisan berorientasikan objek
Transformasi kaedah biasa
·Cuba untuk tidak mempunyai fungsi bersarang
·Boleh mempunyai pembolehubah global
·Letakkan pernyataan bukan tugasan dalam fungsi onload ke dalam fungsi berasingan
Tukar kepada berorientasikan objek
·Pembolehubah global ialah atribut
·Fungsi ialah kaedah
·Buat objek dalam onload
·Tukar isu penunjuk ini
Perbaiki reka letak kesan seretan dahulu:
Struktur HTML:
gaya csc:
#kotak{kedudukan: mutlak;lebar: 200px;tinggi: 200px;latar belakang: merah;}
Langkah pertama ialah menyemak seret dan lepas berorientasikan proses
window.onload = fungsi (){
// Dapatkan elemen dan nilai awal
var oBox = document.getElementById('box'),
disX = 0, disY = 0;
//Acara akhbar tetikus bekas
oBox.onmousedown = fungsi (e){
var e = e ||. tetingkap. acara;
disX = e.clientX - this.offsetLeft;
disY = e.clientY - this.offsetTop;
document.onmousemove = fungsi (e){
var e = e || window.event;
oBox.style.left = (e.clientX - disX) 'px';
oBox.style.top = (e.clientY - disY) 'px';
};
document.onmouseup = fungsi (){
document.onmousemove = null;
document.onmouseup = null;
};
kembali palsu;
};
};
Langkah kedua ialah menulis semula berorientasikan proses menjadi berorientasikan objek
window.onload = fungsi (){
var seret = Seret baharu('kotak');
Drag.init();
};
//Seret Pembina
fungsi Seret(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}
Drag.prototype.init = fungsi (){
// penunjuk ini
var saya = ini;
This.obj.onmousedown = fungsi (e){
var e = e ||
saya.mouseDown(e);
//Sekat acara lalai
kembali palsu;
};
};
Drag.prototype.mouseDown = fungsi (e){
// penunjuk ini
var saya = ini;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = fungsi (e){
var e = e ||. tetingkap. acara;
saya.mouseMove(e);
};
Document.onmouseup = fungsi (){
me.mouseUp();
}
};
Drag.prototype.mouseMove = fungsi (e){
This.obj.style.left = (e.clientX - this.disX) 'px';
This.obj.style.top = (e.clientY - this.disY) 'px';
};
Drag.prototype.mouseUp = fungsi (){
Document.onmousemove = null;
Document.onmouseup = null;
};
Langkah ketiga ialah melihat perbezaan dalam kod
Halaman utama menggunakan pembina untuk mencipta objek:
Salin kod Kod adalah seperti berikut:
//Seret Pembina
fungsi Seret(id){
This.obj = document.getElementById(id);
This.disX = 0;
This.disY = 0;
}
Ikuti peraturan yang ditulis sebelum ini dan ubah semua pembolehubah global menjadi atribut!
Kemudian tulis semua fungsi pada prototaip:
Drag.prototype.init = fungsi (){
};
Drag.prototype.mouseDown = fungsi (){
};
Drag.prototype.mouseMove = fungsi (){
};
Drag.prototype.mouseUp = fungsi (){
};
Mari kita lihat fungsi init dahulu:
Drag.prototype.init = fungsi (){
// penunjuk ini
var saya = ini;
This.obj.onmousedown = fungsi (e){
var e = e ||
saya.mouseDown(e);
//Sekat acara lalai
kembali palsu;
};
};
Kami menggunakan pembolehubah saya untuk menyimpan penunjuk ini, supaya ralat yang ditunjukkan oleh ini tidak akan berlaku dalam kod seterusnya
Kemudian datang fungsi mouseDown:
Drag.prototype.mouseDown = fungsi (e){
// penunjuk ini
var saya = ini;
This.disX = e.clientX - this.obj.offsetLeft;
This.disY = e.clientY - this.obj.offsetTop;
Document.onmousemove = fungsi (e){
var e = e ||. tetingkap. acara;
saya.mouseMove(e);
};
Document.onmouseup = fungsi (){
me.mouseUp();
}
};
Apabila menulis semula ke dalam berorientasikan objek, perhatikan objek acara. Oleh kerana objek acara hanya muncul dalam acara, kita perlu menyimpan objek acara dalam pembolehubah dan kemudian meneruskannya melalui parameter!
Tiada apa yang perlu diberi perhatian dalam fungsi mouseMove dan fungsi mouseUp berikut!
Perkara yang perlu diberi perhatian
Mengenai isu penunjuk ini, ini amat penting dalam berorientasikan objek!
Bacaan lanjutan ini:
http://div.io/topic/809
Mengenai isu objek acara, objek acara hanya muncul dalam acara, jadi perhatikan semasa menulis kaedah!