Wie Sie heute reaktionsschnelle Webkomponenten verwenden können

Vor ein paar Jahren habe ich angefangen, viel über Webkomponenten zu hören. Ich war ziemlich aufgeregt und habe sie dann total vergessen, als sich der Lärm setzte. Es stellte sich heraus, dass es eine gute Bewegung gab und die Unterstützung beginnt sich zu erhöhen. Insbesondere reaktionsschnelle Webkomponenten werden so festgelegt, wie wir das Responsive -Design nähern. So vielversprechend dies auch klingt, es gibt vier Fragen, die viele Entwickler da draußen wissen möchten, bevor sie heute anfangen:

werden sie…

• in den aktuellen Status des Web?
• Arbeitsbrowser arbeiten?
• passen Sie sich an den Raum an, in den sie fallen gelassen werden?
• Modulare Code fördern?

In diesem Artikel werden wir die Antworten auf jede dieser Fragen untersuchen!

Key Takeaways

• Webkomponenten sind eine W3 .
• reaktionsschnelle Webkomponenten können mithilfe von Techniken wie Medienabfragen, Flexbox, Elementabfragen und Attributen flexibler und anpassungsfähiger gemacht werden. Diese Techniken ermöglichen es den Komponenten, sich an verschiedene Bildschirmgrößen und Kontexte anzupassen, wodurch sie wirklich reagiert.
• Die Verwendung von Webkomponenten ermöglicht die Erstellung einer Bibliothek mit einer einzelnen Wahrheitsquelle für jede Komponente, reduziert die Wiederholung des Codes und das Aktivieren der Freigabe von Komponenten an andere Entwickler oder Website -Eigentümer. Dieser Ansatz fördert den modularen Code und vereinfacht den Ansatz zum reaktionsschnellen Design.

Was sind Webkomponenten?

Im Wesentlichen sind sie eine W3 -Spezifikation, mit der Sie Ihre eigenen HTML -Elemente erstellen können. Wenn Sie buchstäblich nichts über sie wissen, kann es sich lohnen, ein kurzes Lesen zu haben, da einige der Begriffe, die ich im Artikel verwende, ein grundlegendes Verständnis erfordern.

Warum sollte ich sie verwenden wollen?

Ein gutes Beispiel dafür, wenn Sie möglicherweise Webkomponenten verwenden möchten, wenn Sie eine Benutzeroberfläche erstellen, die im Browser nicht nativ vorhanden ist - Elemente wie Farbpflücker, Karussells, Akkorden oder Typen. Alternativ haben Sie wahrscheinlich einige Komponenten, die Sie ständig an verschiedenen Websites verwenden, die Sie jedes Mal wieder aufbauen können. Dies sind Dinge wie soziale Schaltflächen, Abonnieren von Formularen oder Benachrichtigungen. Mit Webkomponenten können Sie Ihr Markup, Stile und Skripte in eingekapselten Modulen mit HTML-Tags wie aufpassen, um sie zu verweisen. Dies scheint bekannt zu sein, wenn Sie Angular -Richtlinien verwendet oder Komponenten reagieren, aber der Vorteil ist hier, dass es im Browser und dem agnostischen Rahmen heimisch ist.

Webkomponenten ermöglichen es Ihnen, eine Benutzeroberfläche einmal zu erstellen und überall zu verwenden. Dies ist ideal für Projekte wie eine Lebensstilguide, bei der Sie für jede Ihrer Komponenten eine Bibliothek mit einer einzigen Wahrheitsquelle erstellen möchten. Dieser Ansatz bedeutet, weniger Code zu wiederholen und tragbare Komponenten zu haben, auf die Sie oder Ihr Team einfach in Ihre Schnittstelle verweisen können.

Ein weiterer großer Vorteil der Verwendung von Webkomponenten ist die Möglichkeit, diese Komponenten zu verpacken und mit anderen Entwicklern oder Website -Eigentümern zu teilen. Im Wesentlichen kann der Verbraucher eine Importanweisung in seine Webseite eingeben, z. B.

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

Verwenden Sie dann das benutzerdefinierte Element -Tag, das Sie in dieser Komponente definiert haben. Mit diesem in ihre Webseite importierte, können sie so viele Fälle der benutzerdefinierten Komponente auf ihrer Seite haben, wie sie es wünschen. Im Beispiel für das Abonnement-Formular können wir das Tag an mehreren Stellen auf der Seite verwenden. Wenn Sie dies tun, müssen Sie natürlich sicherstellen, dass die schöne Komponente, die Sie hergestellt haben, äußerst flexibel ist und über eine Reihe von Geräten und Bildschirmgrößen hinweg funktioniert.

Verwandeln Sie diese bösen Jungen in reaktionsschnelle Webkomponenten

Ich denke, der beste Weg zu demonstrieren ist mit Beispiel, also werde ich mit der Abonnementform fortfahren, die ein gemeinsames Stück UI ist, das sich nicht viel zwischen verschiedenen Websites und Implementierungen ändert.

Hier ist eine, die ich zuvor gemacht habe:

In meiner Webkomponentenvorlage habe ich ein grundlegendes Markup für das Formular.

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

Mein Markup und CSS sind in meiner Komponente versteckt, die den Schatten -DOM -Teil der Spezifikation verwendet. Dies gibt mir eine Kapselung und ermöglicht es mir, in meinem Code Etiketten- und Eingabegestellungen frei zu verwenden, ohne sich Sorgen zu machen, dass andere Stile in der übergeordneten Site bluteten oder in den Mine bluten.

Aus Klarheit und Kürze werde ich die anderen als für das Layout verwendeten Stile nicht aufschreiben. Ich habe eine Kombination aus Float: Links und Display: Tabelle verwendet, um dieses Layout zu erreichen, um zu verhindern, dass die Breiten einbrechen.

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

Ich werde HTML -Importe verwenden, um sie als Demonstration an die SitePoint -Site zu ziehen:

Jetzt sind wir alle eingerichtet, schauen wir uns einige reaktionsschnelle Techniken an.

Medienabfragen

Der klassische Ansatz, den wir kennen und lieben, ist noch lebendig und gut in reaktionsschnellen Webkomponenten. Diese können in Ihrer Vorlage angewendet werden, wenn Sie Ihre Komponente codieren, wenn Sie einige Haltepunkte backen möchten, oder Sie können einen Haken (beispielsweise eine Klasse verwenden) auf den Container anwenden, wenn Sie diese Entscheidung Ihrem Verbraucher überlassen möchten. In diesem Fall müssen wir nur die Schwimmer ausziehen und sie so einstellen, dass sie in voller Breite sind.

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

Medienabfragen werden jedoch nicht ausreichen, um uns diesmal zu retten.

Ich bin zufrieden mit meinen Anmeldeformularstilen und es funktioniert gut im Körper, aber was passiert, wenn der Website -Autor es in ihre Seitenleiste werfen möchte? Plötzlich sieht meine Form gequetscht aus und ist nicht wirklich verwendbar.

Dies liegt daran, dass die Komponente ihre Grenzen nicht bewusst ist - sie hat keinen Kontext.

Der springende Punkt der Webkomponenten ist, dass Sie sie überall fallen lassen und sie einfach funktionieren, oder? Dies ist also offensichtlich nicht der Fall, aber es gibt einige Techniken, mit denen Sie sicherstellen können, dass Ihre Komponenten reaktionsschnell und kontextuell sind.

Flexbox -Trick

Wenn Sie Webkomponenten verwenden möchten, können Sie nur moderne Browser unterstützen und sich nicht um IE9 kümmern. In diesem Fall ist ein bisschen Flexbox -Magie möglicherweise perfekt für Sie, um diese in reaktionsschnelle Webkomponenten zu verwandeln. Dies ist mein bevorzugter Ansatz, da kein zusätzliches JavaScript erforderlich ist.

Das Code -Beispiel hier zeigt noch einmal die Layoutstile, die ich verwendet habe:

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

Durch Einstellen des Containers zu Anzeigen: Flex; Flex-Wrap: Wrap, die .Form__item-Elemente werden nebeneinander erscheinen, aber wir müssen immer noch ein paar Anpassungen vornehmen, damit der Behälter, wenn er zu klein wird, gut stapeln.

Im .Form__Item habe ich die Flex -Kurzform von Flex verwendet: 1 0 320px; Dies bedeutet Flex -Begriffe - wachsen von einem, Flex schrumpfen von Null und Flex -Basis von 320 Pixel. Wenn Sie Flex-Wrap-Set auf Wrap haben, ist es nicht kleiner als die Grundlage, die wir festlegen (320px), aber es wird den Rest des verfügbaren Raums in Anspruch nehmen.

Ich habe eine ähnliche Behandlung wie das Etikett und die Eingangselemente angegeben. Ihre kombinierten Flex -Werte insgesamt 320, was bedeutet, dass sie sich bei kleineren Behältergrößen wie gewünscht verhalten.

Schauen wir uns mit diesen Anpassungen in der Seitenleiste von SitePoint die gleiche Form an:

viel besser! Es gibt jedoch mehr als einen Weg, eine Katze zu häuten.

Elementabfragen

Die Idee von Element -Abfragen ist, dass Sie die Funktionen von Medienquery -Typen, jedoch auf Komponentenebene, emulieren können - sehr praktisch für reaktionsschnelle Webkomponenten. Stellen Sie sich vor, Sie können so etwas in Ihrem CSS schreiben:

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

mit Elementabfragen, genau das können wir tun. Ziemlich mächtig, oder?

Leider ist diese Technik nativ nicht verfügbar, da Browser -Anbieter mit dem Potenzial befasst sind, unendliche Schleifen zu verursachen. Einige intelligente Personen haben jedoch Plugins geschrieben, um diese Funktionalität zu ermöglichen.

In meinem Beispiel habe ich CSS -Elementabfragen von Marc J Schmidt verwendet, was eine wirklich nette Implementierung ist. Es gibt auch die folgenden ähnlichen Projekte:

• elementary
• Element -Abfrage
• Eq.js

Verwenden Sie im Wesentlichen JavaScript, um die Breite der Komponente zu erkennen und ein Attribut so zu ändern, dass Sie es in CSS stylen können. Einige sind ereignisgesteuert und andere basierend auf der Größe.

<span><span><span><link</span> rel<span>="import"</span>
</span></span><span>      <span>href<span>="http://url.com/subscribe-form.html"</span>></span></span>

Mit der Kombination eines dieser Plugins und eines kleinen Code -Snippets, ähnlich wie das oben, können wir genau das gleiche Ergebnis wie die Flexbox -Implementierung in der Seitenleiste erzielen.

Attribute

Eines der coolen Dinge, die wir den Verbrauchern unserer reaktionsschnellen Webkomponenten anbieten können, ist eine API über Attribute. Zum Beispiel können Sie ein Attribut namens Layout einrichten und Größen von „klein“ und „groß“ haben. Unser Verbraucher der Komponente könnte sie dann wie folgt verwenden:

<span><span><span><ul</span> class<span>="form"</span>></span> 
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Name:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span>  <span><span><span><li</span> class<span>="form__item"</span>></span>
</span>    <span><span><span><label</span> for<span>="name"</span>></span>Email:<span><span></label</span>></span>
</span>    <span><span><span><input</span> id<span>="name"</span> name<span>="name"</span> type<span>="text"</span>></span>
</span>  <span><span><span></li</span>></span>
</span><span><span><span></ul</span>></span></span>

Dies würde die Stile für die kleine Implementierung auslösen.

Im Schattendom wird das enthaltende Element als: Host bezeichnet. Ein Beispiel könnte so aussehen:

<span><span>.form__item</span> {
</span>  <span>display: table;
</span>  <span>float: left;
</span>  <span>width: 50%;  
</span><span>}
</span>
<span>label {
</span>  <span>display: table-cell;
</span>  <span>width: auto;
</span><span>}
</span>
<span>input {
</span>  <span>display: table-cell;
</span>  <span>width: 100%;
</span><span>}</span>

Dies würde dann dem Komponentenverbraucher ermöglichen, ein einfaches JavaScript zu schreiben, um zwischen den verschiedenen Größen zu flippten, die Sie ihnen zur Verfügung gestellt haben. Dies bedeutet, dass Sie es dem Verbraucher überlassen können, anstatt zusätzliches JavaScript in Ihr Modul zu laden, zu entscheiden, wie sie sich daran einbinden möchten. Dies ermöglicht es Ihrer Komponente, zukünftiger Beweise zu werden.

Probieren Sie es selbst aus!

Wenn Sie die Flexbox -Version sehen möchten, auf die ich in dieser Demo in Aktion auf Ihrer eigenen Maschine verweise, können Sie Folgendes in Chrome machen:

1. Installieren Sie die CORS -Chrome -Erweiterung und schalten Sie sie ein. Dies dient dazu, HTML -Importe von externen Websites zu arbeiten.
2. entweder diese Seite aktualisieren oder eine Website in einer neuen Registerkarte oder in einem neuen Fenster öffnen, damit die Erweiterung einsetzt.
3. In Chrome Developer Tools fügen Sie dies in das -Tag: Fügen Sie hinzu:

   <span><span>@media (max-width: 30em)</span> {
   </span>  <span><span>.form__item</span> {
   </span>    <span>float: none;
   </span>    <span>width: 100%;
   </span>  <span>}
   </span><span>}</span>

4. Fügen Sie schließlich hinzu:

   <span><span>.form</span> {
   </span>  <span>display: flex;
   </span>  <span>flex-wrap: wrap;
   </span><span>}
   </span>
   <span><span>.form__item</span> {
   </span>  <span>align-items: center;   
   </span>  <span>display: flex;
   </span>  <span>flex: 1 0 320px;
   </span>  <span>flex-wrap: wrap;
   </span>  <span>max-width: 100%;
   </span><span>}       
   </span>
   <span>label {
   </span>  <span>flex: 1 0 90px;
   </span><span>}
   </span>
   <span>input {
   </span>  <span>flex: 1 0 230px;
   </span>  <span>width: 100%;
   </span><span>}</span>

   irgendwo im und Sie sollten sehen, wie mein Abonnement Form automatisch durchgezogen wird. Genießen Sie!

Schlussfolgerung

Die oben genannten Ansätze können tatsächlich für jede UI -Entwicklung verwendet werden, aber sie eignen sich besonders gut für reaktionsschnelle Webkomponenten aufgrund ihrer wiederverwendbaren und gemeinsam genutzbaren Natur.

Wenn Sie keine Webkomponenten ausgecheckt haben, würde ich Sie dringend dazu ermutigen. Während die vollständige Spezifikation derzeit nur nativ in Chrome und Opera erhältlich ist, sind die anderen Browser -Anbieter nicht weit hinter sich.

Wenn Sie interessant sind, um mehr über Responsive Webdesign zu erfahren, lesen Sie unser neues Buch, Jump Start Responsive Web Design, geschrieben von Chris Ward.

häufig gestellte Fragen (FAQs) zu reaktionsschnellen Webkomponenten

Was sind die wichtigsten Elemente einer gut gestalteten reaktionsschnellen Webkomponente? Es sollte ein Flüssigkeitsnetzsystem haben, mit dem das Layout entsprechend der Bildschirmgröße eingestellt werden kann. Es sollte auch flexible Bilder und Medien haben, die die Größenordnung für den Bildschirm anpassen können. Darüber hinaus sollten Medienabfragen vorhanden sein, die es der Website ermöglichen, verschiedene CSS -Stilregeln für verschiedene Geräte zu verwenden, die auf Merkmalen wie Bildschirmgröße, Auflösung und Orientierung basieren. Schließlich sollte es in Bezug auf die Ladezeit und -leistung effizient sein. angewendet basierend auf der Größe eines übergeordneten Containers und nicht auf dem Ansichtsfenster. Dies bedeutet, dass eine Komponente ihr Layout basierend auf einer eigenen Größe anpassen kann, wodurch sie wirklich reagiert. Dies ist besonders nützlich für Komponenten, die in verschiedenen Kontexten wiederverwendet werden und sich an ihre Umgebung anpassen müssen. Erstellen von reaktionsschnellen Webkomponenten. Es kann verwendet werden, um das DOM zu manipulieren, Ereignisse zu verarbeiten und dynamische Inhalte zu erstellen. Es kann auch in Verbindung mit CSS -Medienabfragen verwendet werden, um komplexere reaktionsschnelle Verhaltensweisen zu erstellen. Beispielsweise kann JavaScript verwendet werden, um verschiedene Skripte oder Inhalte basierend auf der Bildschirmgröße oder der Gerätefunktionen zu laden. Zentrale Überlegung beim Entwerfen reaktionsschneller Webkomponenten. Dies schließt sicher, dass der Text an allen Bildschirmgrößen lesbar ist, dass interaktive Elemente groß genug sind, um auf Touchscreens leicht abgebildet zu werden, und dass die Website mit einer Tastatur für diejenigen, die keine Maus verwenden können, navigierbar sind. Darüber hinaus sollten Sie semantische HTML verwenden, um den Lesern Kontext und Bedeutung zu bieten, und sicherstellen, dass der Farbkontrast für Personen mit Sehbehinderungen ausreicht. überwinden? Diese können durch den Einsatz eines mobilen Ansatzes, das Testen auf einer Vielzahl von Geräten, die Erkennung von Funktionen überwunden werden, um die Kompatibilität zu gewährleisten und Bilder und Skripte für die Leistung zu optimieren.

Wie wirkt sich eine reaktionsschnelle Webkomponente SEO aus? Die Algorithmen von Google bevorzugen Websites, die mobilfreundlich sind, und Responsive Design ist ein wesentlicher Aspekt davon. Darüber hinaus vermeidet eine einzelne reaktionsschnelle Site anstatt separate Desktop- und Mobilversionen Probleme mit doppelten Inhalten, die sich negativ auf SEO auswirken können.

Wie kann ich die Reaktionsfähigkeit meiner Webkomponenten testen? sind mehrere Tools und Techniken zum Testen der Reaktionsfähigkeit von Webkomponenten. Dazu gehört die Größe Ihres Browser-Fensters, um festzustellen, wie sich das Layout anpasst, die Verwendung der Geräteemulationsfunktionen in Browser-Entwickler-Tools sowie die Verwendung von Online-Tools wie dem mobilen Test von Google. 🎜>

Die Zukunft reaktionsschneller Webkomponenten beinhaltet wahrscheinlich fortschrittlichere Techniken und Technologien. Dies kann Dinge wie Containerabfragen umfassen, die derzeit entwickelt werden, sowie die Verwendung von KI und maschinellem Lernen, um Layouts basierend auf dem Benutzerverhalten und den Vorlieben anzupassen. ? Dazu gehören Online -Tutorials und Kurse, Bücher und Community -Foren. Außerdem kann das Erstellen Ihrer eigenen reaktionsschnellen Komponenten und das Studium des Code anderer eine großartige Möglichkeit sein. Sind viele Frameworks und Bibliotheken verfügbar, mit denen Sie reaktionsschnelle Webkomponenten erstellen können. Dazu gehören unter anderem Bootstrap, Foundation und React. Diese Tools bieten vorentwickelte Komponenten und Layouts, die bereits reagieren und Ihnen Zeit und Mühe sparen. Es ist jedoch immer noch wichtig, die zugrunde liegenden Prinzipien des reaktionsschnellen Designs zu verstehen, um diese Tools effektiv zu verwenden.

Das obige ist der detaillierte Inhalt vonWie Sie heute reaktionsschnelle Webkomponenten verwenden können. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!