投稿获客
  1. 创想鸟首页
  2. 用户投稿

新的前端框架？

程序猿 • • 用户投稿 • 阅读 0

新的前端框架？

或者带有两个辅助函数的普通 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 jsxconst message = 
seconds {count} elapsed
;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 = 
seconds {() => count} elapsed
; // createdocument.body.append(getelement(message)); // getsetinterval(() => {  count += 1;  update(message); // update}, 1000);

我们使用了update api 函数。它以递归方式更新 dom 元素及其所有子元素。它从函数结果中检索新值，使它们变得动态.子项、属性和属性都可以是动态的。

 (toggle ? "on" : "off")} />

仅当新值

与当前值

不同时，才会发生 dom 更新。 设置参数

大多数时候，你会照常设置参数：

但是，有时您需要区分

属性

和属性。要指定它们的类型，您可以在它们的名称中添加 _a 或 _p 后缀：

要添加

事件处理程序

，您必须始终使用 _e 后缀：

 "event handler"} />

还有其他类型，其中一些可以采取额外的

选项

以确保完整的w3c标准兼容性：

 "event handler"} />

创建可重用组件

使用 fusor 的特殊对象组成您的组件。将状态和参数封装在函数内。将您的组件名称大写。

这是一个计数按钮组件的示例：

AI新媒体文章 AI新媒体文章

专为新媒体人打造的AI写作工具，提供“选题创作”、“文章重写”、“爆款标题”等功能

AI新媒体文章 75 查看详情 AI新媒体文章 

import { getelement, update } from "@fusorjs/dom";const countingbutton = (props) => {  let count = props.count ?? 0; // init state  const self = (      );  return self;};const app = () => (  
    
three counting buttons
              
);document.body.append(getelement(app()));

countingbutton 组件仅更新其自身 dom 元素的

部分

，而不影响应用程序的其余部分。一旦你完全理解了上述组件的工作原理，你就可以用稍微

更短

的方式重写它，同时达到相同的结果：

const countingbutton = ({ count = 0 }) => (  );

每个事件处理回调函数接收两个参数：标准事件对象和当前特殊对象。

再一次，如果您理解上面的示例，请查看同一组件的

最短

版本：

const countingbutton = ({ count = 0 }) => (  );

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

生命周期

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

它仅由四个阶段组成：

创建组件连接到 dom更新 dom与 dom 断开

import { getElement, update } from "@fusorjs/dom";const IntervalCounter = ({ count = 0 }) => {  console.log("1. Create the component");  return (    
 {        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    
  );};const instance = ;const element = getElement(instance);document.body.append(element);setTimeout(() => element.remove(), 15000);

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

我们完全控制生命周期的这四个阶段。这让我们可以使用自定义的

异步

或并发方法来创建、更新和比较组件，并考虑不同的策略和动画帧。 教程到此结束

从本教程中可以看出，fusor 简单、简洁、明确。大多数时候，您只会使用它的

两个

api 函数。然而，它在需要时也提供了很多控制和灵活性。所以，回答标题中的问题，fusor 是一个小型 javascript 库，不是框架，但它可以达到与其他框架相同的结果。

开始编码

以上所有示例都可以在 codesandbox 上找到。

另外，请查看 svg 模拟时钟示例。

这是一个真实世界的应用程序。

样板入门项目：

javascript 入门typescript 入门 谢谢

以上就是新的前端框架？的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/461059.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

414.1K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
如何更新Linux系统所有软件包 yum和apt升级命令详解
上一篇 2025年11月8日 03:34:32
Win7系统当中searchindexer数据位置怎么进行修改？
下一篇 2025年11月8日 03:34:34

相关推荐

发表回复

登录后才能评论
关注微信