Waren Sie jemals erstaunt über die Magie des Reaktierens? Haben Sie sich jemals gefragt, wie Dojo funktioniert? Waren Sie jemals neugierig auf Jquerys cleverer Operation? In diesem Tutorial schleichen wir uns hinter die Kulissen und versuchen, eine superverfasste Version von JQuery zu erstellen.

Wir verwenden fast jeden Tag JavaScript -Bibliotheken. Unabh?ngig davon, ob es sich um Algorithmen handelt, API -Abstraktionen bereitstellt oder DOMs manipuliert, werden Bibliotheken auf den meisten modernen Websites viele Funktionen ausführen.

In diesem Tutorial werden wir versuchen, eine Bibliothek wie diese von Grund auf neu zu erstellen (dies ist natürlich eine vereinfachte Version). Wir erstellen eine Bibliothek für DOM -Operationen, ?hnlich wie JQuery. Ja, es macht Spa?, aber bevor Sie aufgeregt werden, lassen Sie mich ein paar Punkte klarstellen:

• Dies ist keine voll funktionsf?hige Bibliothek. Wir werden eine solide Methode schreiben, aber dies ist keine vollst?ndige JQuery. Wir werden genug tun, um Ihnen ein gutes Verst?ndnis für die Arten von Problemen zu vermitteln, denen Sie beim Erstellen von Bibliotheken begegnen.
• Wir verfolgen hier in allen Browsern keine vollst?ndige Kompatibilit?t. Der Code, den wir heute geschrieben haben, sollte auf Chrome, Firefox und Safari ausgeführt werden, funktionieren jedoch m?glicherweise nicht auf ?lteren Browsern wie dem IE.
• Wir werden nicht jeden m?glichen Zweck unserer Bibliothek abdecken. Zum Beispiel sind unsere prepend nur dann gültig, wenn Sie ihnen unsere Bibliotheksinstanzen übergeben.

1. Erstellen Sie ein Framework für die Bibliothek

Wir werden mit dem Modul selbst beginnen. Wir werden das ECMascript -Modul (ESM) verwenden, eine moderne Art, Code im Web zu importieren und zu exportieren.

 Exportklasse Kuppel {
    Konstruktor (Selector) {

    }
}

Wie Sie sehen k?nnen, exportieren wir eine Klasse namens Dome , deren Konstruktor einen Parameter akzeptiert, aber sie kann von mehreren Typen sein. Wenn es sich um eine Zeichenfolge handelt, gehen wir davon aus, dass es sich um einen CSS -Selektor handelt, aber wir k?nnen auch die Ergebnisse eines einzelnen DOM -Knotens oder document.querySelectorAll akzeptieren, um die Elementsuche zu vereinfachen. Wenn es eine length Eigenschaft hat, werden wir wissen, dass wir eine Liste von Knoten haben. Wir werden diese Elemente in this.elements Elementen speichern. Elemente, Dome -Objekt kann mehrere DOM -Elemente einwickeln, wir müssen in fast jeder Methode jedes Element durchlaufen, sodass diese Dienstprogramme sehr bequem sind.

Beginnen wir mit einer map , die einen Parameter, eine Rückruffunktion, übernimmt. Wir werden die Elemente im Array durchlaufen und den Dome der Rückruffunktion zurückgegebenen Inhalt sammeln.

Wir brauchen auch eine forEach -Methode, standardm??ig k?nnen wir den Anruf einfach an mapOne weiterleiten. Es ist leicht zu erkennen, was diese Funktion tut, aber die eigentliche Frage ist, warum wir sie brauchen. Dies dauert ein wenig von dem, was Sie als "Bibliothekskonzept" bezeichnen k?nnten.

Eine kurze Diskussion über Konzepte

Wenn das Erstellen einer Bibliothek nur Code schreibt, w?re es nicht zu schwierig. Bei der Arbeit an diesem Projekt war der schwierigere Teil, den ich fand, zu entscheiden, wie bestimmte Methoden funktionieren sollten.

Bald werden wir ein Dome -Objekt erstellen, das mehrere DOM -Knoten ( $("li").text() ) umhüllt, und Sie erhalten eine einzelne Zeichenfolge, die alle zusammengesetzten Elementtexte enth?lt. Ist das nützlich? Ich glaube nicht, aber ich wei? nicht, was ein besserer Rückgabewert ist.

Für dieses Projekt werde ich den Text mehrerer Elemente als Array zurückgeben, es sei denn, es gibt nur ein Element im Array. Ich denke, Sie erhalten am h?ufigsten Text für ein einzelnes Element, daher haben wir für diese Situation optimiert. Wenn Sie jedoch Text für mehrere Elemente erhalten, werden wir zurückgeben, was Sie verwenden k?nnen.

Kehren Sie zur Codierung zurück

Daher ruft mapOne zuerst map auf und gibt dann ein einzelnes Element im Array oder Array zurück. Wenn Sie sich immer noch nicht sicher sind, wie das funktioniert, bleiben Sie dran: Sie werden sehen!

 MAPONE (CALLBACK) {
    const m = this.map (callback);
    return M.Length> 1?
};

4. Verwenden von Text und HTML

Fügen wir als n?chstes die text hinzu, um festzustellen, ob wir einstellen oder erhalten. Beachten Sie, dass dies nur über die Elemente iteriert und ihren Text festgelegt wird. Wenn wir erhalten, werden wir die mapOne -Methode des Elements zurückgeben: Wenn wir an mehreren Elementen arbeiten, wird dies ein Array zurückgeben.

html -Methode entspricht fast der text , mit der Ausnahme, dass innerHTML verwendet wird.

 html (html) {
    if (typeof html! == "undefined") {
        this.foreach (Funktion (el) {
            el.innerhtml = html;
        });
        gib dies zurück;
    } anders {
        Gibt this.mapone (function (el) {zurück
            return el.innerhtml;
        });
    }
}

Wie ich sagte: Fast gleich.

5. Betriebsklasse

Als n?chstes m?chten wir in der Lage sein, Klassen hinzuzufügen und zu l?schen. Schreiben wir also addClass und removeClass -Methoden.

Unsere addClass -Methode verwendet classList.add für jedes Element. Beim übergeben einer Saite wird nur diese Klasse hinzugefügt, und wenn wir ein Array übergeben, werden wir über das Array iterieren und alle darin enthaltenen Klassen hinzufügen.

 AddClass (Klassen) {
    Gibt dies zurück.foreach (Funktion (el) {
        if (typeof klassen! == "String") {
            für (const Elclass von Klassen) {
                el.classList.add (Elclass);
            }
        } anders {
            EL.ClASSLIST.ADD (Klassen);
        }
    });
}

Sehr einfach, oder?

Was ist nun mit dem L?schen der Klasse? Dazu tun Sie fast dasselbe, verwenden Sie einfach classList.remove .

6. Eigenschaften verwenden

Als n?chstes fügen wir die attr -Funktion hinzu. Dies wird einfach sein, da es fast die gleiche wie unsere html -Methode ist. Wie diese Methoden k?nnen wir gleichzeitig Immobilien erhalten und festlegen: Wir akzeptieren einen Eigenschaftsnamen und einen Wert, um festzulegen, und nur einen Eigenschaftsnamen zu erhalten.

 attr (attr, val) {
    if (typeof val! == "undefined") {
        Gibt dies zurück.foreach (Funktion (el) {
            El.Setattribute (Attr, Val);
        });
    } anders {
        Gibt this.mapone (function (el) {zurück
            return El.GetAttribute (Attr);
        });
    }
}

Wenn val definiert ist, werden wir die setAttribute -Methode verwenden. Andernfalls werden wir getAttribute -Methode verwenden.

7. Elemente erstellen

Wir sollten in der Lage sein, neue Elemente zu erstellen, und jede gute Bibliothek kann dies tun. Dies ist natürlich als Methode der Dome bedeutungslos.

 Exportfunktion create (tagname, attrs) {

}

Wie Sie sehen k?nnen, akzeptieren wir zwei Parameter: den Namen des Elements und das Attributobjekt. Die meisten Eigenschaften werden über unsere attr -Methode angewendet, und der Textinhalt wird über die text auf Dome -Objekt angewendet. Hier sind die tats?chlichen Aktionen für alle:

 Exportfunktion create (tagname, attrs) {
    let el = new Dome ([document.createelement (tagname)]);
    if (attrs) {
        für (lass taste in attrs) {
            if (attr.hasownProperty (Schlüssel)) {
                EL.ATTR (Schlüssel, Attrs [Key]);
            }
        }
    }
    return el;
}

Wie Sie sehen k?nnen, erstellen wir das Element und senden es direkt an das neue Dome -Objekt.

Aber jetzt erstellen wir neue Elemente, wir werden sie in das DOM einfügen wollen, oder?

8. Angeschlossene und vorangestellte Elemente

Als n?chstes schreiben wir Methoden append und prepend . Diese Funktionen sind etwas schwierig, haupts?chlich weil es mehrere Anwendungsf?lle gibt. Hier sind die Dinge, die wir tun k?nnen:

 dome1.Append (dome2);
dome1.Prepend (dome2);

M?glicherweise m?chten wir anh?ngen oder Pr?fix:

• Ein neues Element für ein oder mehrere vorhandene Elemente
• Mehrere neue Elemente zu einem oder mehreren vorhandenen Elementen
• Ein vorhandenes Element zu einem oder mehreren vorhandenen Elementen
• Mehrere vorhandene Elemente zu einem oder mehreren vorhandenen Elementen

Ich benutze "neue", um Elemente darzustellen, die noch nicht in der DOM sind. Erkl?ren wir es jetzt Schritt für Schritt:

 append (els) {

}

Wir erwarten, dass els ein Dome ist. Eine vollst?ndige DOM -Bibliothek akzeptiert sie als Knoten oder eine Liste von Knoten, das werden wir jedoch nicht tun. Wir müssen durch jedes unserer Elemente iterieren, und dann gehen wir jedes Element durch, das wir anh?ngen wollen.

Wenn wir uns anschlie?en, enth?lt das i aus dem als Parameter übergebenen externen Dome -Objekt nur die ursprünglichen (nicht nicht gebrauchten) Knoten. Wenn wir also nur ein einzelnes Element an ein einzelnes Element anh?ngen, sind alle beteiligten Knoten Teil ihrer jeweiligen prepend .

9. Elemente l?schen

Fügen wir zur Vollst?ndigkeit eine remove hinzu. Dies wird sehr einfach sein, da wir nur die removeChild -Methode verwenden müssen. Um die Sache zu erleichtern, werden wir die forEach -Schleife verwenden, um die IT -IT -IT -IT removeChild -Methode umzukehren, um die Schleife umzukehren, und Dome -Objekt für jedes Element funktioniert weiterhin ordnungsgem??. Nicht schlecht, richtig?

10. Nutzungsereignisse

Last but not least werden wir einige Event -Handler -Funktionen schreiben.

Schauen Sie sich die on -Methode an und wir werden sie diskutieren:

 auf (evt, fn) {
    Gibt dies zurück.foreach (Funktion (el) {
        El.AddeventListener (evt, fn, false);
    });
}

Das ist sehr einfach. Wir müssen nur die Elemente iterieren und addEventListener -Methode verwenden. Die off -Funktion (sie ist ausgehackt Event -Handler) ist fast dieselbe:

 Aus (evt, fn) {
    Gibt dies zurück.foreach (Funktion (el) {
        El.RemoveEventListener (evt, fn, false);
    });
}

11. Nutzungsbibliothek

Um Dome zu verwenden, stecken Sie es einfach in das Skript und importieren Sie es.

 Importieren {Dome, erstellen} aus "./dome.js" "

Von dort aus k?nnen Sie es so verwenden:

 neue Kuppel ("li")
...

Stellen Sie sicher, dass das Skript, das Sie importieren, ein ES -Modul ist.

Das war's!

Ich hoffe, Sie k?nnen unsere kleine Bibliothek ausprobieren und sie sogar ein wenig erweitern. Wie ich bereits erw?hnt habe, habe ich es auf Github gesetzt. Fühlen Sie sich frei, es zu geben, zu spielen und Pull -Anfragen zu senden.

Lassen Sie mich noch einmal klarstellen: Der Zweck dieses Tutorials besteht nicht darin, vorzuschlagen, dass Sie immer Ihre eigene Bibliothek schreiben sollten. Es gibt ein spezielles Team, das zusammenarbeitet, um die gro?e, reife Bibliothek so gut wie m?glich zu gestalten. Der Zweck hier ist, Ihnen einen Einblick in das zu geben, was in der Bibliothek passieren k?nnte.

Ich empfehle dringend, in einigen Ihrer Lieblingsbibliotheken herumzugraben. Sie werden feststellen, dass sie nicht so mysteri?s sind, wie Sie denken, und Sie k?nnen viel lernen. Hier sind einige gute Ausgangspunkte:

• 11 Dinge, die ich aus JQuery Source Code (Paul Irish) gelernt habe
• Hinter den Kulissen von JQuery (James Padolsey)
• Reagieren Sie 16: Tief in der API-Kompatibilit?tsumschreibung unserer Front-End-UI-Bibliothek

Dieser Beitrag wurde mit Jacob Jacksons Beitrag aktualisiert. Jacob ist ein Webentwickler, Tech -Autor, Freiberufler und Open -Source -Mitarbeiter.

Das obige ist der detaillierte Inhalt vonErstellen Sie Ihre erste JavaScript -Bibliothek. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!