Detaillierte Erläuterung der Grundkenntnisse zur Front-End-Komponentenbildung

Hier erfahren wir mehr über die Front-End -Komponentenbildung , den wichtigsten Teil der Front-End-Architektur.

Wenn es um Front-End-Architektur geht, gibt es eigentlich zwei heiße Themen in der Front-End-Architektur: eines ist die Komponentenbildung und das andere das Architekturmodell. Das Konzept der Komponentenbildung begann mit der Untersuchung der Erweiterung von HTML-Tags und entwickelte sich schließlich zu einem Front-End-Architektursystem. Und seine wichtigste Funktion besteht darin , die Wiederverwendbarkeit des Front-End-Codes zu verbessern .

Das Architekturmuster ist das Entwurfsmuster, mit dem jeder besonders vertraut ist, wie z. B. MVC , MVVM usw. Dieses Thema befasst sich hauptsächlich mit der Interaktion zwischen dem Front-End und der Datenlogikschicht.

Daher kann man sagen, dass die Komponentenbildung in der Front-End-Architektur höchste Priorität hat. In der tatsächlichen Entwicklung ist die Komponentenbildung oft wichtiger als der Architekturmodus. Denn die Komponentenbildung bestimmt direkt die Code-Wiederverwendungsrate eines Front-End-Teams, und ein gutes Komponentenbildungssystem kann einem Front-End-Team dabei helfen, seine Code-Wiederverwendungsrate zu verbessern und so die Gesamteffizienz des Teams zu steigern .

Durch die Erhöhung der Wiederverwendungsrate verringert sich die Menge an Code, die jeder wiederholt schreibt, die Effizienz steigt und die psychische und mentale Belastung der Teammitglieder wird deutlich geringer.

Daher ist es sehr wichtig, die Komponentenbildung zu lernen.

Hier beginnen wir mit dem Verständnis der Komponentisierung und der Grundbestandteile einer Komponente.

Grundlegende Konzepte von Komponenten

Komponenten werden in Module und Objekte unterteilt. Komponenten sind eng mit der Benutzeroberfläche verknüpft, daher können wir uns Komponenten in gewissem Sinne als spezielle Module oder spezielle Objekte vorstellen.

Die Komponentisierung ist sowohl對象als auch模塊

Die Besonderheit der Komponentisierung besteht darin, dass sie über eine Baumstruktur kombiniert werden kann und über ein gewisses Maß an Vorlagenkonfigurationsmöglichkeiten verfügt. Dies ist das Grundkonzept unserer Komponente.

Der Unterschied zwischen Objekten und Komponenten

Schauen wir uns zunächst das Objekt an, das aus drei Hauptelementen besteht:

1. Eigenschaften
2. Methoden
3. Nachlass

Ein normales Objekt in JavaScript kann durch seine Eigenschaften, Methoden und Vererbungsbeziehungen beschrieben werden. Die Vererbung verwendet hier die Prototypenvererbung in JavaScript.

Die hier erwähnten „gewöhnlichen Objekte“ umfassen keine komplexen Funktionsobjekte oder andere spezielle Objekte. In JavaScript sind Eigenschaften und Methoden integriert.

Im Vergleich zu Komponenten enthalten Komponenten umfangreichere semantische Elemente. Die Elemente in Komponenten sind:

• Eigenschaften
• Methoden
• Erben
• Attribut
• Konfiguration und Status
• Ereignis
• Lebenszyklus
• Kinder

Properties und Attribute haben im Englischen sehr unterschiedliche Bedeutungen, werden aber oft mit „Eigenschaften“ übersetzt. Wenn beide Wörter vorkommen, wird Attribute mit „Merkmal“ und Properties mit „Attribut“ übersetzt. Wie unterscheiden wir diese beiden Elemente? Im weiteren Verlauf des Artikels erfahren wir mehr darüber.

Als nächstes folgt die Config der Komponente. Dabei handelt es sich um eine Konfiguration für die Komponente. Wir verwenden Config häufig, wenn wir ein Objekt in einem Konstruktor erstellen. Der Parameter, den wir an diesen Konstruktor übergeben, heißt " Config ".

Komponenten haben auch state . Wenn der Benutzer eine Aktion ausführt oder bestimmte Methoden aufgerufen werden, ändert sich der state . Dies ist der Zustand der Komponente, der sich bei einigen Verhaltensweisen ändert. state und properties , attributes und config sind möglicherweise bekannt oder gleich.

event ist das Bewusstsein des „Ereignisses“, und ein Ereignis wird durch eine Komponente nach außen übermittelt. Unsere Komponenten werden hauptsächlich verwendet, um Dinge wie die Benutzeroberfläche zu beschreiben, und grundsätzlich verfügen sie über diese Art von Ereignis, um eine Art von Interaktion zu implementieren.

Jede Komponente hat lifecycle , der später im Artikel ausführlich besprochen wird.

children sind ein sehr wichtiger Bestandteil einer Komponente. children sind außerdem eine notwendige Voraussetzung in einer Komponente, da es ohne children Komponenten unmöglich ist, eine Baumstruktur zu bilden, und die Fähigkeit zur Beschreibung der Schnittstelle erheblich schlechter wäre.

Es gab früher einige beliebte Drag-and-Drop-Systeme, bei denen wir einige vorgefertigte UI-Komponenten auf die Seite ziehen konnten, um unsere Systemschnittstelle zu erstellen. Später stellte ich jedoch fest, dass neben der Drag-and-Drop-Funktion in bestimmten Bereichen auch einige funktionale Anforderungen hinsichtlich der automatischen Sortierung und Verschachtelung von Komponenten erforderlich sind. Derzeit funktioniert es nicht, wenn zwischen den Komponenten keine Baumstruktur vorhanden ist.

Schließlich fügen Komponenten viele semantisch verwandte Konzepte basierend auf Objekten hinzu, was Komponenten zu einem Konzept macht, das sich sehr gut für die Beschreibung der Benutzeroberfläche eignet.

Komponente

Lassen Sie uns ein Diagramm verwenden, um die Komponenten besser zu verstehen.

Die direkteste Quelle für Änderungen an Komponenten sind Benutzereingaben und -operationen. Wenn ein Benutzer beispielsweise eine Option in unserer Auswahlfeldkomponente auswählt, ändern sich unser state und sogar unsere untergeordneten children .

Die Situationen auf der rechten Seite der Abbildung stellen die Beziehungen zwischen Komponentenentwicklern und Komponenten dar. Eine davon besteht darin, dass der Entwickler den Markup Code der Komponente verwendet, um die Komponente zu beeinflussen. Tatsächlich verwenden Entwickler Attribute , um einige Funktionen oder Eigenschaften von Komponenten zu ändern.

Attribute sind eine deklarative Sprache und auch標記型代碼Markup Code . Und Markup-Code ist nicht unbedingt eine XML-ähnliche Sprache wie HTML. Im großen Ökosystem der Auszeichnungssprachen gibt es tatsächlich viele Sprachen, mit denen sich die Struktur einer Schnittstelle beschreiben lässt. Die gängigste Methode basiert jedoch auf einem XML-System. In unserem Webbereich ist XML am gebräuchlichsten. JSX kann auch als eine in eine Programmiersprache eingebettete XML-Struktur verstanden werden.

Zusätzlich zur Verwendung von Attribute können Entwickler auch Eigenschaften verwenden, um Komponenten zu beeinflussen. Diese Komponente selbst hat Property . Wenn ein Entwickler die Eigenschaften einer Komponente ändert, ändert sich die Komponente. Dies ist dasselbe Konzept wie屬性Property im Objekt.

Sind Attribut und Eigenschaft dasselbe? Manchmal ist dies der Fall, manchmal nicht. Es hängt alles vom Designer des Komponentensystems ab. Der Implementierer oder Designer einer Komponente kann attribute und property vereinheitlichen. Wir können sogar state , config , attribute und property vereinheitlichen.

Dann gibt es方法method , die verwendet wird, um einen komplexen Prozess zu beschreiben, aber Property in JavaScript dürfen Methoden wie get und set haben, sodass die Funktionen von method und property letztendlich ähnlich sind.

Hier können wir also das Konzept festlegen, dass Entwickler, die Komponenten verwenden, method und property verwenden, die die Elemente dieser Komponenten sind. Wenn ein Komponentenentwickler jedoch eine Nachricht an den Programmierer weitergeben muss, der die Komponente verwendet, ist事件event erforderlich. Wenn eine Komponente aufgrund eines bestimmten Verhaltens oder Ereignisses eine Änderung auslöst, sendet die Komponente event Ereignisnachricht an den Benutzer. Die Richtung des event ist hier also umgekehrt und wird vom Bauteil nach außen übertragen.

Durch dieses Bild können wir die Funktionen jedes Elements der Komponente und die Richtung ihres Informationsflusses klar verstehen.

Attribut

Unter allen Elementen einer Komponente sind Attribute und Property die komplexesten.

Unser Verständnis des englischen Wortes „ Attribute legt eher Wert auf die Beschreibbarkeit . Wenn wir beispielsweise beschreiben, dass eine Person viel Haar hat, gutaussehend ist und helle Haut hat, sind das alles Attribute oder Beschreibungen der Merkmale und Eigenschaften von etwas.

Property ist eher ein untergeordnetes Verhältnis . Beispielsweise stellen wir während der Entwicklung häufig fest, dass ein Objekt eine Property aufweist, die ein anderes Objekt ist. Zwischen ihnen besteht mit hoher Wahrscheinlichkeit eine untergeordnete Beziehung, und das untergeordnete Objekt ist dem übergeordneten Objekt untergeordnet. Aber auch hier gibt es einen Sonderfall. Bei einer schwachen Referenz verweist ein Objekt auf ein anderes Objekt, was ein völlig anderes Konzept ist.

Oben geht es um den Unterschied zwischen diesen beiden Wörtern im Englischen. In tatsächlichen Anwendungsszenarien gibt es jedoch auch Unterschiede.

Da es sich bei Property um untergeordnete Beziehungen handelt, werden sie häufig in unserer objektorientierten Programmierung verwendet. Attribute wurde ursprünglich in unserem XML verwendet. Manchmal sind sie gleich und manchmal sind sie unterschiedlich.

Attribut vs. Eigenschaft

Hier verwenden wir einige Beispiele, um den Unterschied zwischen Attribut und Eigenschaft zu verdeutlichen. Wir können uns Szenarien ansehen, in denen sie in HTML nicht gleichwertig sind.

Attribut:

<my-component Attribut="v" />
<Skript>
 meineKomponente.getAttribute('a')
 myComponent.setAttribute('a', Wert)
</Skript>

• Attribute in HTML können über HTML-Attribute festgelegt werden
• Es kann auch über JavaScript gesetzt werden

Eigentum:

meineKomponente.a = "Wert";

• Hier wird ein bestimmtes Element definiert: a = 'Wert'
• Dies ist kein Attribut, sondern eine Eigenschaft.

Viele Studenten denken, dass es sich dabei lediglich um zwei verschiedene Schreibweisen handelt, tatsächlich unterscheiden sie sich jedoch in ihrem Verhalten.

Klassenattribut

<div Klasse="Klasse1 Klasse2"></div>
<Skript>
 var div = document.getElementByTagName('div');
 div.className // Ausgabe ist Klasse1 Klasse2	
</Skript>

In der Anfangszeit von JavaScript war „Class“ ein Schlüsselwort. Daher durfte das frühe Schlüsselwort „class“ nicht als Attributname verwendet werden. Dies wurde nun jedoch geändert, Schlüsselwörter können auch als Attributnamen verwendet werden.

Um diese Verwendung des Schlüsselwortes zu ermöglichen, wurde ein Kompromissdesign in HTML erstellt. In HTML heißt das Attribut weiterhin class , im DOM-Objekt wird die Eigenschaft jedoch zu className . Die beiden befinden sich jedoch immer noch in einer sich gegenseitig reflektierenden Beziehung, und diese magische Beziehung führt die Menschen oft in einige Fallstricke.

Wenn wir beispielsweise in React className schreiben, wird die Klasse automatisch festgelegt.

Style-Eigenschaft

Jetzt gibt es in der JavaScript-Sprache keine Inkonsistenz zwischen Klasse und Klassenname. Wir können div.class verwenden. Allerdings wird die Namensklasse in HTML immer noch nicht unterstützt. Dieses Problem ist auf historische Altlasten zurückzuführen.

Manchmal ist ein Attribut eine Zeichenfolge, während eine Eigenschaft ein Objekt ist, das die Zeichenfolge in eine semantische Zeichenfolge umwandelt. Das typischste ist Style .

<div Klasse="Klasse1 Klasse2" Stil="Farbe:blau"></div>
<Skript>
 var div = document.getElementByTagName('div');
 div.style // Dies ist ein Objekt</script>

Das Style-Attribut in HTML ist eine Zeichenfolge, und wir können getAttribute und setAttribute verwenden, um dieses Attribut abzurufen und festzulegen. Wenn wir jedoch die Style-Eigenschaft verwenden, erhalten wir eine Schlüssel- und Wertestruktur.

Href-Attribut

In HTML sind die Bedeutungen des href Attributs und der href-Eigenschaft sehr ähnlich. Seine Eigenschaft ist jedoch die aufgelöste URL.

Der Wert unseres href ist beispielsweise „//m.taobao.com“. Zu diesem Zeitpunkt basiert das vorherige http- oder https-Protokoll auf der aktuellen Seite, sodass der href hier erneut kompiliert werden muss, um auf das Protokoll der aktuellen Seite zu reagieren.

Alle, die die Konvertierung von http auf https durchgeführt haben, sollten wissen, dass wir, wenn wir unsere Website auf das https-Protokoll umstellen, alle fest codierten http- oder https-URLs so ändern müssen, dass sie // verwenden.

Was auch immer wir in href schreiben, wird herauskommen, das ist das Attribut. Wenn das Problem gelöst wird, geht es in unser Eigentum über.

<a href="//m.taobao.com" rel="externes Nofollow" ></a>
<Skript>
 var a = document.getElementByTagName('a');
 // Das Ergebnis ist „http://m.taobao.com“, diese URL ist das Ergebnis der Auflösung // also ist dies Eigenschaft
 ein.href;
 // Und das ist „//m.taobao.com“, was genau dasselbe ist wie im HTML-Code// Das ist also das Attribut
 a.getAttribute('href');
</Skript>

Wir können im obigen Code auch sehen, dass wir gleichzeitig auf Eigenschaften und Attribute zugreifen können. Obwohl sie sich semantisch sehr ähneln, handelt es sich nicht um dasselbe.

Aber wenn wir eines von beiden ändern, ändert sich auch das andere . Dies ist ein Phänomen, dem wir Aufmerksamkeit schenken müssen.

Eingabe und Wert

Dies ist das magischste Paar und auch der Wert ist ein besonderer Tiefgang.

Viele von uns denken, dass die Werte in Eigenschaften und Attributen völlig gleichwertig sind. Eigentlich nicht. Der Eingabewert in diesem Attribut entspricht dem Standardwert eines Wertes. Unabhängig davon, ob der Benutzer einen Wert in die Eingabe eingibt oder der Entwickler JavaScript verwendet, um der Eingabe einen Wert zuzuweisen, ändert sich das Attribut der Eingabe nicht.

Beim Anzeigen der Eingabe wird die Eigenschaft zuerst angezeigt, sodass der Wert im Attribut einem Standardwert entspricht. Dies ist eine sehr bekannte Falle. Wenn Sie JQuery in den Anfangstagen verwendet haben, werden Sie denken, dass prop und attr dasselbe sind, aber hier tappen Sie in die Falle.

Deshalb wurde für die JQuery-Bibliothek später eine Methode namens „val“ entwickelt, sodass wir nicht über den Wert des Attributs oder der Eigenschaft nachdenken müssen, sondern direkt den bereitgestellten Wert verwenden können, um den Wert abzurufen.

Einerseits vertiefen wir unsere Kenntnisse über HTML-Eigenschaften und -Attribute. Andererseits macht es uns bewusst, dass selbst bei einem von den besten Computerexperten entwickelten Kennzeichnungssystem das Problem auftreten kann, dass zwei ähnliche Attribute nicht gleichwertig sind. Wenn wir also aufgefordert würden, ein Tagging-System zu entwerfen, würden wir Eigenschaften und Attribute gleichwertig machen oder nicht? Nachdem wir uns das gesamte Wissen über Komponenten angeeignet haben, wollen wir diese Frage gemeinsam beantworten.

So entwerfen Sie Komponentenzustände

Hier analysieren wir die Unterschiede zwischen property , attribute , state und config im Komponentendesign.

Hier hat Lehrer Winer für uns eine Tabelle zusammengestellt, die in vier Szenarien unterteilt ist:

• Markup-Set – Verwenden Sie Tags zum Festlegen
• JavaScript-Set - Verwenden Sie JavaScript-Code zum Festlegen
• JavaScript-Änderung ——Verwenden Sie JavaScript-Code zum Ändern
• Änderung der Benutzereingabe – Geändert durch Eingabe des Endbenutzers

Lassen Sie uns also nacheinander darüber sprechen:

• Eigentum

❌ Es kann nicht durch eine statische deklarative Sprache wie Markup festgelegt werden
✅ Aber es kann durch JavaScript gesetzt und geändert werden
❓ In den meisten Fällen sollte eine Eigenschaft nicht durch Benutzereingaben geändert werden. In manchen Fällen kann sie jedoch aus unserer Geschäftslogik stammen und durch Benutzereingaben geändert werden.

• Attribut
  

❓ Benutzereingaben ändern es nicht unbedingt, genau wie Property
✅ Kann durch Markup und JavaScript festgelegt und auch durch JavaScript geändert werden

• Zustand

❌ Der Status wird innerhalb einer Komponente geändert, nicht von außerhalb. Wenn wir eine Komponente so entwerfen möchten, dass ihr Zustand von außen geändert werden kann, gerät der Zustand innerhalb unserer Komponente außer Kontrolle. Da wir nicht wissen, wann der Status unserer Komponente außerhalb der Komponente geändert wird, kann die Konsistenz unseres Status nicht garantiert werden.
✅ Aber als Komponentendesigner und -praktiker müssen wir sicherstellen, dass Benutzereingaben den Status unserer Komponente ändern können. Wenn ein Benutzer beispielsweise auf eine Registerkarte klickt, wird diese aktiviert. Diese Art der Interaktion wird normalerweise durch den Status gesteuert.

• Konfiguration
  

✅ Die Konfiguration ist eine einmalige Sache in der Komponente, sie wird nur ausgelöst, wenn unsere Komponente erstellt wird. Es ist also unveränderlich. Auch wegen der Unveränderlichkeit belassen wir die Konfiguration normalerweise auf der globalen Ebene. Normalerweise verfügt jede Seite über eine Konfiguration, die dann innerhalb der Seite verwendet wird.

Komponentenlebenszyklus

Wenn es um Lebenszyklen geht, fallen einem vor allem zwei ein: created und destroy . Alles Leben auf der Welt muss出生und死亡haben, diese beiden Lebenszyklen.

Wie sieht also der Lebenszyklus zwischen diesen beiden Anfängen und Enden aus? Wir müssen darüber nachdenken, was zwischen der Erstellung und der Zerstörung einer Komponente passiert.

Eine sehr wichtige Sache bei einer Komponente ist, ob sie nach ihrer Erstellung angezeigt wird. Dabei geht es um mount im Lebenszyklus, also ob die Komponente im „Baum auf dem Bildschirm“ eingebunden ist. Wir können diesen Lebenszyklus in React und Vue sehen. Wir verwenden diesen Lebenszyklus häufig, um nach der Montage der Komponente einige entsprechende Initialisierungsvorgänge auszuführen.

Wenn eine Montage erfolgt, muss auch eine Demontage erfolgen, sodass mount und unmount in der Komponente eine Reihe von Lebenszyklen darstellen. Der gesamte Lebenszyklus des Ein- und Aushängens kann wiederholt werden. Wir können es einhängen, aushängen und dann wieder einhängen, sodass sich dieser Lebenszyklus immer wieder wiederholt.

Nach unmount können wir also zum Zustand des Lebenszyklus created Komponente zurückkehren.

Wann ändert sich also der Zustand der Komponente? Hier haben wir zwei Situationen:

• Programmierer verwenden Code, um den Status dieser Komponente zu ändern oder festzulegen
• Benutzereingaben beeinflussen den Zustand der Komponente

Wenn unser Benutzer beispielsweise auf eine Schaltfläche oder Registerkarte klickt, wird die Statusänderung dieser Komponente ausgelöst. Gleichzeitig wird auch ein Komponentenlebenszyklus generiert, und dieser Lebenszyklus besteht aus Render-Rendering oder Update-Aktualisierung.

Zusammengerechnet ergeben alle diese Lebenszyklen den vollständigen Lebenszyklus unserer Komponente. Die sogenannten willMount und didMount die wir sehen, sind nichts anderes als detailliertere Standorte in diesem Lebenszyklus. Unten füge ich ein Bild des vollständigen Lebenszyklus an.

Kinder

Lassen Sie uns abschließend über das Konzept „Kinder“ sprechen. Untergeordnete Elemente sind das wichtigste Komponentenfeature zum Erstellen eines Komponentenbaums. Tatsächlich werden zwei Arten untergeordneter Elemente verwendet:

• Inhaltstyp „Untergeordnete Elemente“ – Wir haben mehrere untergeordnete Elemente, aber letztendlich können mehrere untergeordnete Elemente angezeigt werden. Für diesen Typ von untergeordneten Elementen ist der Komponentenbaum sehr einfach.
• Untergeordnete Elemente des Vorlagentyps – Zu diesem Zeitpunkt fungieren alle untergeordneten Elemente als Vorlage. Beispielsweise entwerfen wir eine list , aber das Endergebnis stimmt möglicherweise nicht mit dem überein, was wir im Children-Code geschrieben haben. Da unsere Liste definitiv für mehrere Listendaten verwendet wird, hängt die Anzahl der dargestellten Listen mit den Daten zusammen, die wir an die Komponente übergeben. Wenn wir 100 tatsächliche Kinder haben, wird unsere Listenvorlage 100 Mal kopiert.

Beim Entwerfen der untergeordneten Elemente unseres Komponentenbaums müssen wir diese beiden unterschiedlichen Szenarien berücksichtigen. Beispielsweise gibt es in React keine untergeordneten Elemente vom Vorlagentyp, aber seine untergeordneten Elemente können Funktionen übergeben, und dann kann diese Funktion ein untergeordnetes Element zurückgeben. Zu diesem Zeitpunkt fungiert es als Vorlage für untergeordnete Elemente . Wenn wir in Vue also endlose Bildlauflisten erstellen, gelten für die untergeordneten Vorlagen von Vue bestimmte Anforderungen.

Abschluss

Hier haben wir das Konzept und Wissen der gesamten Komponente kennengelernt. Im nächsten Artikel werden wir ein Komponentensystem entwerfen und bauen und seine verschiedenen praktischen Kenntnisse kennenlernen. Wir werden auch einige typische Komponenten und typische Funktionen verwenden, um jedem ein gewisses Verständnis für die Implementierung der Komponenten zu vermitteln.

Hier betreuen wir uns gegenseitig, ermutigen uns gegenseitig und arbeiten gemeinsam hart daran, den Weg des Lernens im Leben einzuschlagen und zuzulassen, dass das Lernen unser Leben verändert!

Der Weg zum Lernen ist langweilig und einsam, aber ich hoffe, dass dies uns mehr Kameradschaft und Ermutigung bringen kann. Lasst uns gemeinsam anfeuern! (๑ •̀ㅂ•́)و

Dies ist das Ende dieses Artikels über die Grundkenntnisse der Front-End-Komponentenbildung. Weitere relevante Inhalte zur Front-End-Komponentenbildung, zu Front-End-Grundkenntnissen und Front-End-Wissen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!