먼저, 객체 지향 연습의 기본 규칙과 문제를 이해해 봅시다.
먼저 일반 쓰기 방법을 작성한 다음 객체 지향 쓰기 용어로 변경하십시오.
일반적인 방법 변형
・ 중첩 된 기능을하지 않도록 노력하십시오
global 글로벌 변수가있을 수 있습니다
・ 할당되지 않는 온부하 기능에 별도의 함수에 명세서를 넣으십시오.
객체 지향으로 변경
・ 글로벌 변수는 속성입니다
・ 함수는 메소드입니다
anload에서 객체를 만듭니다
・이 포인터를 바꾸는 것에 대해
먼저 드래그 효과의 레이아웃을 향상시킵니다.
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 ();
};
// 생성자 드래그
함수 드래그 (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 단계 : 코드가 무엇인지 확인하십시오
홈페이지는 생성자를 사용하여 객체를 만듭니다.
코드 사본은 다음과 같습니다.
// 생성자 드래그
함수 드래그 (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 기능과 그 뒤에 마우스 업 기능에주의를 기울일 것이 없습니다!
알아야 할 문제
이 포인터의 문제와 관련하여 이것은 객체 지향에서 특히 중요합니다!
이 확장 판독 값 :
http://div.io/topic/809
이벤트 객체의 문제와 관련하여 이벤트 객체는 이벤트에만 나타나므로 쓸 때 방법에주의를 기울여야합니다!