Detaillierte Erläuterung der objektorientierten Praxis von JavaScript: Kapselung und Ziehen von Objekten

Überblick

Um Ihnen das Verständnis weiterer Methoden zu erleichtern und Vergleiche anzustellen, werde ich drei verschiedene Methoden zum Implementieren des Ziehens verwenden.

• Direkte Implementierung ohne Kapselung des Objekts;
• Verwenden Sie natives JavaScript, um Drag-Objekte zu kapseln.
• Implementieren Sie das Ziehen von Objekten durch die Erweiterung von jQuery.

Der Implementierungsprozess von Drag & Drop erfordert viel praktisches Wissen. Um meine eigene Wissenssammlung zu festigen und allen die Möglichkeit zu geben, mehr Wissen zu erwerben, werde ich daher versuchen, einige Details ausführlich mitzuteilen. Ich glaube, dass Sie nach sorgfältigem Lesen auf jeden Fall etwas lernen werden.

1. So animieren Sie ein DOM-Element

Wir ändern die Position eines Elements häufig, indem wir dessen oberen, linken und seitlichen Rand modifizieren. Im folgenden Beispiel wird das entsprechende Element bei jedem Klicken auf die Schaltfläche um 5 Pixel verschoben. Klicken Sie hier, um es anzuzeigen.

Klicken Sie hier, um ein kleines Beispiel für die Animation eines Elements anzuzeigen

Da das Ändern des oberen/linken Werts eines Elements zu einem Neuzeichnen der Seite führt, während dies bei Translate nicht der Fall ist, verwenden wir aus Sicht der Leistungsoptimierung vorzugsweise das Translate-Attribut.

2. So erhalten Sie die vom aktuellen Browser unterstützte transformkompatible Schreibmethode

„Transform“ ist ein CSS3-Attribut und bei der Verwendung treten Kompatibilitätsprobleme auf. Es gibt ungefähr folgende Möglichkeiten, kompatible Versionen für verschiedene Browser zu schreiben:

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

Daher müssen wir feststellen, welches Transform-Attribut von der aktuellen Browserumgebung unterstützt wird. Die Methode lautet wie folgt:

// Holen Sie sich die vom aktuellen Browser unterstützte Transform-kompatible Schreibmethode function getTransform() {
    var transform = '',
    divStyle = Dokument.createElement('div').style,
    // Es können mehrere Kompatibilitätsschreibmethoden beteiligt sein, und die vom Browser erkannte wird über eine Schleife gefunden transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

    ich = 0,
    len = transformArr.length;

    für(; i < len; i++) {
        wenn (transformArr[i] in divStyle) {
            // Nach dem Finden sofort zurückkehren und die Funktion beenden return transform = transformArr[i];
        }
    }

    // Falls nicht gefunden, geben Sie einfach eine leere Zeichenfolge zurück. Return Transform;
}

Mit dieser Methode werden die vom Browser unterstützten Transformationseigenschaften abgerufen. Wenn eine leere Zeichenfolge zurückgegeben wird, bedeutet dies, dass der aktuelle Browser die Transformation nicht unterstützt. Zu diesem Zeitpunkt müssen wir die Position des Elements mithilfe der linken und oberen Werte ändern. Falls unterstützt, ändern Sie den Wert der Transformation.

3. So erhalten Sie die Anfangsposition eines Elements

Wir müssen zuerst die Anfangsposition des Zielelements ermitteln, daher benötigen wir hier eine Funktion, die speziell zum Abrufen des Elementstils verwendet wird.

Da das Abrufen von Elementstilen im Internet Explorer jedoch etwas von anderen Browsern abweicht, benötigen wir eine kompatible Schreibweise.

Funktion getStyle(Element, Eigenschaft) {
    // ie verwendet currentStyle, um den Stil eines Elements abzurufen, und andere Browser verwenden getComputedStyle, um ihn abzurufen. return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(elem, false)[Eigenschaft] : elem.currentStyle[Eigenschaft];
}

Mit dieser Methode können Sie mit dem Schreiben von Methoden beginnen, um die Anfangsposition des Zielelements zu erhalten.

Funktion getTargetPos(elem) {
    var pos = {x: 0, y: 0};
    var transform = getTransform();
    wenn(transformieren) {
        var transformValue = getStyle(elem, transform);
        wenn(Transformwert == 'keine') {
            elem.style[transform] = 'übersetzen(0, 0)';
            Rückgabeposition;
        } anders {
            var temp = transformValue.match(/-?\d+/g);
            Rückgabeposition = {
                x: parseInt(temp[4].trim()),
                y: parseInt(temp[5].trim())
            }
        }
    } anders {
        wenn(getStyle(elem, 'position') == 'static') {
            elem.style.position = "relativ";
            Rückgabeposition;
        } anders {
            var x = parseInt(getStyle(elem, 'links') ? getStyle(elem, 'links') : 0);
            var y = parseInt(getStyle(elem, 'top') ? getStyle(elem, 'top') : 0);
            Rückgabeposition = {
                x: x,
                j: j
            }
        }
    }
}

Während des Ziehvorgangs müssen wir ständig die neue Position des Zielelements festlegen, damit es verschoben werden kann. Daher benötigen wir eine Methode zum Festlegen der Position des Zielelements.

// pos = { x: 200, y: 100 }
Funktion setzeZielPos(elem, pos) {
    var transform = getTransform();
    wenn(transformieren) {
        elem.style[transform] = 'übersetzen('+ pos.x +'px, '+ pos.y +'px)';
    } anders {
        elem.style.left = pos.x + "px";
        elem.style.top = pos.y + 'px';
    }
    Rücklaufelement;
}

5. Welche Ereignisse müssen wir nutzen?

Im Browser auf dem PC kann uns die Kombination der drei Ereignisse „Mausklick“, „Mausbewegung“ und „Mausfreigabe“ dabei helfen, das Ziehen zu erreichen.

• mousedown Wird ausgelöst, wenn die Maus gedrückt wird
• mousemove wird ausgelöst, wenn die Maus gedrückt und gezogen wird
• mouseup Wird ausgelöst, wenn die Maus losgelassen wird

Auf der mobilen Seite sind die entsprechenden „touchstart“, „touchmove“ und „touchend“.

Wenn wir diese Ereignisse an Elemente binden, wird ein Ereignisobjekt als Parameter an die Rückruffunktion übergeben. Über das Ereignisobjekt können wir die genaue Position der aktuellen Maus ermitteln. Die Informationen zur Mausposition sind der Schlüssel zum Realisieren des Ziehens.

Das Ereignisobjekt ist sehr wichtig und enthält viele nützliche Informationen. Ich werde hier nicht näher darauf eingehen. Sie können das Ereignisobjekt in der Funktion ausdrucken, um seine spezifischen Eigenschaften anzuzeigen. Diese Methode ist sehr nützlich für diejenigen, die sich die wichtigen Eigenschaften des Ereignisobjekts nicht merken können.

6. Das Prinzip des Ziehens

Wenn das Ereignis ausgelöst wird, können wir über das Ereignisobjekt die genaue Position der Maus ermitteln. Dies ist der Schlüssel zum Erreichen des Luftwiderstands. Wenn die Maus gedrückt wird (Mousedown-Trigger), müssen wir uns die Anfangsposition der Maus und die Anfangsposition des Zielelements merken. Unser Ziel ist es, zu erreichen, dass sich das Zielelement auch bewegt, wenn sich die Maus bewegt. Nach gesundem Menschenverstand können wir die folgende Beziehung ableiten:

Mausposition nach der Bewegung - anfängliche Mausposition = Zielelementposition nach der Bewegung - anfängliche Position des Zielelements

Wenn der Unterschied in der Mausposition durch dis dargestellt wird, dann ist die Position des Zielelements gleich:

Die Position des Zielelements nach dem Verschieben = dis + die Anfangsposition des Zielelements

Durch das Ereignisobjekt können wir die aktuelle Position der Maus genau ermitteln. Wenn also die Maus gezogen wird (Mousemove), können wir kontinuierlich die Differenz in der Mausbewegung berechnen, um die aktuelle Position des Zielelements zu ermitteln. Durch diesen Vorgang wird das Ziehen realisiert.

Wenn die Maus losgelassen wird (Mouseup), um das Ziehen zu beenden, müssen wir noch einige Abschlussarbeiten durchführen. Weitere Einzelheiten finden Sie im Code.

7. Als Hilfestellung beim Programmieren würde ich Mindmapping empfehlen.

Neue Freunde kommen oft zu mir und fragen mich, ob sie Code schreiben und Front-End-Arbeit machen können, wenn sie nicht über ausgeprägte logische Denkfähigkeiten verfügen. Meine Antwort ist: Ja. Denn mit Hilfe des Mindmappings lassen sich logische Defizite leicht ausgleichen. Es ist außerdem klarer und weniger fehleranfällig, als wenn Sie versuchen, die Logik im Kopf herauszufinden.

Im sechsten Punkt oben habe ich das Prinzip vorgestellt, es ist also nicht so schwierig, es umzusetzen. Die einzelnen Schritte sind in der Mindmap unten klar angegeben. Wir müssen den Code nur entsprechend dieser Schritte schreiben. Probieren Sie es aus, es muss einfach sein.

Verwenden Sie Mindmaps, um klar auszudrücken, was wir während des gesamten Ziehvorgangs tun müssen

8. Code-Implementierung

Teil 1. Vorbereitung

// Zielelementobjekt abrufen var oElem = document.getElementById('target');

//Deklariere 2 Variablen, um die x- und y-Koordinaten der anfänglichen Mausposition zu speichern. var startX = 0;
var startY = 0;

//Deklariere 2 Variablen, um die x- und y-Koordinaten der Anfangsposition des Zielelements zu speichern var sourceX = 0;
var QuelleY = 0;

Teil 2, Funktion

Da ich den Code bereits zuvor gepostet habe, werde ich ihn nicht wiederholen.

// Holen Sie sich die vom aktuellen Browser unterstützte Transform-kompatible Schreibmethode Funktion getTransform() {}

//Elementeigenschaften abrufen Funktion getStyle(elem, property) {}

// Die Anfangsposition des Elements abrufen Funktion getTargetPos(elem) {}

//Setze die Anfangsposition des Elements Funktion setTargetPos(elem, potions) {}

Teil 3. Deklarieren Sie Rückruffunktionen für drei Ereignisse

Diese drei Methoden bilden den Kern der Drag-and-Drop-Realisierung. Ich werde die Schritte in der obigen Mindmap strikt befolgen, um unseren Code zu vervollständigen.

//An den Callback bei gedrückter Maustaste gebunden, Ereignis ist das eingehende Ereignisobjekt function start(event) {
    // Anfangsposition der Maus abrufen startX = event.pageX;
    startY = Ereignis.SeiteY;

    // Anfangsposition des Elements abrufen var pos = getTargetPos(oElem);

    QuelleX = pos.x;
    QuelleY = pos.y;

    //Bindung document.addEventListener('mousemove', move, false);
    document.addEventListener('mouseup', Ende, false);
}

Funktion verschieben(Ereignis) {
    // Aktuelle Position der Maus abrufen var currentX = event.pageX;
    var currentY = Ereignis.SeiteY;

    // Differenz berechnen var distanceX = currentX - startX;
    var EntfernungY = aktuellesY - StartY;

    // Aktuelle Position des Elements berechnen und festlegen setTargetPos(oElem, {
        x: (QuelleX + EntfernungX).toFixed(),
        y: (QuelleY + EntfernungY).toFixed()
    })
}

Funktion Ende(Ereignis) {
    document.removeEventListener('mousemove', verschieben);
    document.removeEventListener('mouseup', Ende);
    // andere Dinge tun
}

OK, mit einfachem Ziehen und Ablegen klappt das bestimmt ganz gut. Klicken Sie auf den untenstehenden Link, um die Demo dieses Beispiels online anzuzeigen.

Verwenden Sie natives JS, um Drag & Drop zu implementieren

9. Drag-Objekte einkapseln

Lassen Sie uns das oben implementierte Ziehen in ein Ziehobjekt kapseln. Unser Ziel besteht darin, dass das übergebene Zielelement automatisch gezogen werden kann, sofern wir eine Drag-Instanz deklarieren.

Bei der tatsächlichen Entwicklung legen wir ein Objekt häufig in einer separaten JS-Datei ab. Diese JS-Datei wird als separates Modul verwendet und auf verschiedene Modularten organisiert und verwendet. Natürlich gibt es hier keine komplizierte Modulinteraktion, da wir für dieses Beispiel nur ein Modul benötigen.

Um eine Variablenverschmutzung zu vermeiden, müssen wir das Modul in einem Blockebenenbereich platzieren, der die Selbstausführung einer Funktion simuliert.

(Funktion() {
    ...
})();

Bei der normalen Modulorganisation komprimieren wir einfach viele JS-Dateien in eine JS-Datei. Das erste Semikolon hier dient daher dazu, einen Fehler zu vermeiden, der dadurch entsteht, dass am Ende des vorherigen Moduls kein Semikolon verwendet wird. essentiell. Dies passiert natürlich nicht, wenn Sie require- oder ES6-Module verwenden.

Wir wissen, dass wir beim Kapseln eines Objekts Eigenschaften und Methoden im Konstruktor oder Prototyp platzieren können und dass wir nach dem Hinzufügen selbstausführender Funktionen verhindern können, dass Eigenschaften und Methoden im internen Bereich des Moduls liegen. Dies ist Wissen über Verschlüsse.

Die Herausforderung für uns besteht darin, mit der Position von Attributen und Methoden richtig umzugehen.

Natürlich ist die Situation jedes Objekts anders und kann nicht verallgemeinert werden. Wir müssen die Merkmale dieser drei Positionen genau kennen, um die am besten geeignete Entscheidung treffen zu können.

• Im Konstruktor: Die Eigenschaften und Methoden gehören ausschließlich der aktuellen Instanz und können nur von dieser aufgerufen werden. Bei jeder Deklaration einer Instanz werden die Methoden neu erstellt.
• Im Prototyp: Eigenschaften und Methoden werden von allen Instanzen gemeinsam genutzt und können von allen Instanzen aufgerufen werden. Neu deklarierte Instanzen erstellen keine doppelten Methoden.
• Im Modulbereich: Attribute und Methoden können von keiner Instanz aus aufgerufen werden, aber von internen Methoden. Neu deklarierte Instanzen erstellen nicht wiederholt dieselben Methoden.

Die Beurteilung der Methode ist relativ einfach.

Da die Methoden im Konstruktor bei der Deklaration einer neuen Instanz immer wieder neu erstellt werden, versuchen wir das Deklarieren von Methoden im Konstruktor zu vermeiden.

Wenn Ihre Methode die Variablen im Konstruktor verwenden muss oder sie öffentlich machen möchte, müssen Sie sie in den Prototyp einfügen.

Wenn die Methode privat und für die Außenwelt nicht zugänglich sein muss, platzieren Sie sie im Modulbereich.

Manchmal ist es schwierig, die richtige Entscheidung darüber zu treffen, wo die Attribute platziert werden sollen. Daher ist es für mich schwierig, Ihnen eine genaue Definition zu geben, welche Attribute an welcher Position platziert werden müssen. Dies erfordert eine kontinuierliche Erfahrungszusammenfassung in der tatsächlichen Entwicklung. Aber im Allgemeinen müssen wir immer noch die Merkmale dieser drei Positionen kombinieren, um das am besten geeignete Urteil zu fällen.

Wenn der Attributwert nur einer Instanz allein gehören kann, wie etwa der Name eines Personenobjekts, der nur zu einer bestimmten Personeninstanz gehören kann, oder die Anfangsposition eines Elements im gezogenen Objekt hier nur die aktuelle Position des Elements ist, dann ist dieses Attribut geeignet, um im Konstruktor platziert zu werden.

Wenn auf ein Attribut nur interne Methoden zugreifen können, kann es im Modulbereich platziert werden.

In Bezug auf die objektorientierte Programmierung denke ich, dass die oben genannten Punkte die Essenz dieses Artikels darstellen und eine ernsthafte Beachtung verdienen. Wenn Sie beim Kapseln nicht klar denken, können viele unerwartete Fehler auftreten. Es wird daher empfohlen, dass Sie Ihre eigene Entwicklungserfahrung kombinieren, mehr nachdenken und Ihre eigenen Meinungen zusammenfassen.

Basierend auf diesen Gedanken können Sie versuchen, es selbst auf den Punkt zu bringen. Vergleichen Sie sie dann mit meinen, um zu sehen, wie sich unsere Ideen unterscheiden. Ich werde meine Gedanken in den Kommentaren zu den folgenden Beispielen zum Ausdruck bringen.

Klicken Sie hier, um die Demo anzuzeigen

js-Quellcode

(Funktion() {
    // Dies ist eine private Eigenschaft und muss nicht von Instanzen aufgerufen werden var transform = getTransform();

    Funktion Ziehen(Selektor) {
        // Die im Konstruktor platzierten Eigenschaften gehören zu jeder Instanz einzeln. this.elem = typeof selector == 'Object' ? selector : document.getElementById(selector);
        dies.startX = 0;
        dies.startY = 0;
        diese.QuelleX = 0;
        diese.QuelleY = 0;

        dies.init();
    }


    // Prototyp Drag.prototype = {
        Konstruktor: Ziehen,

        init: Funktion() {
            // Was zuerst getan werden muss this.setDrag();
        },

        // Leicht modifiziert, wird nur verwendet, um die Attribute des aktuellen Elements abzurufen, ähnlich wie getName
        getStyle: Funktion(Eigenschaft) {
            gibt document.defaultView.getComputedStyle zurück? document.defaultView.getComputedStyle(this.elem, false)[Eigenschaft] : this.elem.currentStyle[Eigenschaft];
        },

        // Wird verwendet, um die Positionsinformationen des aktuellen Elements abzurufen. Beachten Sie den Unterschied zur vorherigen getPosition: function() {
            var pos = {x: 0, y: 0};
            wenn(transformieren) {
                var transformValue = this.getStyle(transform);
                wenn(Transformwert == 'keine') {
                    this.elem.style[transform] = 'übersetzen(0, 0)';
                } anders {
                    var temp = transformValue.match(/-?\d+/g);
                    pos = {
                        x: parseInt(temp[4].trim()),
                        y: parseInt(temp[5].trim())
                    }
                }
            } anders {
                wenn(this.getStyle('position') == 'static') {
                    this.elem.style.position = "relativ";
                } anders {
                    pos = {
                        x: parseInt(this.getStyle('links') ? this.getStyle('links') : 0),
                        y: parseInt(this.getStyle('oben') ? this.getStyle('oben') : 0)
                    }
                }
            }

            Rückgabeposition;
        },

        // Wird verwendet, um die Position des aktuellen Elements festzulegen setPosition: function(pos) {
            wenn(transformieren) {
                this.elem.style[transform] = 'übersetzen('+ pos.x +'px, '+ pos.y +'px)';
            } anders {
                dieses.elem.style.left = pos.x + 'px';
                dieses.elem.style.top = pos.y + 'px';
            }
        },

        // Mit dieser Methode wird das Ereignis setDrag gebunden: function() {
            var selbst = dies;
            this.elem.addEventListener('mousedown', start, false);
            Funktion Start(Ereignis) {
                selbst.startX = Ereignis.SeiteX;
                self.startY = Ereignis.SeiteY;

                var pos = self.getPosition();

                selbst.sourceX = pos.x;
                selbst.QuelleY = pos.y;

                document.addEventListener('mousemove', verschieben, false);
                document.addEventListener('mouseup', Ende, false);
            }

            Funktion verschieben(Ereignis) {
                var currentX = Ereignis.SeiteX;
                var currentY = Ereignis.SeiteY;

                var EntfernungX = aktuellesX - selbst.StartX;
                var EntfernungY = aktuellesY - selbst.StartY;

                selbst. setzePosition({
                    x: (selbst.QuelleX + EntfernungX).toFixed(),
                    y: (selbst.QuelleY + EntfernungY).toFixed()
                })
            }

            Funktion Ende(Ereignis) {
                document.removeEventListener('mousemove', verschieben);
                document.removeEventListener('mouseup', Ende);
                // andere Dinge tun
            }
        }
    }

    // Private Methode, die nur verwendet wird, um die kompatible Schreibmethode der Transformationsfunktion getTransform() { zu erhalten.
        var transform = '',
            divStyle = Dokument.createElement('div').style,
            transformArr = ['transform', 'webkitTransform', 'MozTransform', 'msTransform', 'OTransform'],

            ich = 0,
            len = transformArr.length;

        für(; i < len; i++) {
            wenn (transformArr[i] in divStyle) {
                Rückgabewert für Transform = TransformArr[i];
            }
        }

        Transformation zurückgeben;
    }

    // Eine Möglichkeit, window.Drag = Drag; der Außenwelt zugänglich zu machen.
})();

// Verwendung: Deklarieren Sie 2 Drag-Instanzen new Drag('target');
neues Drag('Ziel2');

Ein solches Drag-Objekt ist gekapselt.

Ich schlage vor, dass Sie versuchen, basierend auf der von mir beschriebenen Denkweise mehr Komponenten zu kapseln. Kapseln Sie beispielsweise ein Popup-Fenster, kapseln Sie ein Loop-Karussell usw. Mit mehr Übung wird die Objektorientierung kein Problem mehr sein. Diese Denkweise lässt sich auch in Zukunft jederzeit anwenden.

Oben finden Sie eine ausführliche Erläuterung der praktischen Anwendung der objektorientierten Kapselung und des Ziehens von Objekten in JavaScript. Weitere Informationen zur Implementierung der Kapselung und des Ziehens von Objekten in JS objektorientiert finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!