ก่อนอื่นให้เข้าใจกฎพื้นฐานและปัญหาของแบบฝึกหัดเชิงวัตถุ:
ก่อนอื่นเขียนวิธีการเขียนปกติจากนั้นเปลี่ยนเป็นคำเขียนเชิงวัตถุ
วิธีการเสียรูปแบบธรรมดา
・ พยายามอย่าให้ฟังก์ชั่นซ้อนกัน
・ สามารถมีตัวแปรทั่วโลก
・ ใส่คำสั่งในฟังก์ชัน OnLoad ที่ไม่ได้รับมอบหมายเป็นฟังก์ชั่นแยกต่างหาก
เปลี่ยนเป็นวัตถุที่มุ่งเน้น
・ ตัวแปรทั่วโลกเป็นคุณลักษณะ
・ ฟังก์ชั่นเป็นวิธีการ
・ สร้างวัตถุใน onLoad
・ เกี่ยวกับการเปลี่ยนตัวชี้นี้
ขั้นแรกให้ปรับปรุงเค้าโครงของเอฟเฟกต์การลาก:
โครงสร้าง HTML:
<div id = "box"> </div>
สไตล์ CSC:
#Box {ตำแหน่ง: Absolute; Width: 200px; ความสูง: 200px; พื้นหลัง: สีแดง;}
ขั้นตอนแรกคือการตรวจสอบการลากและวางที่มุ่งเน้นกระบวนการ
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
// รับองค์ประกอบและค่าเริ่มต้น
var obox = document.getElementById ('box')
disx = 0, disy = 0;
// เหตุการณ์การกดเมาส์คอนเทนเนอร์
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;
-
กลับเท็จ;
-
-
ขั้นตอนที่ 2: เขียนใหม่มุ่งเน้นไปที่วัตถุที่มุ่งเน้น
การคัดลอกรหัสมีดังนี้:
window.onload = function () {
var drag = new drag ('box');
drag.init ();
-
// ตัวสร้างการลาก
ฟังก์ชั่นลาก (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
-
drag.prototype.init = function () {
// ตัวชี้นี้
var me = this;
this.obj.onmousedown = function (e) {
var e = e || เหตุการณ์;
Me.Mousedown (E);
// บล็อกเหตุการณ์เริ่มต้น
กลับเท็จ;
-
-
drag.prototype.mousedown = function (e) {
// ตัวชี้นี้
var me = this;
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;
-
ขั้นตอนที่ 3: ดูว่ารหัสแตกต่างกันอย่างไร
โฮมเพจใช้ตัวสร้างเพื่อสร้างวัตถุ:
การคัดลอกรหัสมีดังนี้:
// ตัวสร้างการลาก
ฟังก์ชั่นลาก (id) {
this.obj = document.getElementById (id);
this.disx = 0;
this.disy = 0;
-
ปฏิบัติตามกฎที่เป็นลายลักษณ์อักษรก่อนหน้านี้และเปลี่ยนตัวแปรทั่วโลกให้เป็นคุณลักษณะ!
จากนั้นเขียนฟังก์ชั่นทั้งหมดบนต้นแบบ:
การคัดลอกรหัสมีดังนี้:
drag.prototype.init = function () {
-
drag.prototype.mousedown = function () {
-
drag.prototype.mousemove = function () {
-
drag.prototype.mouseup = function () {
-
มาดูฟังก์ชั่น init ก่อน:
การคัดลอกรหัสมีดังนี้:
drag.prototype.init = function () {
// ตัวชี้นี้
var me = this;
this.obj.onmousedown = function (e) {
var e = e || เหตุการณ์;
Me.Mousedown (E);
// บล็อกเหตุการณ์เริ่มต้น
กลับเท็จ;
-
-
เราใช้ตัวแปร ME เพื่อบันทึกตัวชี้นี้เพื่อให้รหัสต่อไปนี้ไม่แสดงข้อผิดพลาดที่ชี้ไปที่ตัวชี้นี้
ถัดไปคือฟังก์ชั่น mousedown:
การคัดลอกรหัสมีดังนี้:
drag.prototype.mousedown = function (e) {
// ตัวชี้นี้
var me = this;
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 ();
-
-
เมื่อเขียนใหม่ลงในวัตถุที่มุ่งเน้นคุณควรให้ความสนใจกับวัตถุเหตุการณ์ เนื่องจากวัตถุเหตุการณ์ปรากฏขึ้นในเหตุการณ์เท่านั้นเราจึงต้องบันทึกตัวแปรวัตถุเหตุการณ์แล้วส่งผ่านพารามิเตอร์!
ไม่มีอะไรให้ความสนใจในฟังก์ชั่น Mousemove และฟังก์ชั่น MouseUp ที่อยู่เบื้องหลัง!
ปัญหาที่ต้องระวัง
เกี่ยวกับปัญหาของตัวชี้นี้สิ่งนี้มีความสำคัญอย่างยิ่งในการมุ่งเน้นวัตถุ!
การอ่านส่วนขยายนี้:
http://div.io/topic/809
เกี่ยวกับปัญหาของวัตถุเหตุการณ์วัตถุเหตุการณ์จะปรากฏในเหตุการณ์เท่านั้นดังนั้นคุณควรให้ความสนใจกับวิธีการเมื่อเขียน!