Erstellen Sie Ihre erste JavaScript -Bibliothek

Haben Sie jemals erstaunt, dass Sie in der Magie von Reace? 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 vollständig vorgestellte 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 jede mögliche Verwendung unserer Bibliothek abdecken. Zum Beispiel sind unsere Methoden Vorbereitung nur dann gültig, wenn Sie sie über unsere Bibliotheksinstanzen weitergeben.

---

1. Framework zum Erstellen von Bibliotheken

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

 Exportklasse Dome {Constructor (Selektor) {}} 

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

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

Wir benötigen 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.

kurze Diskussion über das Konzept

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 erstellen wir ein dome Objekt, das mehrere DOM -Knoten ( $ ("li"). text () ) erstellen, und Sie erhalten eine einzelne Zeichenfolge, die alle Elementtexte enthält, die miteinander verbunden sind. 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.

Gibt die Codierung

zurück, Mapone ruft 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 = map (Callback); Beachten Sie, dass dies nur über die Elemente iteriert und ihren Text festgelegt wird. Wenn wir erhalten, geben wir die Methode <code> Mapone </code> des Elements zurück: Wenn wir an mehreren Elementen arbeiten, wird dies ein Array zurückgeben.  <p> <code> HTML </code> ist fast die gleiche mit <code> Text </code> Methode, außer dass sie <code> InnerHtml </code> verwendet. </p> <pre class="brush:php;toolbar:false"> html (html) {if (typeof html! .  <hr> <ol start="5"> <li> <h2> Betriebsklasse </h2> </li> </ol> <p> Als nächstes müssen wir in der Lage sein, Klassen hinzuzufügen und zu löschen. Schreiben wir also die Methoden <code> addClas </code> und <code> removeclass </code>. </p> <p> Unsere <code> addClass </code> verwendet die Methode <code> classlist.add </code> 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. </p> <pre class="brush:php;toolbar:false"> addClas (Klassen) {return this.foreach (function (el) {if (typeof classes!  <p> Was ist jetzt mit dem Löschen der Klasse? Dazu tun Sie fast dasselbe. Verwenden Sie einfach die Methode <code> classlist.remove </code>. </p> <ol start="6"> <li> <h2> Verwenden Sie Attribute </h2> </li> </ol> <p> Weiter fügen wir die Funktion <code> attr </code> hinzu. Dies ist einfach, da es fast die gleiche ist wie unsere Methode <code> HTML </code>. 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. </p> <pre class="brush:php;toolbar:false"> attr (attr, val) {if (typeof val! Die Methode <code> setAttribute </code>. Andernfalls verwenden wir die Methode <code> getAtTribute </code>.  <ol start="7"> <li> <h2> Elemente erstellen </h2> </li> </ol> <p> Wir sollten in der Lage sein, neue Elemente zu erstellen, und jede gute Bibliothek kann dies tun. Dies ist natürlich als Methode der <code> Dome </code> -Klasse bedeutungslos. </p> <pre class="brush:php;toolbar:false"> 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 Methode attr angewendet, und der Textinhalt wird über die Methode Text auf das Objekt Dome angewendet. So ist dies tatsächlich erledigt: Wir erstellen ein Element und senden es direkt an das neue Objekt Dome .

Aber jetzt erstellen wir neue Elemente, wir möchten sie in das DOM einfügen, oder?

8. Add- und Präparationselemente. 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); Bestehende Elemente zu einem oder mehreren vorhandenen Elementen 

Ich verwenden "neue", um Elemente darzustellen, die noch nicht in der DOM sind; Erläutern Sie jetzt Schritt für Schritt:

 append (els) {} 

Wir erwarten els ein dome Objekt. 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 möchten.

Wenn wir anhängen, enthält der als Parameter übergebene externe Dome . Wenn wir also nur ein einzelnes Element an ein einzelnes Element anhängen, sind alle beteiligten Knoten Teil ihrer jeweiligen prepend Methoden.

9. Löschen Sie das Element

Zur Vollständigkeit fügen wir eine entfernen Methode hinzu. Dies ist sehr einfach, da wir nur die Methode removeChild verwenden müssen. Um die Dinge zu erleichtern, verwenden wir die foreach -Schooks, um den Durchgang umzukehren. Nicht schlecht, richtig?

10. Verwenden von Ereignissen

Letzte, aber nicht zuletzt werden wir einige Ereignishandlerfunktionen schreiben.

Siehe die Methode auf und wir werden sie diskutieren:

 auf (evt, fn) {return this.foreach (Funktion (el) {el.addeventListener (evt, fn, false);}); Wir müssen nur die Elemente iterieren und die Methode <code> addEventListener </code> verwenden. Die Funktion <code> off </code> (sie ist mit Ereignishandler ausgestattet) ist fast gleich: Code> Dome , fügen Sie es einfach in das Skript ein und importieren Sie es.  <pre class="brush:php;toolbar:false"> Import {Dome, erstellen} aus "./dome.js" 

Von dort aus können Sie es so verwenden:

 New Dome ("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 Ihnen 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. 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!