أولاً ، دعونا نفهم القواعد الأساسية ومشاكل التمارين الموجهة للكائنات:
أولا اكتب طريقة الكتابة العادية ، ثم قم بتغييرها إلى مصطلح الكتابة الموجهة للكائنات
تشوه الطريقة العادية
・ حاول عدم وجود وظائف متداخلة
・ يمكن أن يكون هناك متغيرات عالمية
・ ضع العبارات في وظيفة Onload التي لا تعتبر مهامًا في وظائف منفصلة
التغيير إلى الكائن الموجهة
・ المتغيرات العالمية هي سمات
・ الوظيفة هي الطريقة
・ قم بإنشاء كائن في Onload
・ حول تغيير هذا المؤشر
أولاً ، تحسين تخطيط تأثير السحب:
هيكل HTML:
<div id = "box"> </viv>
نمط CSC:
#box {الموضع: Absolute ؛ العرض: 200 بكسل ؛ الارتفاع: 200 بكسل ؛ الخلفية: أحمر ؛}
الخطوة الأولى هي مراجعة السحب والإفلات الموجهة نحو العملية
نسخة الكود كما يلي:
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 () ؛
} ؛
// مُنشئ السحب
وظيفة السحب (معرف) {
this.obj = document.getElementById (id) ؛
this.disx = 0 ؛
this.disy = 0 ؛
}
drag.prototype.init = function () {
// هذا المؤشر
var me = هذا ؛
this.obj.onmousedown = function (e) {
var e = e || حدث؛
me.mousedown (e) ؛
// حظر الأحداث الافتراضية
العودة كاذبة
} ؛
} ؛
drag.prototype.mousedown = function (e) {
// هذا المؤشر
var me = هذا ؛
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: انظر ما هو الكود مختلف
تستخدم الصفحة الرئيسية مُنشئًا لإنشاء كائن:
نسخة الكود كما يلي:
// مُنشئ السحب
وظيفة السحب (معرف) {
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.obj.onmousedown = function (e) {
var e = e || حدث؛
me.mousedown (e) ؛
// حظر الأحداث الافتراضية
العودة كاذبة
} ؛
} ؛
نستخدم متغير ME لحفظ هذا المؤشر ، بحيث لا يعرض الكود التالي الخطأ الذي أشار إليه هذا المؤشر.
التالي هو وظيفة Mousedown:
نسخة الكود كما يلي:
drag.prototype.mousedown = function (e) {
// هذا المؤشر
var me = هذا ؛
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 ووظيفة الفأر وراءها!
قضايا يجب أن تكون على دراية بها
فيما يتعلق بمسألة هذا المؤشر ، هذا مهم بشكل خاص في الموجهة نحو الكائن!
قراءة التمديد هذه:
http://div.io/topic/809
فيما يتعلق بمسألة كائنات الأحداث ، تظهر كائنات الأحداث فقط في الأحداث ، لذلك يجب عليك الانتباه إلى الطريقة عند الكتابة!