Nouveau framework front-end ?

Ou JavaScript Vanilla avec deux fonctions d'assistance ?

Dans cet article, j'expliquerai comment développer des composants Web réutilisables à l'aide de la bibliothèque Fusor et les avantages de le faire.

Ces composants peuvent ensuite être composés en applications Web à part entière, comparables à celles créées à l'aide de React, Angular, Vue, Solid, Svelte et autres.

L'API Fusor se compose de seulement deux fonctions principales :

• Créez un élément DOM enveloppé dans un objet spécial.
• Mettre à jour un élément DOM enveloppé dans un objet spécial.

Plus quelques fonctions plus rarement utilisées comme :

• Obtenir un élément DOM à partir d'un objet spécial.

Vous n'avez pas besoin de savoir quoi que ce soit sur cet objet spécial.

Créer un élément DOM

Création via JSX

import { getElement } from "@fusorjs/dom";

const count = 0;

// Create via JSX
const message = <div>Seconds {count} elapsed</div>;

document.body.append(getElement(message)); // Get

Nous avons utilisé les fonctions API create et get.

Création alternative non-JSX

import { div } from "@fusorjs/dom/html";
const message = div("Seconds ", count, " elapsed"); // Create

Mettre à jour un élément DOM

import { getElement, update } from "@fusorjs/dom";

let count = 0;
const message = <div>Seconds {() => count} elapsed</div>; // Create

document.body.append(getElement(message)); // Get

setInterval(() => {
  count += 1;
  update(message); // Update
}, 1000);

Nous avons utilisé la fonction API update. Il met à jour un élément DOM et tous ses enfants de manière récursive. Il récupère de nouvelles valeurs à partir des résultats des fonctions, les rendant dynamiques.

Les enfants, les attributs et les propriétés peuvent tous être dynamiques.

<div class={() => (toggle ? "on" : "off")} />

Les mises à jour du DOM n'auront lieu que si les nouvelles valeurs diffèrent des valeurs actuelles.

Paramètres de réglage

La plupart du temps, vous définirez les paramètres comme d'habitude :

<div style="padding:1em" />

Cependant, vous devrez parfois faire la distinction entre les attributs et les propriétés. Pour préciser leur type, vous pouvez ajouter les suffixes _a ou _p à leurs noms :

<div name1_a="attribute" name2_p="property" />

Pour ajouter un gestionnaire d'événements, vous devez toujours utiliser un suffixe _e :

<div click_e={() => "event handler"} />

Il existe des types supplémentaires, et certains d'entre eux peuvent prendre des options supplémentaires pour garantir une compatibilité totale avec les normes W3C :

<div click_e_capture_once={() => "event handler"} />

Créer un composant réutilisable

Composez vos composants à l'aide des objets spéciaux de Fusor. Encapsulez l’état et les paramètres dans les fonctions. Mettez en majuscule les noms de vos composants.

Voici un exemple de composant de bouton de comptage :

import { getElement, update } from "@fusorjs/dom";

const CountingButton = (props) => {
  let count = props.count ?? 0; // Init State

  const self = (
    <button
      click_e={() => {
        count += 1;
        update(self);
      }}
    >
      Clicked {() => count} times
    </button>
  );

  return self;
};

const App = () => (
  <div style="padding:1em">
    <p>Three counting buttons</p>
    <CountingButton />
    <CountingButton count={22} />
    <CountingButton count={333} />
  </div>
);

document.body.append(getElement(App()));

Le composant CountingButton ne met à jour qu'une partie de son propre élément DOM sans affecter le reste de l'application.

Une fois que vous avez parfaitement compris le fonctionnement du composant ci-dessus, vous pouvez le réécrire de manière légèrement plus courte tout en obtenant le même résultat :

const CountingButton = ({ count = 0 }) => (
  <button
    click_e={(event, self) => {
      count += 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  </button>
);

Chaque fonction de rappel du gestionnaire d'événements reçoit deux arguments : l'objet événement standard et l'objet spécial actuel.

Encore une fois, si vous comprenez l'exemple ci-dessus, consultez la version la plus courte du même composant :

const CountingButton = ({ count = 0 }) => (
  <button click_e_update={() => (count += 1)}>
    Clicked {() => count} times
  </button>
);

Nous avons ajouté l'option de mise à jour pour actualiser le composant après l'appel du rappel du gestionnaire d'événements, ce qui est équivalent à l'exemple précédent.

Cycle de vie

Le dernier aspect que nous devons comprendre avant de nous lancer dans le développement d'applications réelles est le cycle de vie des composants.

Il se compose de seulement quatre étapes :

1. Créer le composant
2. Connectez-vous au DOM
3. Mettre à jour le DOM
4. Déconnecter du DOM

import { getElement, update } from "@fusorjs/dom";

const IntervalCounter = ({ count = 0 }) => {
  console.log("1. Create the component");

  return (
    <div
      mount={(self) => {
        console.log("2. Connect to the DOM");

        const timerId = setInterval(() => {
          count++;
          update(self);
          console.log("3. Update the DOM");
        }, 1000);

        return () => {
          clearInterval(timerId);
          console.log("4. Disconnect from the DOM");
        };
      }}
    >
      Since mounted {() => count} seconds elapsed
    </div>
  );
};

const instance = <IntervalCounter />;
const element = getElement(instance);

document.body.append(element);
setTimeout(() => element.remove(), 15000);

La propriété mount a une fonction qui s'exécute lorsque le composant est ajouté au DOM. Cette fonction prend un argument : l'objet spécial actuel. Il peut également renvoyer une autre fonction qui s'exécute lorsque le composant est supprimé du DOM.

Nous maîtrisons entièrement ces quatre étapes du cycle de vie. Cela nous permet de créer, mettre à jour et comparer des composants à l'aide de méthodes asynchrones ou concurrentes personnalisées, avec différentes stratégies et images d'animation à l'esprit.

Ceci conclut le didacticiel

Comme vous pouvez le voir dans ce tutoriel, Fusor est simple, concis et explicite. La plupart du temps, vous n’utiliserez que ses deux fonctions API. Cependant, il offre également beaucoup de contrôle et de flexibilité en cas de besoin.

Donc, pour répondre à la question du titre, Fusor est une petite bibliothèque JavaScript, pas un framework, mais elle peut obtenir les mêmes résultats que d'autres frameworks.

Commencer à coder

Tous les exemples ci-dessus sont disponibles sur CodeSandbox.

Consultez également l'exemple d'horloge analogique SVG.

Voici une application du monde réel.

Projets de démarrage standard :

• Démarreur JavaScript
• Démarreur TypeScript

Merci

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!