Erstellen Sie Ihre erste JavaScript -Bibliothek

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!