JavaScript面向对象编程高级1

最新推荐文章于 2024-02-28 23:59:43 发布

Q_Jimmy

最新推荐文章于 2024-02-28 23:59:43 发布

阅读量379

点赞数 1

分类专栏： HTML5

本文链接：https://blog.csdn.net/Q_Jimmy/article/details/50818213

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

以下案例是通过JavaScript的面向对象编程实现拖拽：

首先：应用面向过程实现，便于修改和对比

一、面向过程实现过程

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
      
        #div1{
            width: 200px;height: 200px;background: yellow;position: absolute;
        }
    </style>
</head>
<body>
<script>
    //面向过程的拖拽
    window.onload=function(){
        var oDiv=document.getElementById('div1');
        oDiv.οnmοusedοwn=function(ev)
        {
            var onEvent=ev||event;
            var disX=onEvent.clientX-oDiv.offsetLeft;
            var disY=onEvent.clientY-oDiv.offsetTop;
         /*   alert(disX);//167
            alert(disY);//117*/
            document.onmousemove=function(ev)
            {
                var oEvent=ev||event;
                oDiv.style.left=oEvent.clientX-disX+'px';
                oDiv.style.top=oEvent.clientY-disY+'px';
            };
            document.onmoseup=function()
            {
                document.onmousemove=null;
                document.onmouseup=null;
            };
        };
    };
</script>
<div id="div1"></div>
</body>
</html>

二、面向过程转化

    //面向过对象的拖拽
     第一步：去掉函数嵌套
     第二步：提取一部分局部局部变量为全局变量

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

三、应用面向对象实现

 //面向过对象的拖拽
     第一步：将onload变为构造函数
    第二步：将全局的div做一个属性

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #div1{width: 200px;height: 200px;background: yellow;position: absolute;}
    </style>
</head>
<body>
<script>
    //初始化对象
    window.onload=function()
    {
        new Drag('div1');
    };
//    var oDiv=null;
/*var disX=0;//作为属性
var disY=0;//作为属性*/
   
  function Drag(id){
      var _this=this;
      this.disX=0;//作为属性
      this.disY=0;//作为属性
        this.oDiv=document.getElementById(id);
//        this.oDiv.οnmοusedοwn=this.fnDown;
      this.oDiv.οnmοusedοwn=function(ev)
      {
          _this.fnDown(ev);
      }
    };
Drag.prototype.fnDown=function(ev)//将以下函数用原型修改变成一个方法
   // function fnDown(ev)
    {
        var _this=this;
        var onEvent=ev||event;
        this.disX=onEvent.clientX-this.oDiv.offsetLeft;
        this.disY=onEvent.clientY-this.oDiv.offsetTop;
//        document.οnmοusemοve=this.fnMove;
    document.onmousemove=function(ev)
    {
          _this.fnMove(ev);
    }
       // document.onmoseup=this.fnMoveup;
       document.onmouseup=function(ev)
       {
           _this.fnMoveup(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.fnMoveup=function ()
    {
        document.onmousemove=null;
        document.onmouseup=null;
    };
</script>
<div id="div1"></div>
</body>
</html>