Detaillierte Erläuterung mehrerer API-Beispiele, die häufig in der fortgeschrittenen JavaScript-Frontend-Entwicklung verwendet werden

MutationObserver

MutationObserver ist eine Schnittstelle, die Änderungen in der DOM-Struktur überwachen kann.

MutationObserver wird benachrichtigt, wenn Änderungen im DOM-Objektbaum auftreten.

API

MutationObserver ist ein Konstruktor, der einen Rückrufparameter akzeptiert, der zum Verarbeiten der Rückruffunktion von Knotenänderungen verwendet wird und zwei Parameter zurückgibt:

mutations : Liste der Knotenänderungsdatensätze （sequence<MutationRecord>）

observer : Erstellt ein MutationObserver-Objekt.

Das MutationObserver-Objekt verfügt über die folgenden drei Methoden:

observe : Legt das Beobachtungsziel fest, akzeptiert zwei Parameter, target: Beobachtungsziel, options: legt Beobachtungsoptionen über Objektmitglieder fest

disconnect : Verhindert, dass der Beobachter Änderungen beobachtet

takeRecords : Löscht die Datensatzwarteschlange und gibt ihren Inhalt zurück

//Wählen Sie einen zu beobachtenden Knoten aus var targetNode = document.getElementById('root') 
// Konfigurationsoptionen für den Beobachter festlegen var config = { attribute: true, childList: true, subtree: true } 
// Funktion, die ausgeführt werden soll, wenn sich ein Knoten ändert var callback = function (mutationsList, observer) {
  für (var Mutation von Mutationsliste) {
    wenn (Mutation.Typ == 'Kindliste') {
      console.log('Ein untergeordneter Knoten wurde hinzugefügt oder entfernt.')
    } sonst wenn (Mutation.Typ == 'Attribute') {
      console.log('Das Attribut ' + mutation.attributeName + ' wurde geändert.')
    }
  }
} 
//Erstellen Sie eine Observer-Instanz und verknüpfen Sie sie mit der Callback-Funktion var observer = new MutationObserver(callback) 
//Verwenden Sie die Konfigurationsdatei, um den Zielknoten zu beobachten observer.observe(targetNode, config) 
// Beenden Sie die Beobachtung von observer.disconnect()

Der Optionsparameter in der Observer-Methode hat die folgenden Optionen:

childList : Auf „True“ setzen, um Änderungen an den Ziel-Unterknoten zu beobachten, wie etwa das Hinzufügen oder Löschen der Ziel-Unterknoten, aber nicht das Ändern der Unterknoten und ihrer Nachkommen.

attributes : Auf „True“ setzen, um Änderungen in Zielattributen zu beobachten

characterData : Auf „true“ setzen, um Änderungen in den Zieldaten zu beobachten

subtree : Auf true gesetzt, Änderungen am Ziel und seinen Nachkommen werden beobachtet

attributeOldValue : Wenn das Attribut „true“ ist oder weggelassen wird, ist dies gleichbedeutend damit, es auf „true“ zu setzen und anzugeben, dass der Zielattributwert vor der Änderung aufgezeichnet werden muss. Wenn attributeOldValue gesetzt ist, kann die Attributeinstellung weggelassen werden.

characterDataOldValue : Wenn characterData wahr ist oder weggelassen wird, ist dies gleichbedeutend damit, es auf wahr zu setzen, was bedeutet, dass die Zieldaten vor der Änderung aufgezeichnet werden müssen. Wenn characterDataOldValue gesetzt ist, kann die Einstellung characterData weggelassen werden.

attributeFilter : Wenn nicht alle Attributänderungen beachtet werden müssen und attribute auf true oder ignore gesetzt ist, dann legen Sie eine Liste der lokalen Attributnamen (ohne Namespace) fest, die beachtet werden müssen

Merkmale

MutationObserver hat die folgenden Funktionen:

• Es wartet, bis alle Skriptaufgaben abgeschlossen sind, bevor es ausgeführt wird, d. h. es verwendet den asynchronen Modus
• Es kapselt DOM-Änderungsdatensätze zur Verarbeitung in ein Array, anstatt DOM-Änderungen einzeln nacheinander zu verarbeiten.
• Es kann alle Änderungen beobachten, die in DOM-Knoten auftreten, oder eine bestimmte Art von Änderungen

Wenn sich das DOM ändert, wird das MutationObserver-Ereignis ausgelöst. Es unterscheidet sich jedoch wesentlich von Ereignissen: Ereignisse werden synchron ausgelöst, dh DOM-Änderungen lösen sofort die entsprechenden Ereignisse aus; MutationObserver wird asynchron ausgelöst und wird nicht unmittelbar nach den DOM-Änderungen ausgelöst, sondern nachdem alle aktuellen DOM-Vorgänge abgeschlossen sind.

Wenn Sie beispielsweise 1000 Absätze (p-Elemente) kontinuierlich in ein Dokument einfügen, werden kontinuierlich 1000 Einfügeereignisse ausgelöst und die Rückruffunktion jedes Ereignisses ausgeführt, was wahrscheinlich zu Browserverzögerungen führt. MutationObserver ist völlig anders. Es wird erst ausgelöst, nachdem alle 1000 Absätze eingefügt wurden, und es wird nur einmal ausgelöst. Dies reduziert häufige Änderungen am DOM und verbessert die Leistung erheblich.

Kreuzungsbeobachter

Bei der Entwicklung von Webseiten müssen Sie häufig wissen, ob ein Element in den „Ansichtsbereich“ gelangt ist, das heißt, ob der Benutzer es sehen kann.

Die herkömmliche Implementierungsmethode besteht darin, auf das Bildlaufereignis zu hören, die Methode getBoundingClientRect () des Zielelements aufzurufen, dessen Koordinaten abzurufen, die der oberen linken Ecke des Ansichtsfensters entsprechen, und dann zu bestimmen, ob es sich innerhalb des Ansichtsfensters befindet. Der Nachteil dieser Methode besteht darin, dass aufgrund des intensiven Auftretens von Scroll-Ereignissen der Rechenaufwand groß ist, was leicht zu Leistungsproblemen führen kann.

Es gibt eine neue IntersectionObserver-API, die automatisch „beobachten“ kann, ob ein Element sichtbar ist und von Chrome 51+ unterstützt wird. Da die Essenz von Visible darin besteht, dass das Zielelement und das Ansichtsfenster einen Schnittpunktbereich erzeugen, wird diese API als „Schnittpunktbeobachter“ bezeichnet.

API

IntersectionObserver ist ein Konstruktor, der vom Browser nativ bereitgestellt wird. Er akzeptiert zwei Parameter: callback ist die Rückruffunktion bei Sichtbarkeitsänderungen und option ist ein Konfigurationsobjekt (dieser Parameter ist optional).

var io = neuer IntersectionObserver(Rückruf, Option)
// Beginnen Sie mit der Beobachtung io.observe(document.getElementById('example')) 
// Beenden Sie die Beobachtung von io.unobserve(Element) 
// Schließen Sie den Beobachter io.disconnect()

Wenn Sie mehrere Knoten beobachten möchten, müssen Sie diese Methode mehrmals aufrufen.

io.observe(elementA)
io.observe(elementB)

Wenn sich die Sichtbarkeit des Zielelements ändert, wird die Rückruffunktion des Beobachters aufgerufen. Der Rückruf wird normalerweise zweimal ausgelöst. Einmal, wenn das Zielelement gerade den Ansichtsbereich betritt (sichtbar wird), und einmal, wenn es den Ansichtsbereich vollständig verlässt (unsichtbar wird).

var io = neuer IntersectionObserver((Einträge) => {
  console.log(Einträge)
})

Der Parameter (Einträge) der Rückruffunktion ist ein Array, dessen jedes Mitglied ein IntersectionObserverEntry-Objekt ist. Wenn sich beispielsweise die Sichtbarkeit zweier beobachteter Objekte gleichzeitig ändert, verfügt das Einträge-Array über zwei Mitglieder.

time : Der Zeitpunkt der Sichtbarkeitsänderung, ein hochpräziser Zeitstempel in Millisekunden

target : Das beobachtete Zielelement, ein DOM-Knotenobjekt

isIntersecting : Ist das Ziel sichtbar?

rootBounds : Informationen zum rechteckigen Bereich des Root-Elements, der Rückgabewert der Methode getBoundingClientRect(). Wenn kein Root-Element vorhanden ist (d. h., es wird direkt relativ zum Ansichtsfenster gescrollt), wird null zurückgegeben.

boundingClientRect : Informationen über die rechteckige Fläche des Zielelements

intersectionRect : Informationen zum Schnittpunktbereich zwischen dem Zielelement und dem Ansichtsfenster (oder Stammelement)

intersectionRatio : Das sichtbare Verhältnis des Zielelements, d. h. das Verhältnis von intersectionRect zu boundingClientRect. Es ist 1, wenn es vollständig sichtbar ist, und kleiner oder gleich 0, wenn es vollständig unsichtbar ist.

Zum Beispiel

<html lang="de">
  <Kopf>
    <meta charset="UTF-8" />
    <title>Dokument</title>
    <Stil>
      #div1 {
        Position: klebrig;
        oben: 0;
        Höhe: 50px;
        Zeilenhöhe: 50px;
        Textausrichtung: zentriert;
        Hintergrund: schwarz;
        Farbe: #ffffff;
        Schriftgröße: 18px;
      }
    </Stil>
  </Kopf> 
  <Text>
    <div id="div1">Startseite</div>
    <div Stil="Höhe: 1000px;"></div>
    <div id="div2" style="Höhe: 100px; Hintergrund: rot;"></div>
    <Skript>
      var div2 = document.getElementById('div2')
      let Beobachter = neuer IntersectionObserver(
        Funktion (Einträge) {
          Einträge.fürJedes(Funktion (Element, Index) {
            console.log(Element)
            wenn (element.isIntersecting) {
              div1.innerText = "Ich bin raus"
            } anders {
              div1.innerText = "Homepage"
            }
          })
        },
        {
          Wurzel: null,
          Schwellenwert: [0, 1]
        }
      ) 
      Beobachter.beobachten(div2)
    </Skript>
  </body>
</html>

Im Vergleich zu getBoundingClientRect besteht der Vorteil darin, dass kein Neuzeichnen und kein Neufließen verursacht wird.

Lazy Loading von Bildern

Das Prinzip des Lazy Loading von Bildern wird hauptsächlich durch die Kernlogik realisiert, die beurteilt, ob das aktuelle Bild den sichtbaren Bereich erreicht hat. Dies spart Bandbreite und verbessert die Leistung der Webseite. Traditionelles, bahnbrechendes Lazy Loading wird durch das Abhören von Bildlaufereignissen erreicht, Bildlaufereignisse werden jedoch in kurzer Zeit viele Male ausgelöst, was die Seitenleistung erheblich beeinträchtigt. Um die Seitenleistung zu verbessern, können wir IntersectionObserver verwenden, um das verzögerte Laden von Bildern zu implementieren.

const imgs = document.querySelectorAll('img[data-src]')
const konfiguration = {
  Wurzelrand: '0px',
  Schwellenwert: 0
}
let observer = neuer IntersectionObserver((Einträge, selbst) => {
  Einträge.fürJeden((Eintrag) => {
    wenn (Eintrag.istSchnittpunkt) {
      let img = Eintrag.Ziel
      lass src = img.dataset.src
      wenn (Quelle) {
        img.src = quelle
        img.removeAttribute('data-src')
      }
      // Nicht beobachten self.unobserve(entry.target)
    }
  })
}, Konfiguration)
imgs.forEach((Bild) => {
  Beobachter.beobachten(Bild)
})

Unendliches Scrollen

Auch die Implementierung des Infinite Scroll ist einfach.

var intersectionObserver = neuer IntersectionObserver(Funktion (Einträge) {
  // Wenn es nicht sichtbar ist, gib if (entries[0].intersectionRatio <= 0) returniere
  Artikel laden(10)
  console.log('Neue Elemente geladen')
})
 
// Beginnen Sie mit der Beobachtung von intersectionObserver.observe(document.querySelector('.scrollerFooter'))

getComputedStyle()

DOM2 Style fügt document.defaultView eine getComputedStyle() -Methode hinzu, die eine CSSStyleDeclaration zurückgibt
Ein Objekt (vom selben Typ wie die Stileigenschaft), das den berechneten Stil des Elements enthält.

API

document.defaultView.getComputedStyle(Element[,Pseudoelement])
// oder
window.getComputedStyle(Element[,Pseudoelement])

Diese Methode akzeptiert zwei Parameter: das Element, dessen berechneter Stil abgerufen werden soll, und die Zeichenfolge des Pseudoelements (z. B. „:after“). Wenn kein Pseudoelement benötigt wird, kann der zweite Parameter null sein.

<!DOCTYPE html>
<html>
  <Kopf>
    <style type="text/css">
      #meineDiv {
        Hintergrundfarbe: blau;
        Breite: 100px;
        Höhe: 200px;
      }
    </Stil>
  </Kopf>
  <Text>
    <div id="myDiv" style="Hintergrundfarbe: rot; Rahmen: 1px durchgehend schwarz"></div>
  </body>
  <Skript>
    Funktion getStyleByAttr(Objekt, Name) {
      window.getComputedStyle zurückgeben ? window.getComputedStyle(obj, null)[Name] : obj.currentStyle[Name]
    }
    let node = document.getElementById('myDiv')
    console.log(getStyleByAttr(Knoten, 'Hintergrundfarbe'))
    console.log(getStyleByAttr(Knoten, 'Breite'))
    console.log(getStyleByAttr(Knoten, 'Höhe'))
    console.log(getStyleByAttr(Knoten, 'Rand'))
  </Skript>
</html>

Ähnlichkeiten und Unterschiede im Stil

Die Ähnlichkeit zwischen getComputedStyle und element.style besteht darin, dass beide CSSStyleDeclaration-Objekte zurückgeben. Der Unterschied ist:

element.style liest nur den Inline-Stil des Elements, d. h. den Stil, der im Style-Attribut des Elements geschrieben ist, während der von getComputedStyle gelesene Stil der endgültige Stil ist, einschließlich Inline-Stil, eingebettetem Stil und externem Stil.

element.style unterstützt sowohl Lesen als auch Schreiben. Wir können den Stil eines Elements über element.style neu schreiben. Allerdings unterstützt getComputedStyle nur das Lesen, nicht das Schreiben. Wir können den Stil mit getComputedStyle lesen und mit element.style ändern.

getBoundingClientRect

Die Methode getBoundingClientRect() gibt die Größe eines Elements und seine Position relativ zum Ansichtsfenster zurück.

API

let DOMRect = Objekt.getBoundingClientRect()

Sein Rückgabewert ist ein DOMRect-Objekt, bei dem es sich um eine Reihe von Rechtecken handelt, die von der Methode getClientRects() des Elements zurückgegeben werden, d. h. die CSS-Randgröße des Elements.

Das zurückgegebene Ergebnis ist das kleinste Rechteck, das das gesamte Element enthält und über schreibgeschützte Eigenschaften (links, oben, rechts, unten, x, y, Breite und Höhe) verfügt, die den gesamten Begrenzungsrahmen in Pixeln beschreiben. Andere Eigenschaften als Breite und Höhe werden relativ zur oberen linken Ecke des Ansichtsfensters berechnet.

Anwendungsszenario

1. Ermitteln Sie den Abstand des DOM-Elements relativ zur oberen linken Ecke der Webseite

Die vorherige Schreibmethode besteht darin, das Element über „offsetParent“ zu finden, um das übergeordnete Element zu lokalisieren, bis es rekursiv den Hauptteil oder das HTML des Elements der obersten Ebene erreicht.

//Ermitteln Sie den Abstand des DOM-Elements relativ zur oberen linken Ecke der Webseite function offset(el) {
  var oben = 0
  var links = 0
  Tun {
    oben += el.offsetTop
    links += el.offsetLeft
  } while ((el = el.offsetParent)) // Es gibt ein Kompatibilitätsproblem, muss kompatibel sein return {
    oben: oben,
    links: links
  }
} 
var odiv = document.getElementsByClassName('markdown-body')
offset(a[0]) // {oben: 271, links: 136}

Gemäß der API getBoundingClientRect kann es nun folgendermaßen geschrieben werden:

var positionX = this.getBoundingClientRect().left + document.documentElement.scrollLeft
var positionY = this.getBoundingClientRect().top + document.documentElement.scrollTop

2. Bestimmen Sie, ob sich das Element im sichtbaren Bereich befindet

Funktion istElView(el) {
  var top = el.getBoundingClientRect().top // Der Abstand von der Oberseite des Elements zur Oberseite des sichtbaren Bereichsvar bottom = el.getBoundingClientRect().bottom // Der Abstand von der Unterseite des Elements zur Oberseite des sichtbaren Bereichsvar se = document.documentElement.clientHeight // Die Höhe des sichtbaren Bereichs des Browsers.
  wenn (oben < se && unten > 0) {
    returniere wahr
  } sonst wenn (oben >= se || unten <= 0) {
    // Unsichtbar}
  return false
}

Oben finden Sie ausführliche Inhalte mehrerer API-Beispiele, die häufig bei der fortgeschrittenen Front-End-Entwicklung von JavaScript verwendet werden. Weitere Informationen zu fortgeschrittenen Front-End-API-Beispielen finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!