JS的面向對象二(通過構造函數的方式)

通過按住滑鼠拖動的例子來演示面向對象的過程

css部分

#box1{
width: 100px;
height: 100px;
background: #f00;
position: absolute;
left: 0;
top:0;
}

HTML部分

<div id="box1"></div>

JS部分

// 面向過程1
// 寫出實現邏輯
// var oBox = document.getElementById('box1');

// oBox.onmousedown = function(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var distX = ev.clientX-this.offsetLeft;
// var distY = ev.clientY-this.offsetTop;

// document.onmousemove = function(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var newX = ev.clientX;
// var newY = ev.clientY;
// oBox.style.left = newX-distX+"px";
// oBox.style.top = newY-distY+"px";
// }
// document.onmouseup = function(){
// this.onmousedown = null;
// this.onmousemove = null;
// }
// }

// 面向過程2
// 寫成函數形式
// window.onload = function(){
// oBox = document.getElementById('box1');
// oBox.onmousedown = fnDown;
// }

// function fnDown(e){
// var ev = e || window.event;
// ev.stopPropagation();
// distX = ev.clientX-this.offsetLeft;
// distY = ev.clientY-this.offsetTop;
// document.onmousemove = fnMove;
// document.onmouseup = fnUp;
// }
// function fnMove(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var newX = ev.clientX;
// var newY = ev.clientY;
// oBox.style.left = newX-distX+"px";
// oBox.style.top = newY-distY+"px";
// }
// function fnUp(){
// this.onmousedown = null;
// this.onmousemove = null;
// }
// 面向過程3
// 在函數內部通過不加var設置全局變數不好，就把全局變數提到最頂端。
// 只是為了定義一些全局變數，目前還沒有值，就用null或0初始化值。
// var oBox = null;
// var distX = 0;
// var distY = 0;
// window.onload = function(){
// oBox = document.getElementById('box1');
// oBox.onmousedown = fnDown;
// }
// function fnDown(e){
// var ev = e || window.event;
// ev.stopPropagation();
// distX = ev.clientX-this.offsetLeft;
// distY = ev.clientY-this.offsetTop;
// document.onmousemove = fnMove;
// document.onmouseup = fnUp;
// // console.log(this);
// }
// function fnMove(e){
// var ev = e || window.event;
// ev.stopPropagation();
// var newX = ev.clientX;
// var newY = ev.clientY;
// oBox.style.left = newX-distX+"px";
// oBox.style.top = newY-distY+"px";
// }
// function fnUp(){
// this.onmousedown = null;
// this.onmousemove = null;
// // console.log(this);
// }

// 轉化成面向對象
// 1.全局變數轉換為Drag的屬性，在前面加this，this指向Drag。
// 2.若onmousedown直接=fnDown，fnDown中的this就是指向this.oBox，而非Drag。
// fnDown為Drag的方法，它的this必須指向Drag。把Drag的this賦值給_this，就可
// 在onmousedown後建立匿名函數function(){},調用Drag的fnDown方法，即_this.fnDown()。
// 3.同理通過var _this = this，把Drag的fnMove,fnUp方法的this指向擺正。
// 4.之前fnDown是oBox調用的，裡面的this.offsetLeft，指向oBox，現在就要變成this.oBox。
// 之前fnUp是document調用的，裡面的this指向document，現this指向是Drag，就要把this變成document。

// 註：實驗表明，不以原型的方式定義函數，單用this把各方法與Drag綁到一塊不起作用，

function Drag(id){
this.oBox = document.getElementById(id);
this.distX = 0;
this.distY = 0;
var _this = this;
this.oBox.onmousedown = function(){
_this.fnDown();
}
}
Drag.prototype.fnDown = function(e){
var ev = e || window.event;
ev.stopPropagation();
this.distX = ev.clientX-this.oBox.offsetLeft;
this.distY = ev.clientY-this.oBox.offsetTop;
var _this = this;
document.onmousemove = function(){
_this.fnMove();
}
document.onmouseup = function(){
_this.fnUp();
}
}
Drag.prototype.fnMove = function(e){
var ev = e || window.event;
ev.stopPropagation();
var newX = ev.clientX;
var newY = ev.clientY;
this.oBox.style.left = newX-this.distX+"px";
this.oBox.style.top = newY-this.distY+"px";
}
Drag.prototype.fnUp = function(){
document.onmousedown = null;
document.onmousemove = null;
}
window.onload = function(){
var drag1 = new Drag("box1");
}