JavaScript面向对象编程高级1

来源：互联网发布：pandora 16.02 软件源编辑：程序博客网时间：2024/05/16 07:12

以下案例是通过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.onmousedown=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.onmousedown=this.fnDown;      this.oDiv.onmousedown=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.onmousemove=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>

1 0