• 命名空间和继承

    命名空间：其实就是利用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+'
a是：'+a+'
b是：'+b);
}
show(12,2);      //很好理解，this是window，a是12，b是5

如果用call()
function show(a,b){
alert('this是：'+this+'
a是：'+a+'
b是：'+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{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{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{200px;height:200px;background:yellow;position:absolute;}
  #div2{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{200px;height:200px;background:yellow;position:absolute;}
  #div2{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>
  • 相关阅读:
    centos部署bladex boot 之docker安装
    git ssh key创建和github使用
    Debian root登录设置
    Linux软件源
    Secure backup
    Python简易web服务
    好久没有更新博客了
    Python实现无向图最短路径
    DWZ使用中遇到的坑
    tronado学习
  • 原文地址：https://www.cnblogs.com/change-oneself/p/4950833.html
Copyright © 2020-2023  润新知