命名空间和继承

最新推荐文章于 2024-02-05 15:20:33 发布

weixin_30555753

最新推荐文章于 2024-02-05 15:20:33 发布

阅读量107

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/change-oneself/p/4950833.html

版权

命名空间：其实就是利用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.οnmοusedοwn=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.οnmοusedοwn=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.οnmοusedοwn=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>

转载于:https://www.cnblogs.com/change-oneself/p/4950833.html

weixin_30555753

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
命名空间和继承

命名空间：其实就是利用json的方式来建立一个独自的空间而已//命名空间第一个小例子var space={};space.slist={};space.fn={};space.site={};space.slist.getUser=function(){ alert('a');}space.fn.getUser=function(){ alert(...
复制链接

扫一扫