js面向對象練習-拖拽效果

首先來了解一下，面向對象練習的基本規則和問題：

先寫出普通的寫法，而後改爲面向對象寫法項

1. 普通方法變形
   ·儘可能不要出現函數嵌套函數
   ·能夠有全局變量
   ·把onload函數中不是賦值的語句放到單獨函數中
2. 改爲面向對象
   ·全局變量就是屬性
   ·函數就是方法
   ·onload中建立對象
   ·改this指針問題

---

先把拖拽效果的佈局完善好：
HTML結構：
<div id="box"></div>

csc樣式：
#box{position: absolute;width: 200px;height: 200px;background: red;}

---

第一步，首先把面向過程的拖拽回顧一下

window.onload = function (){
    // 獲取元素和初始值
    var oBox = document.getElementById('box'),
        disX = 0, disY = 0;

    // 容器鼠標按下事件
    oBox.onmousedown = function (e){
        var e = e || window.event;
        disX = e.clientX - this.offsetLeft;
        disY = e.clientY - this.offsetTop;

        document.onmousemove = function (e){
            var e = e || window.event;
            oBox.style.left = (e.clientX - disX) + 'px';
            oBox.style.top = (e.clientY - disY) + 'px';
        };

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

        return false;
    };
};

第二步，把面向過程改寫爲面向對象

window.onload = function (){
    var drag = new Drag('box');

    drag.init();
};

// 構造函數Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

Drag.prototype.init = function (){
    // this指針
    var me = this;

    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);

        // 阻止默認事件
        return false;
    };
};

Drag.prototype.mouseDown = function (e){
    // this指針
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){
        var e = e || window.event;

        me.mouseMove(e);
    };  

    document.onmouseup = function (){
        me.mouseUp();
    }
};

Drag.prototype.mouseMove = function (e){
    this.obj.style.left = (e.clientX - this.disX) + 'px';
    this.obj.style.top = (e.clientY - this.disY) + 'px';
};

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

第三步，看看代碼有哪些不同

首頁使用了構造函數來建立一個對象：

// 構造函數Drag
function Drag(id){
    this.obj = document.getElementById(id);
    this.disX = 0;
    this.disY = 0;
}

遵照前面的寫好的規則，把全局變量都變成屬性！

而後就是把函數都寫在原型上面：

Drag.prototype.init = function (){
};

Drag.prototype.mouseDown = function (){
};

Drag.prototype.mouseMove = function (){
};

Drag.prototype.mouseUp = function (){
};

先來看看init函數：

Drag.prototype.init = function (){
    // this指針
    var me = this;

    this.obj.onmousedown = function (e){
        var e = e || event;
        me.mouseDown(e);

        // 阻止默認事件
        return false;
    };
};

咱們使用me變量來保存了this指針，爲了後面的代碼不出現this指向的錯誤

接着是mouseDown函數:

Drag.prototype.mouseDown = function (e){
    // this指針
    var me = this;
    this.disX = e.clientX - this.obj.offsetLeft;
    this.disY = e.clientY - this.obj.offsetTop;

    document.onmousemove = function (e){
        var e = e || window.event;

        me.mouseMove(e);
    };  

    document.onmouseup = function (){
        me.mouseUp();
    }
};

改寫成面向對象的時候要注意一下event對象。由於event對象只出如今事件中，因此咱們要把event對象保存變量，而後經過參數傳遞！

後面的mouseMove函數和mouseUp函數就沒什麼要注意的地方了！

要注意的問題

關於this指針的問題，面向對象裏面this特別重要！
this拓展閱讀:
http://div.io/topic/809

關於event對象的問題，event對象只出如今事件裏面，因此寫方法的時候要注意一下！