您的位置：首页 > Web前端 > JavaScript

作为一名初学者说说js从零开始面向对象

2017-04-08 19:55 337 查看

在谈面向对象的前提的下我们需要来个来个面向过程的函数，便于改写成面向对象。。。

例如来个拖拽函数

window.onload = function(){

var odiv1 = document.getElementById(‘div1’);

var dx=0;
var dy =0;

odiv1.onmousedown = function (ev){
var ev = ev || event;
var dx = ev.clientX - odiv1.offsetLeft;
var dy = ev.clientY - odiv1.offsetTop;
document.onmousemove = function (ev){
var ev = ev || event;
odiv1.style.left = ev.clientX -dx + 'px';
odiv1.style.top = ev.clientY -dy + 'px'
}
document.onmouseup =function (){
document.onmousemove = null;
document.onmouseup = null;
}
}
}
</script>

</head>
<body>
<div id="div1"></div>

这个要是还看不懂，面向对象说了也是白说了。。。。。

接下来通过一种很通用很简单，但不流行的方法，改写函数

要点：1第一不能有函数嵌套

2.将o
9faa
nload改写成构造函数

3.将全局变量改写成方法

4.将函数改写成方法

结果然后如下：

var odiv1 = null;

var dx = 0;

var dy = 0;

function drag(id) {

var _this = this;

this.odiv = document.getElementById(id);

this.odiv.onmousedown = function(){
_this.dragdown();
};

}

drag.prototype.dragdown =function (ev){

var _this = this;

var ev = ev || event;

this.odiv.dx = ev.clientX - this.odiv.offsetLeft;

this.odiv.dy = ev.clientY-this.odiv.offsetTop;

document.onmousemove = function(){

_this.dragmove();

};

document.onmouseup = function(){

_this.dragup();

};

return false;

}

drag.prototype.dragmove=function dragmove(ev){

var ev = ev || event;
this.odiv.style.left = ev.clientX -this.odiv.dx + 'px'
this.odiv.style.top = ev.clientY -this.odiv.dy + 'px'
}

drag.prototype.dragup =function dragup(){

document.onmousemove = null;

document.onmouseup = null;

}

在写过程估计就this的指向问题难一点。这个也很好解决，借助调试工具一行行调试，慢慢来，多写几个。掌握这种简单的方法就比较快了

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 面向对象

相关文章推荐

新的分享

章节导航