Vereinfachen der DOM-Manipulation mit einer Vanilla-JavaScript-Dienstprogrammfunktion

Einführung

Wenn Sie jemals mit jQuery gearbeitet haben, wissen Sie, wie praktisch es für die Auswahl und Bearbeitung von DOM-Elementen ist. Was aber, wenn Sie eine ähnliche Funktionalität in Vanilla-JavaScript wünschen, ohne die gesamte jQuery-Bibliothek einzubinden? In diesem Artikel erfahren Sie, wie Sie eine vereinfachte Dienstprogrammfunktion erstellen, die einige der Kernfunktionen von jQuery nachahmt, z. B. das Auswählen von Elementen und das Hinzufügen von Klassen, alles mit reinem JavaScript.

Lassen Sie uns eine prägnante Hilfsfunktion aufschlüsseln, die die DOM-Manipulation auf saubere, verkettbare Weise ermöglicht. Wir bauen es Schritt für Schritt auf und erklären jeden Teil.

Der Kodex

const $ = function (selector = null) {
    return new class {
        constructor(selector) {
            if (selector) {
                // Check if selector is a single DOM element (nodeType present)
                if (selector.nodeType) {
                    this.nodes = [selector];  // Convert the element into an array
                } 
                // Check if selector is a NodeList
                else if (NodeList.prototype.isPrototypeOf(selector)) {
                    this.nodes = selector;  // Use the NodeList as-is
                } 
                // Otherwise assume it's a CSS selector string
                else {
                    this.nodes = document.querySelectorAll(selector);
                }
                // Store the first element in the variable 'n'
                this.n = this.nodes[0];
            }
        }

        each(callback) {
            this.nodes.forEach(node => callback(node));
            return this;  // Return 'this' for method chaining
        }

        addClass(classNames) {
            return this.each(node => {
                const classes = classNames.split(",").map(className => className.trim());  // Split and trim classes
                node.classList.add(...classes);  // Add the classes to the element
            });
        }
    }(selector);
}

Erläuterung

1. Erstellen der $-Funktion:

   const $ = function (selector = null) {

Die $-Funktion ist ein vereinfachtes Dienstprogramm, das den $-Selektor von jQuery nachahmt. Es akzeptiert einen Selektor als Argument, bei dem es sich um eine CSS-Selektorzeichenfolge, ein einzelnes DOM-Element oder eine NodeList handeln kann.

1. Anonyme Klasse und Konstruktor:

   return new class {
       constructor(selector) {
           if (selector) {

Diese Funktion gibt eine Instanz einer anonymen Klasse zurück. Innerhalb des Konstruktors prüft er, um welche Art von Argument es sich bei dem Selektor handelt, und verarbeitet ihn entsprechend.

1. Umgang mit dem Selektor:

   if (selector.nodeType) {
       this.nodes = [selector];  // Convert the element into an array
   } else if (NodeList.prototype.isPrototypeOf(selector)) {
       this.nodes = selector;  // Use the NodeList as-is
   } else {
       this.nodes = document.querySelectorAll(selector);  // Handle CSS selector strings
   }
   this.n = this.nodes[0];  // Store the first element

• Wenn der Selektor ein DOM-Element ist (es hat nodeType), wird er zur konsistenten Handhabung in ein Array eingeschlossen.
• Wenn der Selektor bereits eine NodeList ist, verwenden wir ihn direkt.
• Wenn es sich um eine Zeichenfolge handelt, gehen wir davon aus, dass es sich um einen CSS-Selektor handelt, und verwenden querySelectorAll, um die passenden DOM-Elemente auszuwählen.

Nach der Bestimmung des Typs wird das erste ausgewählte Element für den schnellen Zugriff in this.n gespeichert.

1. Die Each-Methode:

   each(callback) {
       this.nodes.forEach(node => callback(node));
       return this;  // Allows method chaining
   }

Die Methode „eached“ durchläuft die ausgewählten Elemente in this.nodes und wendet die bereitgestellte Rückruffunktion auf jedes einzelne an. Dies wird zurückgegeben, sodass Sie mehrere Methoden miteinander verketten können.

1. Die addClass-Methode:

   addClass(classNames) {
       return this.each(node => {
           const classes = classNames.split(",").map(className => className.trim());  // Split and trim class names
           node.classList.add(...classes);  // Add the classes to each element
       });
   }

Mit der addClass-Methode können Sie eine oder mehrere Klassen zu den ausgewählten Elementen hinzufügen. Es nimmt eine durch Kommas getrennte Zeichenfolge von Klassennamen, teilt sie auf, schneidet alle zusätzlichen Leerzeichen ab und wendet jede Klasse mit classList.add.

auf die Elemente an

Anwendungsbeispiel

Mit diesem Dienstprogramm können Sie das DOM jetzt auf einfache, lesbare Weise bearbeiten, ähnlich wie Sie es mit jQuery tun würden:

// Select all elements with the class 'my-element' and add 'new-class' to them
$('.my-element').addClass('new-class');

// You can also chain methods, for example, adding multiple classes
$('.my-element').addClass('class-one, class-two');

Abschluss

Diese Dienstprogrammfunktion bringt ein wenig von der Eleganz von jQuery in die Welt von Vanilla-JavaScript und macht die DOM-Manipulation intuitiver und lesbarer, ohne auf externe Bibliotheken angewiesen zu sein. Es ist außerdem leichtgewichtig und kann bei Bedarf problemlos um weitere Methoden erweitert werden. Obwohl es nicht so leistungsstark oder umfassend wie jQuery ist, deckt es viele alltägliche Aufgaben auf saubere und wiederverwendbare Weise ab.

Fühlen Sie sich frei, dieses Dienstprogramm mit weiteren Methoden wie „removeClass“, „toggleClass“ oder sogar „css“ zu erweitern. Auf diese Weise erhalten Sie Ihr eigenes Mini-Framework, das auf Ihre spezifischen Bedürfnisse zugeschnitten ist.

---

Wenn Sie dies hilfreich fanden oder Verbesserungsvorschläge haben, hinterlassen Sie unten einen Kommentar. Lassen Sie uns gemeinsam den DOM-Manipulationsprozess vereinfachen!

Das obige ist der detaillierte Inhalt vonVereinfachen der DOM-Manipulation mit einer Vanilla-JavaScript-Dienstprogrammfunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!