Fermer

novembre 28, 2018

Une introduction aux composants Web


En savoir plus sur les composants Web et sur leur utilisation

En 2013, Facebook a introduit l'architecture à base de composants en annonçant React. Peu de temps après, la plupart des autres cadres, tels que Angular, l'ont adopté. L'architecture basée sur les composants permet aux développeurs de décomposer leurs applications en sections plus petites, appelées composants. Chacune de ces sections a souvent une responsabilité unique et peut avoir un ou plusieurs composants enfants. Tout comme les briques LEGO, vous pouvez orchestrer ces composants et construire une solution évolutive et fiable .

Lors de la création d'une application, nous réalisons souvent que nombre de nos composants d'interface utilisateur ont le même aspect et le même comportement. Ces composants peuvent être écrits une fois (en tant que composants réutilisables) et être utilisés dans d'autres parties de l'application.

C'est formidable, mais peut encore être amélioré. Imaginez:

  • Nous pourrions créer un composant avec Angular et l'utiliser dans une application écrite dans Vue
  • Notre composant pourrait avoir le même aspect et le même comportement, peu importe ce qui est modifié dans le style global
  • avoir une encapsulation de style et pouvoir toujours personnaliser notre composant

C'est là que les composants Web brillent. Les composants Web nous fournissent tous ces éléments manquants.

Que sont les composants Web?

Les composants Web sont des composants indépendants de la plate-forme qui sont écrits de manière à ce qu'ils aient les encapsulations de style réelles. Presque tous les frameworks JavaScript modernes prennent en charge les composants Web. Vous pouvez consulter le site Web de Rob Dodson pour savoir si le cadre que vous utilisez aujourd'hui prend en charge les composants Web ou non.

Les composants Web se composent de trois technologies principales:

  • Modèle HTML
  • Eléments personnalisés
  • DOM Shadow

Auparavant, les importations HTML en faisaient également partie, mais avec les modules ES6, les importations HTML étaient obsolètes. L'équipe Polymer travaille sur un module HTML afin de permettre de charger un modèle HTML dans du code JavaScript.

Nous allons donc examiner chacune de ces trois technologies ensemble. [19659025] Modèle HTML

Vous connaissez peut-être déjà le concept de modèle. C'est surtout utile une fois que vous avez une partie de votre code HTML qui doit être répétée plusieurs fois. Imaginez que vous allez créer une liste de contacts et que vous deviez créer une fiche de contact pour chacun de vos contacts. Dans ce cas, il est tout à fait logique de créer un modèle pour votre fiche de contact et de le réutiliser.

Les balises de modèle vous permettent de créer un bloc HTML et d’ajouter du contenu à l'aide de JavaScript, de le cloner. puis ajoutez-le au DOM.

L’avantage de l’utilisation des balises HTML est que les navigateurs vont les analyser, mais pas les restituer. Vous devez manuellement cloner le modèle et le joindre au DOM. De cette façon, vous améliorez les performances, car les navigateurs vont analyser le modèle une fois, quel que soit le nombre de clonages, d’ajouts et de liens qu’ils attachent au modèle DOM.

Voyons ce qui suit. exemple:

Voici notre modèle HTML:

Voici notre JavaScript:

 // Obtenir une référence au modèle 
 const template = document.querySelector ('# contact-card-template'); 
 // Ajoute le prénom 
 const info = template.content.querySelector ("# nom"); 
 info.textContent = "Sherry"; 





  


               





 // ajoute le premier courrier électronique 
 const info = template.content.querySelector ("# email"); 
 info.textContent = "sherry@berry.com"; 
 // Clonez la nouvelle carte et ajoutez-la au DOM 
 const imageGallery = document.querySelector ("# contacts"); 
 const clone = document.importNode (template.content, true); 
 imageGallery.appendChild (clone);

Vous trouverez le code sur StackBlitz . [19659025] Eléments personnalisés

Avec les éléments personnalisés, les développeurs ont la possibilité de créer leurs propres éléments DOM. En d'autres termes, ils peuvent définir de nouveaux éléments HTML. Ces éléments peuvent être des éléments totalement nouveaux, ce qui signifie qu’ils étendent l’interface HTMLElement ou un des éléments HTML existants.

Il est également possible d’hériter de l’un des éléments existants. Mais normalement, ce n’est pas la méthode recommandée pour créer un élément. Si vous décidez d'hériter d'un élément natif, gardez à l'esprit que votre élément doit prendre en charge toutes les API natives de l'élément dont vous héritez. Cela peut être assez compliqué, car imaginez combien de types une balise peut prendre en charge.

Créer de nouveaux éléments HTML

Pour créer un tout nouvel élément HTML, il vous suffit de créer une classe qui prolongements HTMLElement puis définissent votre propre balise personnalisée .

Voir l'exemple ci-dessous:

 la classe FancyInputElement étend HTMLElement {.
  constructeur () {
    super();
    const template = document.getElementById ('fancyInput');
    this.innerHTML = template.innerHTML;
  }
}

customElements.define ("fancy-input", FancyInputElement);

Vous pouvez trouver le code sur Stackblitz .

Etendre un élément HTML existant

Pour étendre ou améliorer un élément natif , vous devez créer une classe qui étend l’élément HTML natif dont vous avez besoin, puis définir votre propre élément personnalisé. La différence par rapport au cas précédent est que vous devez ajouter un troisième paramètre à customElements.define et spécifier l'élément natif que vous étendez. Pour indiquer au navigateur que vous souhaitez utiliser ce nouveau comportement, vous devez utiliser l'attribut 'is' dans votre code HTML.

Voici un exemple simple d'extension de la balise .

Inside connectedCallback () :

 classe FancyLinkElement étend HTMLAnchorElement {
 connectedCallback () {
 this.addEventListener ("mouseover", e => {
. setAttribute ("style", "couleur: rose; style de police: gras;"); 
}); 
 this.addEventListener ("mouseout", e => {
 this.setAttribute ("style "," couleur: noir; style de police: gras; "); 
}); 
 this.addEventListener (" clic ", e => {
 this.target =" _ blank "; 
};; 
 
} 
} 
 customElements.define ("fancy-link", FancyLinkElement, {s'étend: "a"}; 
 Suivez-moi de l'autre côté!

Vous pouvez trouver le co de sur Stackblitz .

Cycle de vie d'élément personnalisé

Etant donné que les éléments personnalisés sont étendus, l'interface HTMLElement est fournie avec les méthodes suivantes:

  • connectedCallback () : Cette méthode est automatiquement appelée dès que le composant est attaché au DOM. Il s'agit du meilleur endroit pour obtenir l'attribut d'entrée d'un élément et définir le comportement de rendu
  • attributeChangedCallback () : Cette méthode est automatiquement appelée dès que l'un des attributs d'entrée de votre élément est modifié [19659012] disconnectedCallback () : Cette méthode est automatiquement appelée lorsque l'élément personnalisé est déconnecté du DOM du document
  • adopté par Callback () : cette méthode est automatiquement appelée lorsque l'élément personnalisé est déplacé vers un nouveau document

DOM Shadow

Le DOM Shadow vous permet d'encapsuler votre composant afin que son apparence et son comportement soient identiques, peu importe ce qui se passe dans le CSS global. Cela signifie qu'il n'y aura aucune fuite de style dans ou hors de votre composant.

Comment créer un composant Web?

Utilisons donc ces trois technologies ensemble pour créer un composant Web de fiche de contact.

À l’intérieur du modèle, nous avons défini des espaces réservés pour "nom" et "courrier électronique".