Во-первых, давайте поймем основные правила и проблемы объектно-ориентированных упражнений:
Сначала запишите обычный метод написания, а затем измените его на объектно-ориентированный термин для написания
Обычный метод деформация
・ Старайтесь не выполнять вложенные функции
・ Могут быть глобальные переменные
・ Занимайте операторы в функцию Onload, которые не являются назначениями в отдельные функции
Изменить на объектно-ориентированные
・ Глобальные переменные - это атрибуты
・ Функция - это метод
・ Создать объект в Onload
・ Об изменении этого указателя
Во -первых, улучшить макет эффекта сопротивления:
Структура HTML:
<div id = "box"> </div>
Стиль CSC:
#box {позиция: абсолютная; ширина: 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 ();
};
// Constructor Crag
функция перетаскивания (id) {
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: Посмотрите, что отличается от кода
На главной странице используется конструктор для создания объекта:
Кода -копия выглядит следующим образом:
// Constructor Crag
функция перетаскивания (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.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 и функции MouseUp нечего обращать внимание!
Проблемы, чтобы знать о
Что касается вопроса этого указателя, это особенно важно в объектно-ориентированном!
Это удлинительное чтение:
http://div.io/topic/809
Что касается вопроса объектов событий, объекты событий появляются только в событиях, поэтому вы должны обратить внимание на метод при написании!