欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JS的面向对象二(通过构造函数的方式)

程序员文章站 2022-06-30 19:30:51
通过按住鼠标拖动的例子来演示面向对象的过程 css部分 #box1{ width: 100px; height: 100px; background: #f00; position: absolute; left: 0; top:0; } HTML部分
J ......

通过按住鼠标拖动的例子来演示面向对象的过程

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");
}