命名空间和继承
命名空间：其实就是利用json的方式来建立一个独自的空间而已
//命名空间 第一个小例子 var space={}; space.slist={}; space.fn={}; space.site={}; space.slist.getUser=function(){ alert('a'); } space.fn.getUser=function(){ alert('b'); } space.site.getUser=function(){ alert('c'); } space.slist.getUser(); space.fn.getUser(); space.site.getUser();
//命名空间 第二个小例子 var json={}; json.userName="jcak"; json.age=123; console.log(json.age);
继承：
//继承主要继承父级对象的属性和方法
继承属性
function A(){ this.abc=12; } A.prototype.show=function(){ alert(this.abc); } //继承A function B(){ }
首先了解一个东西，call();
//call function show(){ alert(this); } show(); //window show.call(); //弹出window，上面show()是他的简写 如果里面传入一个值，比如说12 show.call(12); //this变成了12; 那么call()有一个重要的功能，可以改变函数执行的时候的this 如果传入两个参数 function show(a,b){ alert('this是：'+this+'\na是：'+a+'\nb是：'+b); } show(12,2); //很好理解，this是window，a是12，b是5 如果用call() function show(a,b){ alert('this是：'+this+'\na是：'+a+'\nb是：'+b); } show.call('abc',12,5); //那么this是abc，a是12，b是5；只需要把第一个参数作为this，后面的都作为参数
那么就可以用这个来继承A的属性
function A(){ this.abc=12; } A.prototype.show=function(){ alert(this.abc); } //继承A function B(){ //this是new出来的B() A.call(this); } var obj=new B(); alert(obj.abc); //12,继承了A的属性
继承方法，A的方法都写在原型上，A.prototype
B.prototype=A.prototype;
那么B上就会有A的方法了
但是，B不光有继承的方法，还会有自己的方法
那么
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; B.prototype.fn=function(){ //B自己的方法 alert("abc"); } var objB=new B(); var objA=new A(); objA.fn(); //A也有了B的方法
简单的讲
arr1和arr2，都变成了[1,2,3,4]
把arr1赋给arr2，并没有真的复制了一份，实际上计算机是把arr2指向了arr1的空间，引用了一样的空间
同理，A和B只是指向的同一个空间而已，给B添加，就是给A添加
应该把A的方法循环一下，再给B添加，让计算机分配两个空间给他们，互相不影响
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(); objB.fn(); //"abc" objA.fn(); //undefine
-----------------------分割线-------------------------------------
继承小例子（拖拽）
先写一个面向过程的拖拽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> #div1{width:200px;height:200px;background:yellow;position:absolute;} </style> </head> <body> <div id="div1"></div> </body> <script type="text/javascript"> 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> </html>
改写成面向对象的
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> #div1{width:200px;height:200px;background:yellow;position:absolute;} </style> </head> <body> <div id="div1"></div> </body> <script type="text/javascript"> window.onload=function(){ new Drag("div1"); } 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); } } 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(ev){ _this.fnUp(ev); } } 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; } </script> </html>
增加一个，用来继承
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> #div1{width:200px;height:200px;background:yellow;position:absolute;} #div2{width:200px;height:200px;background:green;position:absolute;} </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> <script type="text/javascript"> 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); } } 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(ev){ _this.fnUp(ev); } } 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; } //继承 function LimitDrag(id){ Drag.call(this,id) } for(var i in Drag.prototype){ LimitDrag.prototype[i]=Drag.prototype[i]; } window.onload=function(){ new Drag("div1"); new LimitDrag("div2"); } </script> </html>
如果需要做拖拽限制，可再写一个方法，进行覆盖，而不会改变最初的方法
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>拖拽</title> <link href="style.css" rel="stylesheet" type="text/css"> <style type="text/css"> #div1{width:200px;height:200px;background:yellow;position:absolute;} #div2{width:200px;height:200px;background:green;position:absolute;} </style> </head> <body> <div id="div1"></div> <div id="div2"></div> </body> <script type="text/javascript"> 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(ev){ _this.fnUp(ev); } } 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; } //继承 function LimitDrag(id){ Drag.call(this,id) } for(var i in Drag.prototype){ LimitDrag.prototype[i]=Drag.prototype[i]; } //改写(覆盖了原来的方法) 虽然以前有fnMove这个方法，再写一次新方法会覆盖以前的方法，而不会改变以前的方法 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"; } window.onload=function(){ new Drag("div1"); new LimitDrag("div2"); } </script> </html>