JS中面对对象的程序设计
2015-09-14 17:43
537 查看
在JS中,我们常说的面向对象,大多数情况下 指的就是原型链模式的编程,面向对象的编程方式 可扩展性 特别强,结构的可扩展性:只要是在类上实现个某个功能,则所有的实例都会具备这个功能。如果我们写好一个方法了 我们可以再不改变原来代码的情况下,给其增加新的功能。只需要保证在之前的代码中预留的接口与现在写的一致就ok。其实接口这个东西我觉得在JS 中就是一种标识,如下面的代码
只要我们 保证我们的自定义事件的开头为self就会进行自定义事件的绑定,我觉得 在这里就可以称这个为接口
在面对对象编程的过程中我们一定要保证职责的单一性,一个方法完成一个功能。
面对对象,是个很抽象的概念。按我的大白话说就是,一个对象好意一个事物(比如人)我们写好了一个人,任何这个人本来有什么(嘴,脸,手,脚什么的 ),我们都给添加进去,那么我们创建第二个人的时候,也有相同的属性。而且每一个人呢,又有不同的特色 ,我们再给每一个人添加不同的特色,而且跟另外一个不干扰,而且是可以不断扩展的,只要保证我们是在这个人身上写的,那么这个人就拥有,别人就没有,也就是说这个人预留的学习接口,跟后天学习得到的东西的接口保证一直。这种编程的方式就是面向对象的编程(感觉还是说的很乱–!)。
下面我们在来看一段 用面对对象思想所写的拖拽
这样 只要我们 var obj= new Drag(ele);那么那个ele 就是可以拖拽的,而且我们要给这个ele添加什们新的功能 只需要这样就OK了
这样我们就在不改变原有代码的情况下 ,添加了很多新的方法,这种编程的思想就是面对对象的思想
不知道大家有木有理解–!
function on(ele, type, fn) { if (/^self/.test(type)) { if (!ele[type]) { ele[type] = []; } var a = ele[type]; for (var i = 0; i < a.length; i++) { if (a[i] == fn)return; } a.push(fn); return; } if (!ele["aEvent" + type]) { ele["aEvent" + type] = []; if (ele.addEventListener) { ele.addEventListener(type, run, false); } else { ele.attachEvent("on" + type, function () { run.call(ele); }) } } var a = ele["aEvent" + type]; for (var i = 0; i < a.length; i++) { if (a[i] == fn)return; } a.push(fn); return; }
只要我们 保证我们的自定义事件的开头为self就会进行自定义事件的绑定,我觉得 在这里就可以称这个为接口
在面对对象编程的过程中我们一定要保证职责的单一性,一个方法完成一个功能。
面对对象,是个很抽象的概念。按我的大白话说就是,一个对象好意一个事物(比如人)我们写好了一个人,任何这个人本来有什么(嘴,脸,手,脚什么的 ),我们都给添加进去,那么我们创建第二个人的时候,也有相同的属性。而且每一个人呢,又有不同的特色 ,我们再给每一个人添加不同的特色,而且跟另外一个不干扰,而且是可以不断扩展的,只要保证我们是在这个人身上写的,那么这个人就拥有,别人就没有,也就是说这个人预留的学习接口,跟后天学习得到的东西的接口保证一直。这种编程的方式就是面向对象的编程(感觉还是说的很乱–!)。
下面我们在来看一段 用面对对象思想所写的拖拽
function EventEmitter() {} EventEmitter.prototype.on = function (type, fn) { if (!this["emitter" + type]) { this["emitter" + type] = []; } var a = this["emitter" + type]; for (var i = 0; i < a.length; i++) { if (a[i] == fn)return; } a.push(fn); }; EventEmitter.prototype.run = function (type,e) { var a = this["emitter" + type]; if(a&& a.length){ for(var i=0;i< a.length;){ if(typeof a[i]=="function"){ a[i].call(this,e); i++; }else{ a.splice(i,1) } } } }; EventEmitter.prototype.off = function (type,fn) { var a = this["emitter" + type]; if(a&& a.length){ for(var i=0;i< a.length;){ if(a[i]==fn){ a[i]=null;return; } } } }; //拖拽库 function Drag(ele){ this.ele=ele; this.x=null; this.y=null; this.mx=null; this.my=null; this.DOWN=changeThis(this,this.down) this.MOVE=changeThis(this,this.move); this.UP=changeThis(this,this.up); on(this.ele,"mousedown",this.DOWN) //这个on方法就是上面的那个代码 } Drag.prototype=new EventEmitter(); Drag.prototype.down=function(e){ this.x=this.ele.offsetLeft; this.y=this.ele.offsetTop; this.mx= e.pageX; this.my= e.pageY; if(this.setCapture){ this.setCapture(); on(this,"mousemove",this.MOVE); on(this,"mouseup",this.UP); }else{ on(document,"mousemove",this.MOVE); on(document,"mouseup",this.UP); } e.preventDefault();//阻止事件 默认行为 this.run("dragStart",e) }; Drag.prototype.move=function(e){ this.ele.style.left=this.x+ e.pageX-this.mx+"px"; this.ele.style.top=this.y+ e.pageY-this.my+"px"; this.run("dragging",e) }; Drag.prototype.up=function(e){ if(this.ele.releaseCapture){ this.ele.releaseCapture(); off(this,"mousemove",this.MOVE) off(this,"mouseup",this.UP); }else{ off(document,"mousemove",this.MOVE) off(document,"mouseup",this.UP); } this.run("dragEnd",e) };
这样 只要我们 var obj= new Drag(ele);那么那个ele 就是可以拖拽的,而且我们要给这个ele添加什们新的功能 只需要这样就OK了
Drag.prototype.addFunction=function(){ //这里面第二个参数均为方法,即我们添加的功能 this.on("dragStart",addBorder); this.on("dragStart",increaseZindex); this.on("dragEnd",removeBorder) this.on("dragEnd",goBack); this.on("dragging",impact); this.on("dragEnd",changePosition) }; zIndex=1; var oLis=document.getElementsByTagName("li"); for(var i=oLis.length-1;i>=0;i--){ var oLi=oLis[i]; var obj=new Drag(oLi); oLi.style.left=(oLi.l=oLi.offsetLeft)+"px"; oLi.style.top=(oLi.t=oLi.offsetTop)+"px"; oLi.style.margin=0; oLi.style.position="absolute"; obj.addFunction(); }
这样我们就在不改变原有代码的情况下 ,添加了很多新的方法,这种编程的思想就是面对对象的思想
不知道大家有木有理解–!
相关文章推荐
- jsp 中的 param.xxx == 0 的问题
- JSONModel的使用
- 贰、js的基础(一)
- Json
- fastjson生成JSON字符串的时候出现$ref [转]
- JS设计模式之工厂模式
- js简单运动框架--1 单属性运动
- 本地缓存下的json值与a标签下的id值比较、显示与隐藏
- go restful json api
- SBJSON的使用
- JavaScript 基本语法
- 年月日时间三级联动js
- jsoncpp使用简介
- 省市县三级联动js
- js设置datagriad的行移动
- js带缩略图的图片轮播效果代码分享
- js 窗口open
- 对js里bind函数的理解
- video.js文档
- js当前日期