作为一名初学者说说js从零开始面向对象
来源:互联网 发布:认证报名保存数据失败 编辑:程序博客网 时间:2024/05/19 01:59
在谈面向对象的前提的下我们需要来个来个面向过程的函数,便于改写成面向对象。。。
例如来个拖拽函数
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.将onload改写成构造函数
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的指向问题难一点。这个也很好解决,借助调试工具一行行调试,慢慢来,多写几个。掌握这种简单的方法就比较快了
- 作为一名初学者说说js从零开始面向对象
- 作为一名初学者说说js从零开始面向对象
- 初学者沟通:Js面向对象设计(一):对象属性
- js面向对象(一)
- 说说面向对象clone
- js面向对象(一)
- JS面向对象(一)
- JS面向对象(一)
- JS面向对象(一)-----------理解对象
- java学习作为一名java初学者,如何快速学习java?
- java学习作为一名java初学者,如何快速学习java?
- 致面向对象技术初学者的一封公开信
- js面向对象学习一《面向对象概念》
- JS面向对象的基础(一)
- JS---JavaScript面向对象编程<一>:封装
- js - JavaScript面向对象编程<一>:封装
- JS面向对象学习笔记(一)
- js面向对象小结(一)
- linux下find指令用法
- JPA-5 使用二级缓存
- 作为一名初学者说说js从零开始面向对象
- 矩阵快速幂求斐波那契数列
- ZOJ
- 作为一名初学者说说js从零开始面向对象
- linux常用命令详解
- Cookie练习
- 539. Minimum Time Difference
- 京东实习笔试——分堆A
- FSL5.0使用教程
- 数据库高级管理及优化
- TCP通信丢包原因总结
- linux段错误