摘要：上篇文章分享了如何用面向?qū)ο笏枷刖帉?xiě)選項(xiàng)卡，在文章最后留了一個(gè)拖拽的例子，希望大家可以試著寫(xiě)一下，現(xiàn)在我就談?wù)勎以谶@過(guò)程中遇到的一些問(wèn)題和解決方法。通過(guò)以上方法來(lái)訓(xùn)練面向?qū)ο蟮木幊趟枷耄嗑毩?xí)，以后寫(xiě)出面向?qū)ο笏枷氲拇a就很簡(jiǎn)單了。

上篇文章分享了如何用面向?qū)ο笏枷刖帉?xiě)選項(xiàng)卡，在文章最后留了一個(gè)拖拽的例子，希望大家可以試著寫(xiě)一下，現(xiàn)在我就談?wù)勎以谶@過(guò)程中遇到的一些問(wèn)題和解決方法。（本文主要是想和js初學(xué)者分享經(jīng)驗(yàn)，代碼中的更改this指向，事件綁定均采用的比較初級(jí)的方法，也希望能有大神能指導(dǎo)，分享一下經(jīng)驗(yàn)）。

現(xiàn)在我們來(lái)看看面向過(guò)程式的編程的代碼，HTML只有一個(gè)div元素，設(shè)置寬高和背景顏色。

#div1{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }

    


window.onload=function(){
            var oDiv=document.getElementById("div1");
            
            var disX=0;
            var disY=0;

            oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                disX=ev.clientX-oDiv.offsetLeft;
                disY=ev.clientY-oDiv.offsetTop;

                document.onmousemove=function(ev){
                    var ev=ev || window.event;
                    oDiv.style.left=ev.clientX-disX+"px";
                    oDiv.style.top=ev.clientY-disY+"px";
                };
                document.onmouseup=function(){
                    document.onmousemove=null;
                    document.onmouseup=null;
                }
                return false;
            }
        }

還是用上一篇文章提到的方法，先將變量和方法提取出來(lái)，不要出現(xiàn)函數(shù)的嵌套，出現(xiàn)嵌套的將其中的函數(shù)提取出來(lái)。變量為oDiv,disX和disY,我將代碼中的三個(gè)事件綁定的函數(shù)命名為fnDown,fnMove,fnUp,因此將上面的代碼改為如下格式：

var oDiv,disX,disY;
        window.onload=function(){
            oDiv=document.getElementById("div1");
            
            disX=0;
            disY=0;
            oDiv.onmousedown=fnDown();
        }
        
        
        function fnDown(ev){
            var ev=ev || window.event;
            disX=ev.clientX-oDiv.offsetLeft;
            disY=ev.clientY-oDiv.offsetTop;
            document.onmousemove=fnMove();
            document.onmouseup=fnUp();
            return false;
        }
        function fnMove=function(ev){
                var ev=ev || window.event;
                oDiv.style.left=ev.clientX-disX+"px";
                oDiv.style.top=ev.clientY-disY+"px";
            };
        function fnUp=function(){
                document.onmousemove=null;
                document.onmouseup=null;
            }

然后用面向?qū)ο蟮乃枷雽傩院头椒ㄌ砑拥綄?duì)象中，并在屬性和方法前面加上this，因此改變的代碼如下：

window.onload=function(){
        var d1=new Drag("div1");
        d1.init();
    };
    function Drag(id){
        this.oDiv=document.getElementById(id);
        this.disX=0;
        this.disY=0;
    };
    Drag.prototype.init=function(){
        this.oDiv.onmousedown=this.fnDowm();
    };
    Drag.prototype.fnDowm=function(ev){
        var ev=ev || window.event;
        this.disX=ev.clientX-this.oDiv.offsetLeft;
        this.disY=ev.clientY-this.oDiv.offsetTop;
        document.onmousemove=this.fnMove();
        document.onmouseup=this.fnUp();
        return false;
    };

    Drag.prototype.fnMove=function(ev){
        var ev || window.event;
        this.oDiv.style.left=ev.clientX-this.disX+"px";
        this.oDiv.style.top=ev.clientY-this.disY+"px";
    };

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

和前面一樣，找出其中this的指向錯(cuò)誤并改正。但是除了this指向問(wèn)題，上面還有一個(gè)關(guān)于事件的問(wèn)題。document.onmousemove=this.fnMove();，向這樣在事件上添加方法的方式是不正確的，正確的調(diào)用方式是這樣：document.onmousemove=function(ev){};,因此將方法改為以下形式。

Drag.prototype.init=function(){
            
            this.oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                this.fnDown(ev);
                return false;
            };
        };

        Drag.prototype.fnDown = function(ev){
            
            this.disX = ev.clientX - this.oDiv.offsetLeft;
            this.disY = ev.clientY - this.oDiv.offsetTop;
                
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                this.fnMove(ev);
            };
            document.onmouseup=function(){
                this.fnUp();
            }
        };


        Drag.prototype.fnMove=function(ev){
            
            this.oDiv.style.left=ev.clientX-this.disX+"px";
            this.oDiv.style.top=ev.clientY-this.disY+"px";
        };
        
        Drag.prototype.fnUp=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };

最后要找到錯(cuò)誤的this指向，并改正。關(guān)于this指向，我認(rèn)為最簡(jiǎn)單的方法就是看函數(shù)是怎么調(diào)用的，函數(shù)名 "." 左邊的就是this的指向。下面我們來(lái)舉個(gè)例子：

Drag.prototype.init=function(){
            
            this.oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                this.fnDown(ev);
                return false;
            };
        };

原型上面的init()方法的調(diào)用方式是d1.init()，因此函數(shù)內(nèi)的this指向就是d1，那么this.oDiv指向就是正確的，但是onmouseover()的調(diào)用方式是this.oDiv.onmousedown，其內(nèi)部this指向就是this.oDiv，而在該函數(shù)內(nèi)部，this.fnDown(ev)語(yǔ)句this指向是oDiv，而oDiv是沒(méi)有方法和屬性的，因此這里的this指向就是錯(cuò)誤的，需要修正。
下面的幾個(gè)方法中this也這來(lái)來(lái)分析，并將其改為正確的指向。修改this的指向還是和上一篇修改的方法一樣。因此改完后代碼為：

window.onload=function(){

            var d1=new Drag("div1");
            d1.init();

        };

        function Drag(id){
            this.oDiv=document.getElementById(id);
            this.disX=0;
            this.disY=0;
        }
        Drag.prototype.init=function(){
            var This=this;
            this.oDiv.onmousedown=function(ev){
                var ev=ev || window.event;
                This.fnDown(ev);
                return false;
            };
        };

        Drag.prototype.fnDown = function(ev){
            var This = this;
            this.disX = ev.clientX - this.oDiv.offsetLeft;
            this.disY = ev.clientY - this.oDiv.offsetTop;
                
            document.onmousemove = function(ev){
                var ev = ev || window.event;
                This.fnMove(ev);
            };
            document.onmouseup=function(){
                This.fnUp();
            }
        };


        Drag.prototype.fnMove=function(ev){
            
            this.oDiv.style.left=ev.clientX-this.disX+"px";
            this.oDiv.style.top=ev.clientY-this.disY+"px";
        };
        
        Drag.prototype.fnUp=function(){
            document.onmousemove=null;
            document.onmouseup=null;
        };

這樣就可以正常運(yùn)行了。

作為一名小白，就應(yīng)該多動(dòng)腦，多動(dòng)手。在這過(guò)程中你會(huì)學(xué)到很多。通過(guò)以上方法來(lái)訓(xùn)練面向?qū)ο蟮木幊趟枷?，多練?xí)，以后寫(xiě)出面向?qū)ο笏枷氲拇a就很簡(jiǎn)單了。

因?yàn)橐陨洗a也是我通過(guò)看視頻學(xué)的，所以還有點(diǎn)疑問(wèn)，希望有人能解答一下。上面只有onmousedown時(shí)間是綁定在oDiv上，后面的時(shí)間都是綁定在document上，我試著將后面的事件也綁定在oDiv中，程序也能運(yùn)行，但是快速拖動(dòng)就會(huì)產(chǎn)生停頓的問(wèn)題，而在document上就沒(méi)有類(lèi)似的情況，這是為什么？