Oder Vanilla-JavaScript mit zwei Hilfsfunktionen?

In diesem Artikel werde ich diskutieren, wie man wiederverwendbare Web-Komponenten mithilfe der Fusor-Bibliothek entwickelt und welche Vorteile dies bietet.

Solche Komponenten können dann zu vollwertigen Webanwendungen zusammengestellt werden, die denen entsprechen, die mit React, Angular, Vue, Solid, Svelte und anderen erstellt wurden.

Die Fusor-API besteht nur aus zwei Hauptfunktionen:

• Erstellen ein DOM-Element, das in ein spezielles Objekt eingeschlossen ist.
• Aktualisieren ein DOM-Element, das in ein spezielles Objekt eingeschlossen ist.

Plus ein paar seltener verwendete Funktionen wie:

• Holen ein DOM-Element von einem speziellen Objekt.

Sie müssen nichts über dieses spezielle Objekt wissen.

Erstellen Sie ein DOM-Element

Erstellung über JSX

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

const count = 0;

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

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

Wir haben die API-Funktionen create und get verwendet.

Alternative Nicht-JSX-Erstellung

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

Aktualisieren Sie ein DOM-Element

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

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

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

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

Wir haben die API-Funktion update verwendet. Es aktualisiert ein DOM-Element und alle seine untergeordneten Elemente rekursiv. Es ruft neue Werte aus den Ergebnissen von Funktionen ab und macht sie dynamisch.

Untergeordnete Elemente, Attribute und Eigenschaften können alle dynamisch sein.

 (toggle ? "on" : "off")} />




DOM-Aktualisierungen werden nur durchgeführt, wenn die neuen Werte von den aktuellen abweichen.


  
  
  Parameter einstellen


Meistens werden Sie die Parameter wie gewohnt einstellen:







Manchmal müssen Sie jedoch zwischen Attributen und Eigenschaften unterscheiden. Um ihren Typ anzugeben, können Sie ihren Namen die Suffixe _a oder _p hinzufügen:







Um einen Ereignishandler hinzuzufügen, müssen Sie immer ein _e-Suffix verwenden:


 "event handler"} />




Es gibt zusätzliche Typen, und einige von ihnen können zusätzliche Optionen benötigen, um vollständige Kompatibilität mit W3C-Standards sicherzustellen:


 "event handler"} />





  
  
  Erstellen Sie eine wiederverwendbare Komponente


Stellen Sie Ihre Komponenten mit den Spezialobjekten von Fusor zusammen. Kapseln Sie Status und Parameter in Funktionen. Schreiben Sie Ihre Komponentennamen groß.

Hier ist ein Beispiel für eine Zählschaltflächenkomponente:


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

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

  const self = (
     {
        count  = 1;
        update(self);
      }}
    >
      Clicked {() => count} times
    
  );

  return self;
};

const App = () => (
  

    
Three counting buttons
    
);

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




Die CountingButton-Komponente aktualisiert nur Teile ihres eigenen DOM-Elements, ohne Auswirkungen auf den Rest der Anwendung.

Sobald Sie die Funktionsweise der oben genannten Komponente vollständig verstanden haben, können Sie sie etwas kürzer umschreiben und dabei das gleiche Ergebnis erzielen:


const CountingButton = ({ count = 0 }) => (
   {
      count  = 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  
);




Jede Event-Handler-Callback-Funktion erhält zwei Argumente: das Standard-Event-Objekt und das aktuelle Spezialobjekt.

Wenn Sie das obige Beispiel verstehen, schauen Sie sich noch einmal die kürzeste Version derselben Komponente an:


const CountingButton = ({ count = 0 }) => (
   (count  = 1)}>
    Clicked {() => count} times
  
);




Wir haben die Update-Option hinzugefügt, um die Komponente zu aktualisieren, nachdem der Event-Handler-Callback aufgerufen wurde, was dem vorherigen Beispiel entspricht.


  
  
  Lebenszyklus


Der letzte Aspekt, den wir verstehen müssen, bevor wir uns mit der Entwicklung realer Anwendungen befassen, ist der Komponentenlebenszyklus.

Es besteht aus nur vier Phasen:


Erstellen die Komponente

Verbinden mit dem DOM

Aktualisieren das DOM

Trennen vom DOM

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

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

  return (
    
 {
        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
    
  );
};

const instance = ;
const element = getElement(instance);

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




Die Mount-Eigenschaft verfügt über eine Funktion, die ausgeführt wird, wenn die Komponente zum DOM hinzugefügt wird. Diese Funktion benötigt ein Argument: das aktuelle Spezialobjekt. Es kann auch eine andere Funktion zurückgeben, die ausgeführt wird, wenn die Komponente aus dem DOM entfernt wird.

Wir haben die volle Kontrolle über diese vier Phasen des Lebenszyklus. Dadurch können wir Komponenten mit benutzerdefinierten asynchronen oder gleichzeitigen Methoden erstellen, aktualisieren und vergleichen, wobei unterschiedliche Strategien und Animationsrahmen berücksichtigt werden.


  
  
  Damit ist das Tutorial abgeschlossen


Wie Sie diesem Tutorial entnehmen können, ist Fusor einfach, prägnant und explizit. Meistens werden Sie nur die zwei API-Funktionen verwenden. Es bietet jedoch bei Bedarf auch viel Kontrolle und Flexibilität.

Um die Frage im Titel zu beantworten: Fusor ist eine kleine JavaScript-Bibliothek, kein Framework, kann aber die gleichen Ergebnisse erzielen wie andere Frameworks.


  
  
  Beginnen Sie mit dem Codieren


Alle oben genannten Beispiele sind auf CodeSandbox verfügbar.

Sehen Sie sich auch das SVG-Analoguhr-Beispiel an.

Hier ist eine reale Anwendung.

Boilerplate-Starterprojekte:

JavaScript-Starter
TypeScript-Starter

  
  
  Danke