6miu盘搜

JS面向对象：json的对象、命名空间、call、继承、拖拽的继承

技术2024-01-07 100

Json方式的面向对象

把方法包在一个Json里有人管他叫——命名空间在公司里，把同一类方法，包在一起 <script> var json={ name: 'blue', qq: '258248832', showName: function () { alert('我的名字叫：'+this.name); }, showQQ: function () { alert('我的QQ号是：'+this.qq); } }; json.showName(); json.showQQ(); </script> <script> var zns={}; zns.common={}; zns.fx={}; zns.site={}; zns.common.getUser=function () { alert('a'); }; zns.fx.getUser=function () { alert('b'); }; zns.site.getUser=function () { alert('c'); }; zns.common.getUser(); zns.fx.getUser(); zns.site.getUser(); </script>

拖拽和继承

继承 <script> function A() { this.abc=12; } A.prototype.show=function () { alert(this.abc); }; //继承A function B() { //this->new B() A.call(this); } //B.prototype=A.prototype; for(var i in A.prototype) { B.prototype[i]=A.prototype[i]; } B.prototype.fn=function () { alert('abc'); }; var objB=new B(); var objA=new A(); objA.fn(); </script> call <script> function show(a, b) { alert('this是：'+this+'\na是：'+a+'\nb是：'+b); } //show(12, 5); /* this是：[object Window] a是：12 b是：5 */ show.call('abc', 12, 5); /* this是：abc a是：12 b是：5 */ </script> 面向对象的拖拽改写原有拖拽

原有拖拽

<style> #div1 {width:200px; height:200px; background:yellow; position:absolute;} </style> <script> window.onload=function () { var oDiv=document.getElementById('div1'); oDiv.onmousedown=function (ev) { var oEvent=ev||event; var disX=oEvent.clientX-oDiv.offsetLeft; var disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=function (ev) { var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; }; document.onmouseup=function () { document.onmousemove=null; document.onmouseup=null; }; }; }; </script> </head> <body> <div id="div1"></div> </body>

改写后的拖拽

<style> #div1 {width:200px; height:200px; background:yellow; position:absolute;} </style> <script> var oDiv=null; var disX=0; var disY=0; window.onload=function () { oDiv=document.getElementById('div1'); oDiv.onmousedown=fnDown; }; function fnDown(ev) { var oEvent=ev||event; disX=oEvent.clientX-oDiv.offsetLeft; disY=oEvent.clientY-oDiv.offsetTop; document.onmousemove=fnMove; document.onmouseup=fnUp; } function fnMove(ev) { var oEvent=ev||event; oDiv.style.left=oEvent.clientX-disX+'px'; oDiv.style.top=oEvent.clientY-disY+'px'; } function fnUp() { document.onmousemove=null; document.onmouseup=null; } </script> </head> <body> <div id="div1"></div> </body>

对象的继承

什么是继承在原有类的基础上，略作修改，得到一个新的类不影响原有类的功能

instanceof运算符查看对象是否是某个类的实例

使用继承

限制范围的拖拽类

构造函数伪装属性的继承 -原理：欺骗构造函数 call的使用

原型链方法的继承 -原理：复制方法覆盖原型和方法复制

Drag.js

function Drag(id) { var _this=this; this.disX=0; this.disY=0; this.oDiv=document.getElementById(id); this.oDiv.onmousedown=function (ev) { _this.fnDown(ev); return false; }; }; Drag.prototype.fnDown=function (ev) { var _this=this; var oEvent=ev||event; this.disX=oEvent.clientX-this.oDiv.offsetLeft; this.disY=oEvent.clientY-this.oDiv.offsetTop; document.onmousemove=function (ev) { _this.fnMove(ev); }; document.onmouseup=function () { _this.fnUp(); }; }; Drag.prototype.fnMove=function (ev) { var oEvent=ev||event; this.oDiv.style.left=oEvent.clientX-this.disX+'px'; this.oDiv.style.top=oEvent.clientY-this.disY+'px'; }; Drag.prototype.fnUp=function () { document.onmousemove=null; document.onmouseup=null; };

LimitDrag.js

function LimitDrag(id) { Drag.call(this, id); //继承属性 } for(var i in Drag.prototype)//继承方法 { LimitDrag.prototype[i]=Drag.prototype[i]; } LimitDrag.prototype.fnMove=function (ev)//重写 { var oEvent=ev||event; var l=oEvent.clientX-this.disX; var t=oEvent.clientY-this.disY; if(l<0) { l=0; } else if(l>document.documentElement.clientWidth-this.oDiv.offsetWidth) { l=document.documentElement.clientWidth-this.oDiv.offsetWidth; } this.oDiv.style.left=l+'px'; this.oDiv.style.top=t+'px'; }; <style> #div1 {width:200px; height:200px; background:yellow; position:absolute;} #div2 {width:200px; height:200px; background:green; position:absolute;} </style> <script src="Drag.js"></script> <script src="LimitDrag.js"></script> <script> window.onload=function () { new Drag('div1'); new LimitDrag('div2'); }; </script> </head> <body> <div id="div1">普通拖拽</div> <div id="div2">限制范围</div> </body>

Processed: 0.015, SQL: 9