新的前端框架？

或是帶有兩個輔助函數的普通 JavaScript？

在本文中，我將討論如何使用 Fusor 函式庫開發可重複使用的 Web 元件以及這樣做的好處。

這些元件可以組合成成熟的 Web 應用程序，與使用 React、Angular、Vue、Solid、Svelte 等創建的應用程式相同。

Fusor API 僅包含兩個 主要函數：

• 建立一個包裹在特殊物件中的 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);

我們使用了更新 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>
);

每個事件處理回呼函數接收兩個參數：標準事件物件和目前特殊物件。

再一次，如果您理解上面的範例，請查看同一組件的最短版本：

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

我們新增了更新選項，用於在呼叫事件處理程序回調後刷新元件，這與前面的範例等效。

生命週期

在深入開發實際應用程式之前我們需要了解的最後一個方面是元件生命週期。

它只包含四個階段：

1. 建立組件
2. 連線到 DOM
3. 更新 DOM
4. 從 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);

mount 屬性有一個函數，當元件被加到 DOM 時運行。此函數採用一個參數：目前的特殊物件。它還可以返回另一個函數，該函數在組件從 DOM 中刪除時運行。

我們完全控制生命週期的這四個階段。這讓我們可以使用自訂的非同步或並發方法來建立、更新和比較元件，並考慮不同的策略和動畫影格。

教程到此結束

正如您從本教程中看到的，Fusor 簡單、簡潔、明確。大多數時候，您只會使用它的兩個 API 函數。然而，它在需要時也提供了許多控制和靈活性。

所以，回答標題中的問題，Fusor是一個小型JavaScript庫，不是一個框架，但它可以達到與其他框架相同的結果。

開始編碼

以上所有範例都可以在 CodeSandbox 上找到。

另外，請查看 SVG 模擬時脈範例。

這是一個真實世界的應用程式。

樣板入門項目：

• JavaScript 入門
• TypeScript 入門

謝謝

以上是新的前端框架？的詳細內容。更多資訊請關注PHP中文網其他相關文章！