亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

詳解JavaScript面向?qū)ο髮崙?zhàn)之封裝拖拽對象

 更新時間：2021年06月10日 09:59:36   作者：lsgxeva  
本文主要介紹了JavaScript如何用面向?qū)ο蟮姆绞椒庋b拖拽對象，通過3種方式來實現(xiàn)，幫助讀者更好的理解其原理

概述

為了能夠幫助大家了解更多的方式與進(jìn)行對比，我會使用三種不同的方式來實現(xiàn)拖拽。

  • 不封裝對象直接實現(xiàn)；
  • 利用原生JavaScript封裝拖拽對象；
  • 通過擴(kuò)展jQuery來實現(xiàn)拖拽對象。

拖拽的實現(xiàn)過程會涉及到非常多的實用小知識，因此為了鞏固我自己的知識積累，也為了大家能夠?qū)W到更多的知識，我會盡量詳細(xì)的將一些細(xì)節(jié)分享出來，相信大家認(rèn)真閱讀之后，一定能學(xué)到一些東西。

1、如何讓一個DOM元素動起來

我們常常會通過修改元素的top，left，translate來其的位置發(fā)生改變。在下面的例子中，每點擊一次按鈕，對應(yīng)的元素就會移動5px。大家可點擊查看。

點擊查看一個讓元素動起來的小例子

由于修改一個元素top/left值會引起頁面重繪，而translate不會，因此從性能優(yōu)化上來判斷，我們會優(yōu)先使用translate屬性。

2、如何獲取當(dāng)前瀏覽器支持的transform兼容寫法

transform是css3的屬性，當(dāng)我們使用它時就不得不面對兼容性的問題。不同版本瀏覽器的兼容寫法大致有如下幾種：

['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform']

因此我們需要判斷當(dāng)前瀏覽器環(huán)境支持的transform屬性是哪一種，方法如下：

// 獲取當(dāng)前瀏覽器支持的transform兼容寫法
function getTransform() {
    var transform = '',
    divStyle = document.createElement('div').style,
    // 可能涉及到的幾種兼容性寫法，通過循環(huán)找出瀏覽器識別的那一個
    transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

    i = 0,
    len = transformArr.length;

    for(; i < len; i++)  {
        if(transformArr[i] in divStyle) {
            // 找到之后立即返回，結(jié)束函數(shù)
            return transform = transformArr[i];
        }
    }

    // 如果沒有找到，就直接返回空字符串
    return transform;
}

該方法用于獲取瀏覽器支持的transform屬性。如果返回的為空字符串，則表示當(dāng)前瀏覽器并不支持transform，這個時候我們就需要使用left，top值來改變元素的位置。如果支持，就改變transform的值。

3、如何獲取元素的初始位置

我們首先需要獲取到目標(biāo)元素的初始位置，因此這里我們需要一個專門用來獲取元素樣式的功能函數(shù)。

但是獲取元素樣式在IE瀏覽器與其他瀏覽器有一些不同，因此我們需要一個兼容性的寫法。

function getStyle(elem, property) {
    // ie通過currentStyle來獲取元素的樣式，其他瀏覽器通過getComputedStyle來獲取
    return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[property] : elem.currentStyle[property];
}

有了這個方法之后，就可以開始動手寫獲取目標(biāo)元素初始位置的方法了。

function getTargetPos(elem) {
    var pos = {x: 0, y: 0};
    var transform = getTransform();
    if(transform) {
        var transformValue = getStyle(elem, transform);
        if(transformValue == 'none') {
            elem.style[transform] = 'translate(0, 0)';
            return pos;
        } else {
            var temp = transformValue.match(/-?\d+/g);
            return pos = {
                x: parseInt(temp[4].trim()),
                y: parseInt(temp[5].trim())
            }
        }
    } else {
        if(getStyle(elem, 'position') == 'static') {
            elem.style.position = 'relative';
            return pos;
        } else {
            var x = parseInt(getStyle(elem, 'left') ? getStyle(elem, 'left') : 0);
            var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);
            return pos = {
                x: x,
                y: y
            }
        }
    }
}

在拖拽過程中，我們需要不停的設(shè)置目標(biāo)元素的新位置，這樣它才會移動起來，因此我們需要一個設(shè)置目標(biāo)元素位置的方法。

// pos = { x: 200, y: 100 }
function setTargetPos(elem, pos) {
    var transform = getTransform();
    if(transform) {
        elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
    } else {
        elem.style.left = pos.x + 'px';
        elem.style.top = pos.y + 'px';
    }
    return elem;
}

5、我們需要用到哪些事件？

在pc上的瀏覽器中，結(jié)合mousedown、mousemove、mouseup這三個事件可以幫助我們實現(xiàn)拖拽。

  • mousedown鼠標(biāo)按下時觸發(fā)
  • mousemove鼠標(biāo)按下后拖動時觸發(fā)
  • mouseup鼠標(biāo)松開時觸發(fā)

而在移動端，分別與之對應(yīng)的則是touchstart、touchmove、touchend。

當(dāng)我們將元素綁定這些事件時，有一個事件對象將會作為參數(shù)傳遞給回調(diào)函數(shù)，通過事件對象，我們可以獲取到當(dāng)前鼠標(biāo)的精確位置，鼠標(biāo)位置信息是實現(xiàn)拖拽的關(guān)鍵。

事件對象十分重要，其中包含了非常多的有用的信息，這里我就不擴(kuò)展了，大家可以在函數(shù)中將事件對象打印出來查看其中的具體屬性，這個方法對于記不清事件對象重要屬性的童鞋非常有用。

6、拖拽的原理

當(dāng)事件觸發(fā)時，我們可以通過事件對象獲取到鼠標(biāo)的精切位置。這是實現(xiàn)拖拽的關(guān)鍵。當(dāng)鼠標(biāo)按下(mousedown觸發(fā))時，我們需要記住鼠標(biāo)的初始位置與目標(biāo)元素的初始位置，我們的目標(biāo)就是實現(xiàn)當(dāng)鼠標(biāo)移動時，目標(biāo)元素也跟著移動，根據(jù)常理我們可以得出如下關(guān)系：

移動后的鼠標(biāo)位置 - 鼠標(biāo)初始位置 = 移動后的目標(biāo)元素位置 - 目標(biāo)元素的初始位置

如果鼠標(biāo)位置的差值我們用dis來表示，那么目標(biāo)元素的位置就等于：

移動后目標(biāo)元素的位置 = dis + 目標(biāo)元素的初始位置

通過事件對象，我們可以精確的知道鼠標(biāo)的當(dāng)前位置，因此當(dāng)鼠標(biāo)拖動(mousemove)時，我們可以不停的計算出鼠標(biāo)移動的差值，以此來求出目標(biāo)元素的當(dāng)前位置。這個過程，就實現(xiàn)了拖拽。

而在鼠標(biāo)松開(mouseup)結(jié)束拖拽時，我們需要處理一些收尾工作。詳情見代碼。

7、 我又來推薦思維導(dǎo)圖輔助寫代碼了

常常有新人朋友跑來問我，如果邏輯思維能力不強(qiáng)，能不能寫代碼做前端。我的答案是：能。因為借助思維導(dǎo)圖，可以很輕松的彌補(bǔ)邏輯的短板。而且比在自己頭腦中腦補(bǔ)邏輯更加清晰明了，不易出錯。

上面第六點我介紹了原理，因此如何做就顯得不是那么難了，而具體的步驟，則在下面的思維導(dǎo)圖中明確給出，我們只需要按照這個步驟來寫代碼即可，試試看，一定很輕松。

使用思維導(dǎo)圖清晰的表達(dá)出整個拖拽過程我們需要干的事情

8、代碼實現(xiàn)

part1、準(zhǔn)備工作

// 獲取目標(biāo)元素對象
var oElem = document.getElementById('target');

// 聲明2個變量用來保存鼠標(biāo)初始位置的x，y坐標(biāo)
var startX = 0;
var startY = 0;

// 聲明2個變量用來保存目標(biāo)元素初始位置的x，y坐標(biāo)
var sourceX = 0;
var sourceY = 0;

part2、功能函數(shù)

因為之前已經(jīng)貼過代碼，就不再重復(fù)

// 獲取當(dāng)前瀏覽器支持的transform兼容寫法
function getTransform() {}

// 獲取元素屬性
function getStyle(elem, property) {}

// 獲取元素的初始位置
function getTargetPos(elem) {}

// 設(shè)置元素的初始位置
function setTargetPos(elem, potions) {}

part3、聲明三個事件的回調(diào)函數(shù)

這三個方法就是實現(xiàn)拖拽的核心所在，我將嚴(yán)格按照上面思維導(dǎo)圖中的步驟來完成我們的代碼。

// 綁定在mousedown上的回調(diào)，event為傳入的事件對象
function start(event) {
    // 獲取鼠標(biāo)初始位置
    startX = event.pageX;
    startY = event.pageY;

    // 獲取元素初始位置
    var pos = getTargetPos(oElem);

    sourceX = pos.x;
    sourceY = pos.y;

    // 綁定
    document.addEventListener('mousemove', move, false);
    document.addEventListener('mouseup', end, false);
}

function move(event) {
    // 獲取鼠標(biāo)當(dāng)前位置
    var currentX = event.pageX;
    var currentY = event.pageY;

    // 計算差值
    var distanceX = currentX - startX;
    var distanceY = currentY - startY;

    // 計算并設(shè)置元素當(dāng)前位置
    setTargetPos(oElem, {
        x: (sourceX + distanceX).toFixed(),
        y: (sourceY + distanceY).toFixed()
    })
}

function end(event) {
    document.removeEventListener('mousemove', move);
    document.removeEventListener('mouseup', end);
    // do other things
}

OK，一個簡單的拖拽，就這樣愉快的實現(xiàn)了。點擊下面的鏈接，可以在線查看該例子的demo。

使用原生js實現(xiàn)拖拽

9、封裝拖拽對象

我們來將上面實現(xiàn)的拖拽封裝為一個拖拽對象。我們的目標(biāo)是，只要我們聲明一個拖拽實例，那么傳入的目標(biāo)元素將自動具備可以被拖拽的功能。

在實際開發(fā)中，一個對象我們常常會單獨放在一個js文件中，這個js文件將單獨作為一個模塊，利用各種模塊的方式組織起來使用。當(dāng)然這里沒有復(fù)雜的模塊交互，因為這個例子，我們只需要一個模塊即可。

為了避免變量污染，我們需要將模塊放置于一個函數(shù)自執(zhí)行方式模擬的塊級作用域中。

(function() {
    ...
})();

在普通的模塊組織中，我們只是單純的將許多js文件壓縮成為一個js文件，因此此處的第一個分號則是為了防止上一個模塊的結(jié)尾不用分號導(dǎo)致報錯。必不可少。當(dāng)然在通過require或者ES6模塊等方式就不會出現(xiàn)這樣的情況。

我們知道，在封裝一個對象的時候，我們可以將屬性與方法放置于構(gòu)造函數(shù)或者原型中，而在增加了自執(zhí)行函數(shù)之后，我們又可以將屬性和方法防止與模塊的內(nèi)部作用域。這是閉包的知識。

那么我們面臨的挑戰(zhàn)就在于，如何合理的處理屬性與方法的位置。

當(dāng)然，每一個對象的情況都不一樣，不能一概而論，我們需要清晰的知道這三種位置的特性才能做出最適合的決定。

  • 構(gòu)造函數(shù)中： 屬性與方法為當(dāng)前實例單獨擁有，只能被當(dāng)前實例訪問，并且每聲明一個實例，其中的方法都會被重新創(chuàng)建一次。
  • 原型中： 屬性與方法為所有實例共同擁有，可以被所有實例訪問，新聲明實例不會重復(fù)創(chuàng)建方法。
  • 模塊作用域中：屬性和方法不能被任何實例訪問，但是能被內(nèi)部方法訪問，新聲明的實例，不會重復(fù)創(chuàng)建相同的方法。

對于方法的判斷比較簡單。

因為在構(gòu)造函數(shù)中的方法總會在聲明一個新的實例時被重復(fù)創(chuàng)建，因此我們聲明的方法都盡量避免出現(xiàn)在構(gòu)造函數(shù)中。

而如果你的方法中需要用到構(gòu)造函數(shù)中的變量，或者想要公開，那就需要放在原型中。

如果方法需要私有不被外界訪問，那么就放置在模塊作用域中。

對于屬性放置于什么位置有的時候很難做出正確的判斷，因此我很難給出一個準(zhǔn)確的定義告訴你什么屬性一定要放在什么位置，這需要在實際開發(fā)中不斷的總結(jié)經(jīng)驗。但是總的來說，仍然要結(jié)合這三個位置的特性來做出最合適的判斷。

如果屬性值只能被實例單獨擁有，比如person對象的name，只能屬于某一個person實例，又比如這里拖拽對象中，某一個元素的初始位置，也僅僅只是這個元素的當(dāng)前位置，這個屬性，則適合放在構(gòu)造函數(shù)中。

而如果一個屬性僅僅供內(nèi)部方法訪問，這個屬性就適合放在模塊作用域中。

關(guān)于面向?qū)ο?，上面的幾點思考我認(rèn)為是這篇文章最值得認(rèn)真思考的精華。如果在封裝時沒有思考清楚，很可能會遇到很多你意想不到的bug，所以建議大家結(jié)合自己的開發(fā)經(jīng)驗，多多思考，總結(jié)出自己的觀點。

根據(jù)這些思考，大家可以自己嘗試封裝一下。然后與我的做一些對比，看看我們的想法有什么不同，在下面例子的注釋中，我將自己的想法表達(dá)出來。

點擊查看已經(jīng)封裝好的demo

js 源碼

(function() {
    // 這是一個私有屬性，不需要被實例訪問
    var transform = getTransform();

    function Drag(selector) {
        // 放在構(gòu)造函數(shù)中的屬性，都是屬于每一個實例單獨擁有
        this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
        this.startX = 0;
        this.startY = 0;
        this.sourceX = 0;
        this.sourceY = 0;

        this.init();
    }


    // 原型
    Drag.prototype = {
        constructor: Drag,

        init: function() {
            // 初始時需要做些什么事情
            this.setDrag();
        },

        // 稍作改造，僅用于獲取當(dāng)前元素的屬性，類似于getName
        getStyle: function(property) {
            return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(this.elem, false)[property] : this.elem.currentStyle[property];
        },

        // 用來獲取當(dāng)前元素的位置信息，注意與之前的不同之處
        getPosition: function() {
            var pos = {x: 0, y: 0};
            if(transform) {
                var transformValue = this.getStyle(transform);
                if(transformValue == 'none') {
                    this.elem.style[transform] = 'translate(0, 0)';
                } else {
                    var temp = transformValue.match(/-?\d+/g);
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    }
                }
            } else {
                if(this.getStyle('position') == 'static') {
                    this.elem.style.position = 'relative';
                } else {
                    pos = {
                        x: parseInt(this.getStyle('left') ? this.getStyle('left') : 0),
                        y: parseInt(this.getStyle('top') ? this.getStyle('top') : 0)
                    }
                }
            }

            return pos;
        },

        // 用來設(shè)置當(dāng)前元素的位置
        setPostion: function(pos) {
            if(transform) {
                this.elem.style[transform] = 'translate('+ pos.x +'px, '+ pos.y +'px)';
            } else {
                this.elem.style.left = pos.x + 'px';
                this.elem.style.top = pos.y + 'px';
            }
        },

        // 該方法用來綁定事件
        setDrag: function() {
            var self = this;
            this.elem.addEventListener('mousedown', start, false);
            function start(event) {
                self.startX = event.pageX;
                self.startY = event.pageY;

                var pos = self.getPosition();

                self.sourceX = pos.x;
                self.sourceY = pos.y;

                document.addEventListener('mousemove', move, false);
                document.addEventListener('mouseup', end, false);
            }

            function move(event) {
                var currentX = event.pageX;
                var currentY = event.pageY;

                var distanceX = currentX - self.startX;
                var distanceY = currentY - self.startY;

                self.setPostion({
                    x: (self.sourceX + distanceX).toFixed(),
                    y: (self.sourceY + distanceY).toFixed()
                })
            }

            function end(event) {
                document.removeEventListener('mousemove', move);
                document.removeEventListener('mouseup', end);
                // do other things
            }
        }
    }

    // 私有方法，僅僅用來獲取transform的兼容寫法
    function getTransform() {
        var transform = '',
            divStyle = document.createElement('div').style,
            transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

            i = 0,
            len = transformArr.length;

        for(; i < len; i++)  {
            if(transformArr[i] in divStyle) {
                return transform = transformArr[i];
            }
        }

        return transform;
    }

    // 一種對外暴露的方式
    window.Drag = Drag;
})();

// 使用：聲明2個拖拽實例
new Drag('target');
new Drag('target2');

這樣一個拖拽對象就封裝完畢了。

建議大家根據(jù)我提供的思維方式，多多嘗試封裝一些組件。比如封裝一個彈窗，封裝一個循環(huán)輪播等。練得多了，面向?qū)ο缶筒辉偈菃栴}了。這種思維方式，在未來任何時候都是能夠用到的。

以上就是詳解JavaScript面向?qū)ο髮崙?zhàn)之封裝拖拽對象的詳細(xì)內(nèi)容，更多關(guān)于JS 面向?qū)ο?如何實現(xiàn)封裝拖拽對象的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論