Neues Frontend-Framework?

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 zweiHauptfunktionen:

• Erstellenein DOM-Element, das in ein spezielles Objekt eingeschlossen ist.
• Aktualisierenein DOM-Element, das in ein spezielles Objekt eingeschlossen ist.

Plus ein paar seltener genutzte Funktionen wie:

• Rufenein DOM-Element von einem speziellen Objekt ab.

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

Erstellen Sie ein DOM-Element

Erstellung über 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

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 = <div>Seconds {() => count} elapsed</div>; // 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.

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

DOM-Aktualisierungen erfolgen nur, wenn die neuen Werte von den aktuellen abweichen.

Parameter einstellen

Meistens werden Sie die Parameter wie gewohnt einstellen:

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

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:

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

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

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

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

<div click_e_capture_once={() => "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 = (
    <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()));

Die CountingButton-Komponente aktualisiert nur einen Teil 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 }) => (
  <button
    click_e={(event, self) => {
      count += 1;
      update(self);
    }}
  >
    Clicked {() => count} times
  </button>
);

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

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

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

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:

1. Erstellendie Komponente
2. Verbindenmit dem DOM
3. Aktualisierendas DOM
4. Trennen vom 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);

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. Dies ermöglicht uns das Erstellen, Aktualisieren und Vergleichen von Komponenten mit benutzerdefinierten asynchronen oder gleichzeitigen Methoden unter Berücksichtigung unterschiedlicher Strategien und Animationsrahmen.

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 Beispiel einer SVG-Analoguhr an.

Hier ist eine reale Anwendung.

Boilerplate-Starterprojekte:

• JavaScript-Starter
• TypeScript-Starter

Danke

Das obige ist der detaillierte Inhalt vonNeues Frontend-Framework?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!