Erstellen von jQuery-Komponenten in WordPress
Die Frontend-Entwicklung hat in den letzten Jahren große Fortschritte gemacht (und tut dies auch weiterhin) durch den Einsatz von CSS-Präprozessoren und verschiedenen JavaScript-basierten Technologien.
Das Schöne ist, dass all dies im Rahmen der WordPress-Entwicklung noch verwendet werden kann; Da WordPress jedoch jQuery enthält, ist es nicht ungewöhnlich, weiterhin jQuery-basiertes JavaScript zu schreiben.
Trotz all der verschiedenen Technologien (wie Angular, Vue, React, etc.) verwende ich immer noch jQuery und ES6 mehr als andere Bibliotheken und Tools.
Für einfache Aufgaben ist dies kein Problem, aber wenn Sie beispielsweise fortgeschrittenere Komponenten basierend auf der Antwort eines API-Aufrufs erstellen müssen, kann die Verwendung von jQuery etwas schwerfällig sein.
Das bedeutet nicht, dass es nicht verwendet werden kann – und ich werde durchgehen, wie man es verwendet, um Komponenten vorübergehend dynamisch zu erstellen – aber ich denke, es stellt einen Fall dar, wenn andere Optionen variabler sind.
Aber dazu mehr am Ende des Beitrags.
Erstellen von jQuery-Komponenten in WordPress
Wenn ich mich auf die Idee einer Komponente beziehe, denke ich an eine Kombination von Elementen, die zusammenarbeiten, um ein komplexeres Element zu erstellen.
Angenommen, Sie führen einen API-Aufruf durch und müssen dann mithilfe der Antwort eine Komponente erstellen, die aus anderen Elementen besteht.
Definieren und Zeichnen einer Komponente
Für den Anfang denke ich, dass dies eine gute Möglichkeit ist, eine Komponente zu definieren: Ein Element, das aus einer Kombination von Elementen besteht.
Zumindest werde ich das für diesen speziellen Beitrag verwenden.
Als nächstes, wie könnten wir dies in Begriffen visualisieren, bevor wir es kodifizieren? Vielleicht so etwas:
All dies basiert wiederum auf der Idee, eine API-Anfrage zu stellen und die Daten zu bearbeiten.
Den API-Aufruf tätigen
Das Durchführen eines API-Aufrufs mit der WordPress-API ist etwas, das ich in einigen Beiträgen behandelt habe (und wenn Sie nach dem sichersten Weg suchen, empfehle ich Ihnen, diesen Beitrag zu lesen ).
Aber der Ablauf der Kontrolle würde in etwa so aussehen:
Und der Code dafür würde in etwa so aussehen :
$.get(acme_ajax_object.ajax_url, {
action: 'get_data',
security: acme_ajax_object.security
}, function(response) {
// More to come...
});Aber das bringt uns immer noch nicht dazu, die Komponente aus der Antwort zu bauen.
Arbeiten mit der Antwort
In diesem nächsten Teil erfahren Sie, wie Sie Ihr JavaScript schreiben. Ich behaupte nicht, dass die Art und Weise, wie ich es tue, es ist, aber es ist eine Art, es zu tun.
Wie auch immer, gehen Sie für diesen Beitrag davon aus, dass wir einige Daten von der API zurückerhalten werden und dass wir diese garantiert haben (dies verhindert, dass wir Schutzklauseln schreiben müssen).
Außerdem ermöglicht es uns, die notwendigen Variablen zum Erstellen unserer Komponente zu füllen. Daher halte ich den Code so schlank wie möglich.
Von hier aus können wir nun eine Methode einrichten, die eine Komponente erstellt und das Ergebnis zurückgibt, mit dem wir sie an das DOM anhängen können.
Alles zusammenfügen
Basierend auf dem obigen Code sollte relativ klar sein, was Sie tun müssen, um die Komponente zu erstellen.
Trotzdem ist das Zusammenfügen ein Prozess, der Folgendes erfordert:
- die Anfrage stellen,
- Antwort lesen,
- Erstellen einer Komponente basierend auf der Antwort
Der obige Code sollte selbsterklärend sein, aber wenn nicht, macht er Folgendes :
- Entnahme von Informationen aus der Antwort wie Titel, Bild-URL und Beschreibung,
- Erstellen von Elementen von jedem von diesen,
- Anhängen an ein div- Element
- Zurückgeben des div- Elements, nachdem die verschiedenen Teile daran angehängt wurden.
Von dort aus können Sie dann das Element – die Komponente – nehmen und es an einen Container anhängen (wie zuvor im Code gezeigt) und dann mit den restlichen Informationen aus der Antwort fortfahren.
Verwenden Sie andere JavaScript-Technologien?
Wie am Anfang des Beitrags erwähnt, ist dies eine Menge Arbeit in Bezug auf jQuery, um eine Komponente zu erstellen, die dem DOM hinzugefügt werden kann.
Kombinieren Sie dies mit der reaktionsschnellen Natur (nicht reaktionsschnell in Bezug auf mobiles Design, sondern in Bezug auf Teile einer Anzeige, die auf Änderungen in der Präsentationsebene reagieren), und Sie haben ein ziemlich gutes Argument dafür, eine andere Technologie zu verwenden, um so etwas zu tun.
Aber dennoch gibt es diese Projekte, die einen bestimmten Stack erfordern, und wenn jQuery Teil dieses Stacks ist, dann ist dies eine Möglichkeit, genau das zu tun.