新的前端框架？-js教程-PHP中文网

New Frontend Framework?

或者带有两个辅助函数的普通 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>
);

登录后复制

我们添加了更新选项，用于在调用事件处理程序回调后刷新组件，这与前面的示例等效。

生命周期

在深入开发实际应用程序之前我们需要了解的最后一个方面是组件生命周期。

它仅包含四个阶段：

创建组件
连接到 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);

登录后复制

mount 属性有一个函数，当组件被添加到 DOM 时运行。该函数采用一个参数：当前的特殊对象。它还可以返回另一个函数，该函数在组件从 DOM 中删除时运行。

我们完全控制生命周期的这四个阶段。这让我们可以使用自定义的异步或并发方法来创建、更新和比较组件，并考虑不同的策略和动画帧。