Écrivez votre premier composant Web

  • FrançaisFrançais



  • Les composants Web sont un ensemble de technologies open source telles que JavaScript et HTML qui vous permettent de créer des éléments personnalisés que vous pouvez utiliser et réutiliser dans des applications Web. Les composants que vous créez sont indépendants du reste de votre code, ils sont donc faciles à réutiliser dans de nombreux projets.

    Mieux encore, il s’agit d’un standard de plate-forme pris en charge par tous les principaux navigateurs modernes.

    Qu’y a-t-il dans un composant Web ?

    • Éléments personnalisés : Cette API JavaScript vous permet de définir de nouveaux types d’éléments HTML.
    • DOM fantôme : Cette API JavaScript fournit un moyen d’attacher un Modèle d’objet de document (DOM) à un élément. Cela encapsule votre composant Web en gardant le style, la structure de balisage et le comportement isolés des autres codes de la page. Il garantit que les styles ne sont pas remplacés par des styles externes ou, à l’inverse, qu’un style de votre composant Web ne “fuit” pas dans le reste de la page.
    • Modèles HTML : L’élément vous permet de définir des éléments DOM réutilisables. L’élément et son contenu ne sont pas rendus dans le DOM mais peuvent toujours être référencés à l’aide de JavaScript.

    Écrivez votre premier composant Web

    Vous pouvez écrire un simple composant Web avec votre éditeur de texte préféré et JavaScript. Ce mode d’emploi utilise le bootstrap pour générer des styles simples, puis crée un composant Web de carte simple pour afficher la température d’un emplacement qui lui est transmis en tant qu’attribut. Le composant utilise le API météo ouverte, ce qui vous oblige à générer un APPID/APIKey en vous connectant.

    La syntaxe d’appel de ce composant Web nécessite la longitude et la latitude de l’emplacement :

    <weather-card longitude="85.8245" latitude="20.296" />

    Créer un fichier nommé carte-meteo.js qui contiendra tout le code de votre composant Web. Commencez par définir votre composant. Cela peut être fait en créant un élément de modèle et en y ajoutant quelques éléments HTML simples :

    const template = document.createElement('template');

    template.innerHTML = `
      <div class="card">
        <div class="card-body"></div>
      </div>
    `

    Commencez à définir la classe WebComponent et son constructeur :

    class WeatherCard extends HTMLElement {
      constructor() {
        super();
        this._shadowRoot = this.attachShadow({ 'mode': 'open' });
        this._shadowRoot.appendChild(template.content.cloneNode(true));
      }
      ….
    }

    Le constructeur attache le shadowRoot et le met en mode ouvert. Ensuite, le modèle est cloné dans shadowRoot.

    Ensuite, accédez aux attributs. Ce sont la longitude et la latitude, et vous en avez besoin pour faire une requête GET à l’API Open Weather. Cela doit être fait dans le connectedCallback une fonction. Vous pouvez utiliser le getAttribute pour accéder aux attributs ou définir des getters pour les lier à cet objet :

    get longitude() {
      return this.getAttribute('longitude');
    }

    get latitude() {
      return this.getAttribute('latitude');
    }

    Définissez maintenant le connectedCallBack méthode qui récupère les données météo à chaque fois qu’elle est montée :

    connectedCallback() {
      var xmlHttp = new XMLHttpRequest();
      const url = `http://api.openweathermap.org/data/2.5/weather?lat=${this.latitude}&lon=${this.longitude}&appid=API_KEY`
      xmlHttp.open("GET", url, false);
      xmlHttp.send(null);
      this.$card = this._shadowRoot.querySelector('.card-body');
      let responseObj = JSON.parse(xmlHttp.responseText);
      let $townName = document.createElement('p');
      $townName.innerHTML = `Town: ${responseObj.name}`;
      this._shadowRoot.appendChild($townName);
      let $temperature = document.createElement('p');
      $temperature.innerHTML = `${parseInt(responseObj.main.temp - 273)} &deg;C`
      this._shadowRoot.appendChild($temperature);
    }

    Une fois les données météorologiques récupérées, des éléments HTML supplémentaires sont ajoutés au modèle. Maintenant, votre classe est définie.

    Enfin, définissez et enregistrez un nouvel élément personnalisé en utilisant la méthode window.customElements.define:

    window.customElements.define('weather-card', WeatherCard);

    Le premier argument est le nom de l’élément personnalisé et le deuxième argument est la classe définie. Voici un lien vers l’ensemble du composant.

    Vous avez écrit votre premier composant Web ! Il est maintenant temps de l’apporter au DOM. Pour ce faire, vous devez charger le fichier JavaScript avec la définition de votre composant Web dans votre fichier HTML (nommez-le index.html):

    <head>
      <meta charset="UTF-8">
    </head>

    <body>
      <weather-card longitude="85.8245" latitude="20.296"></weather-card>
      <script src="https://opensource.com/article/21/7/./weather-card.js"></script>
    </body>

    </html>

    Voici votre composant Web dans un navigateur :

    Étant donné que les composants Web n’ont besoin que de HTML, CSS et JavaScript, ils sont pris en charge de manière native par les navigateurs et peuvent être utilisés de manière transparente avec des frameworks frontaux, notamment React et Vue. L’extrait de code simple suivant montre comment utiliser des composants Web avec une application React simple amorcée avec Créer une application React. Pour cela, vous devez importer le carte-meteo.js fichier que vous avez défini précédemment et utilisez-le comme composant :

    import './App.css';
    import './weather-card';

    function App() {
      return (
      <weather-card longitude='85.8245' latitude='20.296'></weather-card>
      );
    }

    export default App;

    Cycle de vie d’un composant Web

    Tous les composants suivent un cycle de vie allant de l’initialisation à la suppression du DOM (c’est-à-dire le démontage). Des méthodes sont associées à chaque événement du cycle de vie afin que vous puissiez mieux contrôler les composants. Les divers événements du cycle de vie d’un composant Web incluent :

    Open source modulaire

    Les composants Web peuvent être un moyen puissant de développer des applications Web. Que vous soyez à l’aise avec JavaScript ou que vous débutiez avec, il est facile de créer du code réutilisable avec ce grand standard ouvert, quel que soit le navigateur utilisé par votre public cible.

    Source

    N'oubliez pas de voter pour cet article !
    1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
    Loading...

    Laisser un commentaire

    Votre adresse e-mail ne sera pas publiée.