面向过程到面向对象-优快云博客

本文详细介绍了拖拽事件的实现过程，包括了原始的DOM事件监听写法，改进后的独立函数处理方式，以及最终的面向对象实现。每种方法都针对不同的编程思维进行了优化，从函数嵌套到全局变量管理，再到面向对象的设计模式，为读者提供了全面的视角。

拖拽事件改造过程：
1、正常写法

 window.onload = function(){
                var oDiv = document.getElementById("div1");
                oDiv.onmousedown = function(ev){
                    var e = ev || window.event;
                    var offsetX = e.clientX - oDiv.offsetLeft;
                    var offsetY = e.clientY - oDiv.offsetTop;

                    document.onmousemove = function(ev) {
                        var e = ev || window.event;
                        oDiv.style.left = e.clientX - offsetX + "px";
                        oDiv.style.top = e.clientY - offsetY + "px";
                    }
                }

                document.onmouseup = function(){
                    document.onmousemove = null;
                }
            }

2、改造：1）不能有函数嵌套 2）可以有全局变量

           var oDiv = null;
            var offsetX = 0;
            var offsetY = 0;
            window.onload = function(){
                oDiv = document.getElementById("div1");
                oDiv.onmousedown = funcDown;

                document.onmouseup = funcUp;

                
            }

            function funcDown(ev){
                var e = ev || window.event;
                offsetX = e.clientX - oDiv.offsetLeft;
                offsetY = e.clientY - oDiv.offsetTop;

                document.onmousemove = funcMove;
            }

            function funcMove(ev) {
                var e = ev || window.event;
                oDiv.style.left = e.clientX - offsetX + "px";
                oDiv.style.top = e.clientY - offsetY + "px";
            }

            function funcUp(){
                    document.onmousemove = null;
                }

3、面向对象过程：
面向过程 => 面向对象
1）、window.onload => 构造函数
2）、全局变量 => 构造函数的属性
3）、全局函数 => 构造函数的方法

function Drag(id){
                this.oDiv = document.getElementById(id);
                var _this = this;
                this.oDiv.onmousedown = function(ev){
                    _this.funcDown(ev);
                };
                

                document.onmouseup = function(){
                    _this.funcUp();
                };

                
            }

            Drag.prototype.funcDown = function(ev){
                var e = ev || window.event;
                this.offsetX = e.clientX - this.oDiv.offsetLeft;
                this.offsetY = e.clientY - this.oDiv.offsetTop;
                var _this = this;

                document.onmousemove = function(ev){
                    _this.funcMove(ev);
                };
            }

            Drag.prototype.funcMove = function(ev) {
                var e = ev || window.event;
                this.oDiv.style.left = e.clientX - this.offsetX + "px";
                this.oDiv.style.top = e.clientY - this.offsetY + "px";
            }

            Drag.prototype.funcUp = function(){
                    document.onmousemove = null;
                }

                window.onload = function(){
                    new Drag("div1");

                }