新しいフロントエンドフレームワーク?-jsチュートリアル-php.cn

新しいフロントエンドフレームワーク?

WBOY

リリース： 2024-08-21 06:14:02

オリジナル

865 人が閲覧しました

New Frontend Framework?

それとも 2 つのヘルパー関数を備えたバニラ JavaScript でしょうか?

この記事では、Fusor ライブラリを使用して再利用可能な Web コンポーネントを開発する方法と、その利点について説明します。

このようなコンポーネントは、React、Angular、Vue、Solid、Svelte などを使用して作成されたものと同等の本格的な Web アプリケーションに組み込むことができます。

Fusor API は、2 つの の主要関数のみで構成されています:

特別なオブジェクトでラップされた DOM 要素を作成します。
特別なオブジェクトでラップされた DOM 要素を更新します。

さらに、次のようなめったに使用されない関数がいくつかあります:

特別なオブジェクトから DOM 要素を取得します。

この特別なオブジェクトについて何も知る必要はありません。

DOM 要素を作成する

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

ログイン後にコピー

create と get API 関数を使用しました。

代替の非 JSX 作成

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

ログイン後にコピー

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);

ログイン後にコピー

update API 関数を使用しました。 DOM 要素とそのすべての子を再帰的に更新します。関数の結果から新しい値を取得し、動的にします。

子、属性、プロパティはすべて動的にすることができます。

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

ログイン後にコピー

DOM の更新は、新しい値が現在の値と異なる場合にのみ行われます。

パラメータの設定

ほとんどの場合、通常どおりパラメータを設定します。

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

ログイン後にコピー

ただし、属性とプロパティを区別する必要がある場合があります。 タイプを指定するには、名前に _a または _p 接尾辞を追加します:

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

ログイン後にコピー

イベントハンドラーを追加するには、常に _e 接尾辞を使用する必要があります:

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

ログイン後にコピー

追加のタイプがあり、その一部は完全な W3C 標準 互換性を確保するために追加の オプションを取ることができます:

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

ログイン後にコピー

再利用可能なコンポーネントを作成する

Fusor の特別なオブジェクトを使用してコンポーネントを作成します。状態とパラメータを関数内にカプセル化します。コンポーネント名は大文字にしてください。

これはカウントボタンコンポーネントの例です:

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()));

ログイン後にコピー

CountingButton コンポーネントは、アプリケーションの残りの部分に影響を与えることなく、独自の DOM 要素の一部のみを更新します。

上記のコンポーネントがどのように機能するかを完全に理解したら、同じ結果を達成しながら、少し短い方法で書き直すことができます。

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

ログイン後にコピー

すべてのイベントハンドラーコールバック関数は、標準イベントオブジェクトと現在の特殊オブジェクトという 2 つの引数を受け取ります。

もう一度、上記の例を理解できたら、同じコンポーネントの最短バージョンを確認してください:

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

ログイン後にコピー

イベントハンドラーコールバックが呼び出された後にコンポーネントを更新するための更新オプションを追加しました。これは前の例と同等です。

ライフサイクル

実際のアプリケーションの開発に入る前に理解する必要がある最後の側面は、コンポーネントのライフサイクルです。

これは 4 つのステージのみで構成されます:

コンポーネントを作成
DOM に接続
DOMを更新
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);

ログイン後にコピー

マウントプロパティには、コンポーネントが DOM に追加されたときに実行される関数があります。この関数は 1 つの引数、つまり現在の特別なオブジェクトを取ります。コンポーネントが DOM から削除されたときに実行される別の関数を返すこともできます。

私たちはライフサイクルのこれら 4 つの段階を完全に制御します。これにより、さまざまな戦略やアニメーションフレームを念頭に置き、カスタムの 非同期 または同時メソッドを使用してコンポーネントを作成、更新、比較できるようになります。