亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

js面向?qū)ο缶毩?xí)-拖拽效果

haoguo / 1022人閱讀

摘要：因?yàn)閷?duì)象只出現(xiàn)在事件中，所以我們要把對(duì)象保存變量，然后通過(guò)參數(shù)傳遞后面的函數(shù)和函數(shù)就沒(méi)什么要注意的地方了要注意的問(wèn)題關(guān)于指針的問(wèn)題，面向?qū)ο罄锩嫣貏e重要拓展閱讀關(guān)于對(duì)象的問(wèn)題，對(duì)象只出現(xiàn)在事件里面，所以寫(xiě)方法的時(shí)候要注意一下

首先來(lái)了解一下，面向?qū)ο缶毩?xí)的基本規(guī)則和問(wèn)題：

  
先寫(xiě)出普通的寫(xiě)法，然后改成面向?qū)ο髮?xiě)法項(xiàng)

普通方法變形
·盡量不要出現(xiàn)函數(shù)嵌套函數(shù)
·可以有全局變量
·把onload函數(shù)中不是賦值的語(yǔ)句放到多帶帶函數(shù)中

改成面向?qū)ο?br> ·全局變量就是屬性
·函數(shù)就是方法
·onload中創(chuàng)建對(duì)象
·改this指針問(wèn)題

先把拖拽效果的布局完善好：
HTML結(jié)構(gòu)：

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

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

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

    // 容器鼠標(biāo)按下事件
    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;
    };
};

第二步，把面向過(guò)程改寫(xiě)為面向?qū)ο?/strong>

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

    drag.init();
};

// 構(gòu)造函數(shù)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);

        // 阻止默認(rèn)事件
        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;
};

第三步，看看代碼有哪些不一樣

首頁(yè)使用了構(gòu)造函數(shù)來(lái)創(chuàng)建一個(gè)對(duì)象：

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

遵守前面的寫(xiě)好的規(guī)則，把全局變量都變成屬性！

然后就是把函數(shù)都寫(xiě)在原型上面：

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

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

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

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

先來(lái)看看init函數(shù)：

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

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

        // 阻止默認(rèn)事件
        return false;
    };
};

我們使用me變量來(lái)保存了this指針，為了后面的代碼不出現(xiàn)this指向的錯(cuò)誤

接著是mouseDown函數(shù):

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();
    }
};

改寫(xiě)成面向?qū)ο蟮臅r(shí)候要注意一下event對(duì)象。因?yàn)?b>event對(duì)象只出現(xiàn)在事件中，所以我們要把event對(duì)象保存變量，然后通過(guò)參數(shù)傳遞！

后面的mouseMove函數(shù)和mouseUp函數(shù)就沒(méi)什么要注意的地方了！

要注意的問(wèn)題

關(guān)于this指針的問(wèn)題，面向?qū)ο罄锩?b>this特別重要！
this拓展閱讀:
http://div.io/topic/809

關(guān)于event對(duì)象的問(wèn)題，event對(duì)象只出現(xiàn)在事件里面，所以寫(xiě)方法的時(shí)候要注意一下！

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85521.html

相關(guān)文章

  • JS面向對(duì)象1

    摘要：什么是面向?qū)ο缶幊逃脤?duì)象的思想去寫(xiě)代碼，就是面向?qū)ο缶幊踢^(guò)程式寫(xiě)法面向?qū)ο髮?xiě)法我們一直都在使用對(duì)象數(shù)組時(shí)間面向?qū)ο缶幊痰奶攸c(diǎn)抽象抓住核心問(wèn)題封裝只能通過(guò)對(duì)象來(lái)訪問(wèn)方法繼承從已有對(duì)象上繼承出新的對(duì)象多態(tài)多對(duì)象的不同形態(tài)對(duì)象的組成方法行為操作對(duì) 什么是面向?qū)ο缶幊? 用對(duì)象的思想去寫(xiě)代碼，就是面向?qū)ο缶幊? 過(guò)程式寫(xiě)法 面向?qū)ο髮?xiě)法 我們一直都在使用對(duì)象 數(shù)組Array 時(shí)間Dat...

    xumenger 評(píng)論0 收藏0

  • 【連載】前端個(gè)人文章整理-從基礎(chǔ)到入門(mén)

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

    madthumb 評(píng)論0 收藏0

  • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

    摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫(huà)，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開(kāi)啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。 轉(zhuǎn)載自我的個(gè)人博客 歡迎大家批評(píng)指正 包括5部分： 小練習(xí)1-處理用戶(hù)輸入 小練習(xí)2-日期對(duì)象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

    cnTomato 評(píng)論0 收藏0

  • task0002（四）- 練習(xí)：數(shù)據(jù)處理、輪播及交互

    摘要：獲取下一個(gè)元素節(jié)點(diǎn)，存在的話，取消現(xiàn)有選中狀態(tài)，設(shè)置下一個(gè)元素節(jié)點(diǎn)為選擇中，調(diào)用運(yùn)動(dòng)框架實(shí)現(xiàn)動(dòng)畫(huà)，添加定時(shí)器，調(diào)用該函數(shù)，實(shí)現(xiàn)自動(dòng)播放。移出時(shí)，開(kāi)啟定時(shí)器，繼續(xù)輪播。輪播間隔時(shí)間單位為毫秒，默認(rèn)為，在內(nèi)部，以下部分進(jìn)行修改或添加。 轉(zhuǎn)載自我的個(gè)人博客 歡迎大家批評(píng)指正 包括5部分： 小練習(xí)1-處理用戶(hù)輸入 小練習(xí)2-日期對(duì)象的使用 小練習(xí)3：輪播圖 小練習(xí)4：輸入提示框 小練習(xí)...

    趙春朋 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

haoguo

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<