或者带有两个辅助函数的普通 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);
我们使用了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>
);
每个事件处理回调函数接收两个参数：标准事件对象和当前特殊对象。
再一次，如果您理解上面的示例，请查看同一组件的
最短版本：
const countingbutton = ({ count = 0 }) => (
<button click_e_update={() => (count += 1)}>
clicked {() => count} times
</button>
);
我们添加了 update 选项，用于在调用事件处理回调后刷新组件，这与前面的示例等效。
生命周期
在深入开发实际应用程序之前我们需要了解的最后一个方面是组件生命周期。
它仅由四个阶段组成：
- 创建
- 组件 连接
- 到 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 入门
- 谢谢
