// 面向过程改变成面向对象三步曲 // //第一步,用面向过程的方法完成功能 window.onload = function () { var oDiv = document.getElementById("div1"); oDiv.onmousedown = function (ev) { var ev = ev || window.event; var disX = ev.clientX - oDiv.offsetLeft; var disY = ev.clientY = oDiv.offsetTop; document.onmousemove = function (ev) { var ev = ev || window.event; oDiv.style.left = ev.clientX - disX + "px"; oDiv.style.top = ev.clientY - disY + "px"; }; document.onmouseup = function () { document.onmousemove = document.onmouseup = null; }; }; }; //第二步 // 1,onload里面不能存在函数包含函数,所以将所有的函数都拖出来 // 2,将函数中需要用到的变量拖出来,作为全局变量 var oDiv = null; var disX = 0; var disY = 0; window.onload = function () { oDiv = document.getElementById("div1"); oDiv.onmousedown = fnDown; }; function fnDown(ev) { var ev = ev || window.event; disX = ev.clientX - oDiv.offsetLeft; disY = ev.clientY = oDiv.offsetTop; document.onmousemove = fnMove; document.onmouseup = fnUp; }; function fnMove(ev) { var ev = ev || window.event; oDiv.style.left = ev.clientX - disX + "px"; oDiv.style.top = ev.clientY - disY + "px"; }; function fnUp() { document.onmousemove = document.onmouseup = null; }; // 第三步 // 1,将构造函数从onload里拖出来 // 2,将所有的全局变量变成构造函数的属性 // 3,将所有的函数都变成构造函数原型上的方法 // 4,调整this指向 // PS:构造函数里存在 定时器 或者 事件的情况下,this指向通常容易发生变化 // 解决方法就是 先_this = this存储一下,然后在定时器或事件下面包一层函数,并在这一层函数中使用_this; window.onload = function () { new Drag("div1"); }; function Drag(id) { this.oDiv = document.getElementById(id); this.disX = 0; this.disY = 0; var _this = this; this.oDiv.onmousedown = function(){ _this.fnDown(); }; } Drag.prototype.fnDown = function(ev) { var ev = ev || window.event; var _this = this; this.disX = ev.clientX - this.oDiv.offsetLeft; this.disY = ev.clientY - this.oDiv.offsetTop; document.onmousemove = function(){ _this.fnMove(); }; document.onmouseup = function(){ _this.fnUp(); }; }; Drag.prototype.fnMove = function(ev) { var ev = ev || window.event; this.oDiv.style.left = ev.clientX - this.disX + "px"; this.oDiv.style.top = ev.clientY - this.disY + "px"; }; Drag.prototype.fnUp = function() { document.onmousemove = document.onmouseup = null; };
面向过程改变成面向对象三步曲
最新推荐文章于 2022-11-05 16:50:09 发布