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

haoguo 發布于2019-08-21 10:26 / 986人閱讀

摘要：因為對象只出現在事件中，所以我們要把對象保存變量，然后通過參數傳遞后面的函數和函數就沒什么要注意的地方了要注意的問題關于指針的問題，面向對象里面特別重要拓展閱讀關于對象的問題，對象只出現在事件里面，所以寫方法的時候要注意一下

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

先寫出普通的寫法，然后改成面向對象寫法項

普通方法變形
·盡量不要出現函數嵌套函數
·可以有全局變量
·把onload函數中不是賦值的語句放到多帶帶函數中

改成面向對象
·全局變量就是屬性
·函數就是方法
·onload中創建對象
·改this指針問題

先把拖拽效果的布局完善好：
HTML結構：

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對象只出現在事件里面，所以寫方法的時候要注意一下！

云服務器 GPU云服務器 js拖拽效果 js 面向對象視頻 oop面向對象 js js面向對象開發表格

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/85521.html

JS面向對象1

摘要：什么是面向對象編程用對象的思想去寫代碼，就是面向對象編程過程式寫法面向對象寫法我們一直都在使用對象數組時間面向對象編程的特點抽象抓住核心問題封裝只能通過對象來訪問方法繼承從已有對象上繼承出新的對象多態多對象的不同形態對象的組成方法行為操作對什么是面向對象編程用對象的思想去寫代碼，就是面向對象編程過程式寫法面向對象寫法我們一直都在使用對象數組Array 時間Dat...

xumenger 2019-08-19 18:15 評論0 收藏0
【連載】前端個人文章整理-從基礎到入門

摘要：個人前端文章整理從最開始萌生寫文章的想法，到著手開始寫，再到現在已經一年的時間了，由于工作比較忙，更新緩慢，后面還是會繼更新，現將已經寫好的文章整理一個目錄，方便更多的小伙伴去學習。 showImg(https://segmentfault.com/img/remote/1460000017490740?w=1920&h=1080); 個人前端文章整理從最開始萌生寫文章的想法，到著手...

madthumb 2019-08-23 14:15 評論0 收藏0
task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

cnTomato 2019-08-22 10:59 評論0 收藏0
task0002（四）- 練習：數據處理、輪播及交互

摘要：獲取下一個元素節點，存在的話，取消現有選中狀態，設置下一個元素節點為選擇中，調用運動框架實現動畫，添加定時器，調用該函數，實現自動播放。移出時，開啟定時器，繼續輪播。輪播間隔時間單位為毫秒，默認為，在內部，以下部分進行修改或添加。轉載自我的個人博客歡迎大家批評指正包括5部分：小練習1-處理用戶輸入小練習2-日期對象的使用小練習3：輪播圖小練習4：輸入提示框小練習...

趙春朋 2019-08-01 15:00 評論0 收藏0