或者带有两个辅助函数的普通 JavaScript？
在本文中，我将讨论如何使用 Fusor 库开发可重用的 Web 组件以及这样做的好处。
这些组件可以组合成成熟的 Web 应用程序，与使用 React、Angular、Vue、Solid、Svelte 等创建的应用程序相同。
Fusor API 仅包含两个 主要函数：
-
创建一个包裹在特殊对象中的 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 中删除时运行。
我们完全控制生命周期的这四个阶段。这让我们可以使用自定义的异步或并发方法来创建、更新和比较组件，并考虑不同的策略和动画帧。
教程到此结束
正如您从本教程中看到的，Fusor 简单、简洁、明确。大多数时候，您只会使用它的两个 API 函数。然而，它在需要时也提供了很多控制和灵活性。
所以，回答标题中的问题，Fusor是一个小型JavaScript库，不是一个框架，但它可以达到与其他框架相同的结果。
开始编码
以上所有示例都可以在 CodeSandbox 上找到。
另外，请查看 SVG 模拟时钟示例。
这是一个真实世界的应用程序。
样板入门项目：
- JavaScript 入门
- TypeScript 入门
谢谢
以上是新的前端框架？的详细内容。更多信息请关注PHP中文网其他相关文章！
