Erstellen benutzerdefinierter Webkomponenten mit X-Tag

Key Takeaways

• x-Tag, eine von Microsoft unterstützte JavaScript-Bibliothek, bietet eine kompakte, featurereiche Schnittstelle für die Entwicklung der schnellen Webkomponenten, die sich hauptsächlich auf die benutzerdefinierte Elemente-API konzentriert.
• x-Tag war ursprünglich ein Mozilla-Projekt, aber jetzt ist es ein von Microsoft unterstütztes Projekt, ähnlich wie Google das Polymer-Framework unterstützt.
• Erstellen eines benutzerdefinierten Elements mit X-Tag ist vollständig javaScript-gesteuert, wobei die Methode von Xtag.register () verwendet wird. Dieser Prozess beinhaltet die Definition des Lebenszyklus, Zubehörs, Methoden und Ereignisse des benutzerdefinierten Elements.
• x-Tag bietet eine einfachere API für die Implementierung benutzerdefinierter Elemente im Vergleich zu Polymer, was es zu einer geeigneten Wahl für Entwickler macht, die ihr Setup-Licht und flexibel halten möchten. Es bietet jedoch nicht die komplexen Merkmale, die Polymer tut.

Nach den Lösungen von Google und Mozilla für Webkomponenten ist es jetzt an der Reihe von Microsoft, diesen Speicherplatz mit der Veröffentlichung der X-Tag-Bibliothek einzugeben. Die offizielle Website definiert es wie folgt:

x-Tag ist eine von Microsoft unterstützte Open Source, JavaScript-Bibliothek, die die API-Familie der W3C-Standard-Webkomponenten umhüllt, um eine kompakte, featurereiche Schnittstelle für die Entwicklung schneller Komponenten bereitzustellen. Während X-Tag Feature-Hooks für alle Webkomponenten-APIs (benutzerdefinierte Elemente, Schatten-DOM, Vorlagen und HTML-Importe) anbietet, erfordert es nur eine benutzerdefinierte Unterstützung für den Betrieb. In Ermangelung einer nativen Unterstützung für benutzerdefinierte benutzerdefinierte Elemente verwendet X-Tag eine Reihe von Polyfills, die mit dem Polymer-Framework von Google geteilt werden.

Mit anderen Worten, X-Tag ist Microsoft, was Polymer für Google ist. Das einzige, was beides üblich ist, ist die zugrunde liegende Polyfill, die die Unterstützung von Webkomponenten in nicht unterstützenden Browsern ermöglicht.

Wie unterscheidet sich X-Tag von Polymer?

Polymer kombiniert alle vier Webkomponenten -Technologien, nämlich HTML -Importe, benutzerdefinierte Elemente, Shadow DOM- und HTML -Vorlagen in ein einzelnes Paket. Es bietet dem Entwickler eine benutzerfreundliche API zum Erstellen benutzerdefinierter Webkomponenten. Auf der anderen Seite stellt X-Tag nur die benutzerdefinierte Element-API zum Erstellen benutzerdefinierter Webkomponenten bereit. Natürlich können Sie auch andere Webkomponenten-APIs in Verbindung mit der X-Tag-Bibliothek verwenden.

Ist X-Tag, ein Mozilla-Projekt nicht?

Ja, aber es ist jetzt nicht mehr. Nach einigem Graben gelang es mir herauszufinden, dass der ursprüngliche Entwickler des X-TAG-Projekts, Daniel Buchner, früher bei Mozilla arbeitete, als er die Bibliothek erstellte. Seitdem ist er nach Microsoft gezogen und hat das Projekt fortgesetzt. Darüber hinaus war er mit Hilfe eines Ex-Mozillianers der einzige Beitrag zur Bibliothek. Daher ist es jetzt ein von einem Ex-Mozillian gegründetes von Microsoft unterstütztes Projekt.

Erste Schritte mit X-Tag

In diesem Artikel werden wir ein benutzerdefiniertes Element mithilfe der X-Tag-Bibliothek erstellen, um eine Google Map Street View mit dem folgenden Markup einzubetten:

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span>></span></span></span>

Das benutzerdefinierte Element verfügt über zwei Attribute, Breitengrad und Längengrad, um die Koordinaten eines Ortes anzugeben. Da diese Attribute optional sind, werden wir für jeden von ihnen auch Standardwerte zuweisen, falls der Entwickler sie im Markup nicht definiert.

Beginnen wir zunächst die X-Tag-JavaScript-Bibliothek in das unseres Dokuments.

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Es ist wichtig, die X-Tag-Bibliothek in den des Dokuments aufzunehmen. Dies ist so, dass es vollständig heruntergeladen und analysiert wird, bevor die Rendering Engine auf das benutzerdefinierte Element -Markup trifft, das wir in der

verwenden werden.

Definieren des benutzerdefinierten Elements

Im Gegensatz zu Polymer ist der Prozess des Erstellens eines benutzerdefinierten Elements mit X-Tag vollständig javaScript-gesteuert. Die X-Tag-Bibliothek bietet eine Reihe nützlicher Methoden, Rückrufe und Eigenschaften, um benutzerdefiniertes Verhalten für unser Element zu definieren. Ein typisches Skelett zum Erstellen eines benutzerdefinierten Elements mit X-Tag sieht wie folgt aus:

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

Register () - Dies ist die wichtigste Methode in der Bibliothek. Es akzeptiert den Namen des benutzerdefinierten Elements als erstes Argument, gefolgt von der Objektdefinition. Wie der Name schon sagt, ist dies für die Registrierung des benutzerdefinierten Elements im DOM verantwortlich.
Inhalt - Das benutzerdefinierte Element benötigt möglicherweise ein zusätzliches Markup für die Struktur oder Präsentation. Dies akzeptiert eine HTML -Zeichenfolge oder eine Multiline -Kommentarzeichenfolge, um das Markup in die DOM zu injizieren.
Lebenszyklus - Dies enthält nützliche Rückrufmethoden, die auf unterschiedliche Stufen im Lebenszyklus des benutzerdefinierten Elements abzielen.
Accessors - Dies bietet eine gemeinsame Schnittstelle für Objektattribute, Setter und Gettter und verknüpft sie mit den entsprechenden HTML -Attributen. Wenn Attribute mit einem Getter/Setter verknüpft sind, bleiben ihre Zustände immer synchronisiert.
Methoden - Das benutzerdefinierte Element benötigt wahrscheinlich einige eigene, einzigartige Methoden, um die gewünschte Funktionalität bereitzustellen. Fügen Sie einfach ein Methodenobjekt zum obersten Ebenen-Xtag.register () Definitionsobjekt hinzu und fügen Sie alle benutzerdefinierten Methoden darin hinzu.
Ereignisse - Dies ist für das Anbringen von Ereignissen an das benutzerdefinierte Element verantwortlich. Die Schlüssel dieses Objekts sind die Namen der Ereignisse, die Sie mit dem benutzerdefinierten Element wie Tippen, Fokus usw. anhängen möchten.

Die Grundidee besteht darin, die Google -Karte mit einem IFRame einzubetten und die SRC -URL im folgenden Format anzugeben:

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><api_key>></api_key></span>&location=<span><span><latitude>></latitude></span>,<span><span><longitude>></longitude></span></span></span></span></span>

Um den API_Key zu erhalten, befolgen Sie die hier beschriebenen Schritte. Sobald Sie den API_Key haben, erstellen wir einen Iframe innerhalb der erstellten Rückrufmethode des Lebenszyklusobjekts und geben die SRC -Eigenschaft im obigen Format an.

<span><span><span><google-map> latitude<span>="40.7553231"</span> longitude<span>="-73.9752458"</span>></google-map></span><span><span></span>></span></span></span>

Der obige Code funktioniert, aber wir müssen die hart codierten Koordinatenwerte im iframe.src loswerden und die Werte stattdessen direkt aus den benutzerdefinierten Elementattributen beziehen. Dazu verwenden wir das Objekt des Accessors, wobei die Attributnamen die Tasten bilden. Wir verknüpfen sie mit den HTML -Attributen, indem wir Attribute deklarieren: {}.

<span><span>
</span><span><span><span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- X-Tag library including the polyfill -->
</span>    <span><span><span><script> src<span >="https://rawgit.com/x-tag/core/master/dist/x-tag-core.min.js"</script></span>></span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span>  <span><span><span>></span>
</span>    <span><!-- Custom element markup will appear here -->
</span>    
    <span><span><span><script>></script></span><span>
</span></span><span><span>      <span><!-- The behavior of the custom element will be defined here -->
</span></span></span><span><span>    </span><span><span></span>></span>
</span>  <span><span><span></span>></span>
</span><span><span><span></span>></span></span></span></span></span></span></span>

Wir können diese Variablen dann direkt verwenden, während wir die SRC -URL angeben:

xtag<span>.register('google-map', {
</span>
  <span>content: '',
</span>
  <span>lifecycle: {
</span>    <span>created  : function(){ 
</span>      <span>/* Called when the custom element is created */ 
</span>    <span>},
</span>    <span>inserted : function(){ 
</span>      <span>/* Called when the custom element is inserted into the DOM */ 
</span>    <span>},
</span>    <span>removed  : function(){ 
</span>      <span>/* Called when the custom element is removed from the DOM */ 
</span>    <span>},
</span>    <span>attributeChanged: function(attrName<span>, oldValue, newValue</span>){
</span>      <span>/* Called when the attribute of the custom element is changed */
</span>    <span>}
</span>  <span>},
</span>
  <span>accessors : {},
</span>  <span>methods   : {},
</span>  <span>events    : {}
</span><span>});</span>

Beendigung von Schliffen

anwenden

Styling Ein benutzerdefiniertes Element ähnelt dem Styling eines anderen HTML -Tags. Klassen, IDs und Attribut -Selektoren funktionieren wie erwartet mit benutzerdefinierten Elementen. Zum Beispiel werden wir unserem neu erstellten benutzerdefinierten Element einen Box-Shadow und einen Grenzradius hinzufügen.

https://www.google.com/maps/embed/v1/streetview?key=<span><span><span><api_key>></api_key></span>&location=<span><span><latitude>></latitude></span>,<span><span><longitude>></longitude></span></span></span></span></span>

Die Verwendung des benutzerdefinierten Elements ist jetzt so einfach wie das folgende Markup in die

: aufzunehmen

<span>// Insert your API key here
</span><span>var API_KEY = <api_key>;
</api_key></span>
xtag<span>.register('google-map', {
</span>  <span>lifecycle: {
</span>    <span>created: function() { 
</span>      <span>var iframe = document.createElement('iframe');
</span>      iframe<span>.width = 600;
</span>      iframe<span>.height = 600;
</span>      iframe<span>.frameBorder = 0;
</span>      iframe<span>.src = 'https://www.google.com/maps/embed/v1/streetview?key=' + 
</span>                    <span>API_KEY + '&location=40.7553231,35.3434';
</span>      <span>this.appendChild(iframe);
</span>    <span>}
</span>  <span>}
</span><span>});</span>

Das Endergebnis ist im folgenden Codepen sichtbar:

Siehe den Stift X-Tag benutzerdefiniertes Element von sitepoint (@sinepoint) auf CodePen.

Obwohl die Browser-Unterstützung für Webkomponenten ein bisschen skizzenhaft ist, sollte unsere Demo, die die X-Tag-Bibliothek mit der Polyfill verwendet, auf allen modernen Browsern wie IE9 und höher funktionieren.

endgültige Gedanken

im Vergleich zu Polymer bietet X-Tag eine viel einfachere API, um benutzerdefinierte Elemente zu verstehen und zu implementieren, hauptsächlich aufgrund des Fehlens komplexer Merkmale, die Polymer hat. Wenn Sie beabsichtigen, Ihr Setup leicht und flexibel zu halten und für die anderen Webkomponenten-APIs keinen guten Anwendungsfall zu haben, scheint X-Tag sicherlich der richtige Kandidat für den Job zu sein.

häufig gestellte Fragen (FAQs) zum Erstellen benutzerdefinierter Webkomponenten mit X-Tag

Was ist X-Tag und warum ist es für die Webentwicklung wichtig? Es ist Teil der Webkomponenten -Suite von Technologien, die auch Shadow DOM, HTML -Vorlagen und benutzerdefinierte Elemente enthält. X-Tag ist wichtig in der Webentwicklung, da Entwickler ihre eigenen HTML-Elemente erstellen, ihren Code zusammenfassen und ihre Codebasis sauber und warten lassen können. Es fördert auch die Wiederverwendung von Code, was den Entwicklungsprozess erheblich beschleunigen kann. verwenden. Im Gegensatz zu anderen Bibliotheken erfordert X-Tag keine Build-Schritte oder Transpilation und hat einen sehr kleinen Fußabdruck. Es hat auch eine einfache, intuitive API, die es einfach macht, benutzerdefinierte Elemente und ihr Verhalten zu definieren. Darüber hinaus ist X-Tag mit allen modernen Browsern kompatibel und kann neben anderen Bibliotheken und Frameworks verwendet werden.

Kann ich X-Tag mit anderen JavaScript-Bibliotheken oder Frameworks verwenden? Es wird keine Einschränkungen oder spezifische architektonische Muster auferlegt, sodass Sie sie problemlos in Ihre vorhandenen Projekte integrieren können. Unabhängig davon, ob Sie Jquery, React, Angular oder Vue.js verwenden, können Sie X-Tag verwenden, um benutzerdefinierte Elemente zu erstellen, die in Ihrer Anwendung wiederverwendet werden können.

Wie definiere ich ein benutzerdefiniertes Element mit X- Tag?

Das Definieren eines benutzerdefinierten Elements mit X-Tag ist einfach. Sie rufen einfach die Funktion von Xtag.register auf und geben den Namen Ihres benutzerdefinierten Elements und eines Objekts ein, das sein Verhalten definiert. Dieses Objekt kann Lebenszyklusmethoden, Accessors und Event -Handler umfassen. Hier ist ein grundlegendes Beispiel:

xtag.register ('my-Element', {
Lebenszyklus: {
erstellt: function () {
this.textContent = 'Hallo, Welt!' ;
}
}
});

Was sind Lebenszyklusmethoden in X-Tag?

Lebenszyklusmethoden sind spezielle Methoden, die in verschiedenen Phasen des Lebens eines benutzerdefinierten Elements aufgerufen werden. X-Tag unterstützt vier Lebenszyklusmethoden: Erstellt, eingefügt, entfernt und Attributechange. Mit diesen Methoden können Sie spezifische Aktionen ausführen, wenn ein Element erstellt wird, dem DOM hinzugefügt, aus dem DOM entfernt oder wenn sich eines seiner Attribute ändert. >

x-Tag bietet eine einfache Möglichkeit, Ereignisse in Ihren benutzerdefinierten Elementen zu verarbeiten. Sie können Ereignishandler im Ereignisobjekt definieren, wenn Sie Ihr Element registrieren. Zum Beispiel, um ein Klickereignis zu verarbeiten, würden Sie so etwas tun:

xtag.register ('my-Element', {

Ereignisse: {

klick: function (e) {

console.log ('Element geklickt!');

}
}
}); Elemente?

Ja, X-Tag unterstützt die Erstellung von Schattendom-Elementen. Auf diese Weise können Sie die Stile und Marke Ihres Elements zusammenfassen und sie vom Rest Ihres Dokuments getrennt halten. Um eine Schattenwurzel zu erstellen, können Sie die methode createShadowroot () in der erstellten Lebenszyklusmethode Ihres Elements verwenden.

Wie style ich meine benutzerdefinierten Elemente? Wie alle anderen HTML -Elemente verwenden CSS. Wenn Ihr Element Shadow DOM verwendet, können Sie ein

Ist X-Tag immer noch gepflegt und unterstützt? Die letzte Veröffentlichung war 2017. Die Bibliothek ist jedoch stabil und kann weiterhin in Projekten verwendet werden. Wenn Sie auf Probleme stoßen oder neue Funktionen benötigen, müssen Sie sie möglicherweise selbst implementieren oder in Betracht ziehen, eine andere Bibliothek zu verwenden.

Das obige ist der detaillierte Inhalt vonErstellen benutzerdefinierter Webkomponenten mit X-Tag. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!