投稿获客
广告
广告 广告 广告
广告 广告 广告 广告
广告 █ 推荐【菠萝云】香港16G内存99元 【CDNCloud】极速、安全可靠的加速体验 广告位联系QQ：253000106 【UStat】免费网站统计平台 SSL证书低至2折 单域名36元起 免费测试！海总一手APK免杀处理 广告位联系QQ：253000106 CDN 服务器 反炸 劫持 域名屏蔽 【UStat】专业网站统计平台 域名注册：海量域名快速注册 安卓免杀 谷歌报毒 封装 苹果签名 广告位联系QQ：253000106 【域名被劫持污染如何处理】 安卓免杀★超级签★封装★谷歌屏蔽 广告位联系QQ：253000106

*本站广告为第三方投放，如发生纠纷，请向本站索取第三方联系方式沟通

  1. 创想鸟首页
  2. web前端

新的前端框架？

程序猿 • • web前端 • 阅读 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

关于作者

程序猿的头像

程序猿签约作者

336.9K 文章
0 评论
1 粉丝
这个人很懒，什么都没有留下～
上一篇 2025年11月8日 03:30:13
下一篇 2025年11月8日 03:35:05

相关推荐

  • Golang开发小型即时消息应用实战 好文分享

    Golang开发小型即时消息应用实战

    先搭建TCP/WS服务器，用goroutine处理连接，通过OnlineMap管理在线用户，基于JSON消息格式实现广播与私聊，前端通过WebSocket通信，逐步扩展功能。 用Go语言（Golang）开发一个小型即时消息应用，是掌握其并发和网络编程能力的绝佳实践。整个过程并不复杂，核心在于理解客户…

    程序猿的头像 程序猿
    2025年12月16日
    000
  • Golang开发RSS订阅聚合器项目 好文分享

    Golang开发RSS订阅聚合器项目

    答案是用Go开发RSS聚合器需设计模块化结构，包含抓取、解析、存储、调度与API功能。通过goroutine并发获取RSS源，利用encoding/xml解析XML，以GUID或链接去重，使用SQLite等持久化数据，并通过HTTP接口返回JSON或RSS格式结果。 用Go语言开发一个RSS订阅聚合…

    程序猿的头像 程序猿
    2025年12月16日
    000
  • GolangRSS阅读器项目开发实战 好文分享

    GolangRSS阅读器项目开发实战

    Golang RSS阅读器开发需利用Go的并发与网络能力，首先通过net/http抓取RSS/Atom源，结合重试与超时机制提升健壮性；解析XML时可选用标准库encoding/xml进行精细控制，或使用gofeed等第三方库简化多格式兼容处理；数据存储根据规模选择SQLite（轻量便捷）或Post…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • 协程与续体：Python和Ruby在Web开发中未普及的深层原因探究 好文分享

    协程与续体：Python和Ruby在Web开发中未普及的深层原因探究

    协程（Python）和续体（Ruby）曾被视为解决Web应用状态管理难题的优雅方案，能简化复杂请求序列。然而，随着AJAX和事件驱动架构的兴起，Web开发重心从线性请求流转向异步、并发交互。这种范式转变削弱了协程和续体在高级别Web状态管理上的优势，导致它们未能成为主流的Web开发模式，尽管它们在底…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Golang Web开发基础与项目结构设计 好文分享

    Golang Web开发基础与项目结构设计

    Golang Web开发的核心在于高效处理HTTP请求并构建可扩展的项目结构。首先利用net/http包启动服务器，结合gorilla/mux、chi或gin等路由框架实现灵活的请求处理；通过database/sql或ORM如GORM进行数据持久化；使用html/template支持服务端渲染，或采…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Golang观察者模式事件监听与通知实现 好文分享

    Golang观察者模式事件监听与通知实现

    Golang中观察者模式的核心组件包括：Subject接口（定义注册、注销、通知方法）、Observer接口（定义Update方法）、具体主题维护观察者列表并通知、具体观察者实现事件处理逻辑、Event结构体封装事件数据，通过接口与goroutine实现解耦与并发安全。 在Golang中实现观察者模…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Golang使用gRPC-Web实现前端通信 好文分享

    Golang使用gRPC-Web实现前端通信

    gRPC-Web代理是前端与Go后端gRPC服务通信的关键桥梁，它将浏览器的HTTP/1.1请求转换为gRPC后端的HTTP/2协议，实现协议转换、CORS处理和双向兼容，确保前端可通过生成的客户端桩安全调用强类型的gRPC服务。 Golang使用gRPC-Web实现前端通信的核心在于，它为浏览器端…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • GolangGUI开发环境 跨平台UI库配置 好文分享

    GolangGUI开发环境 跨平台UI库配置

    Golang GUI开发主流跨平台库包括Fyne、Gio和Wails。Fyne纯Go实现，API直观，适合快速开发；Gio侧重高性能与自定义渲染，适合复杂图形应用；Wails结合Go后端与Web前端，利用现有前端生态，适合熟悉Web开发的开发者。 在Golang中搭建一个可用的GUI开发环境，并配置…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Golang全栈开发实践 前后端分离方案 好文分享

    Golang全栈开发实践 前后端分离方案

    Golang可实现前后端分离全栈开发，后端用Gin等框架提供RESTful或GraphQL API，前端用React/Vue等框架构建界面，通过JSON交互，JWT实现认证，CORS处理跨域，Docker部署，发挥Golang高性能优势。 前后端分离，用Golang做全栈？当然可以！核心在于API的…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • 现代软件开发中的语言选择策略：PHP、GoLang与多语言栈的构建 好文分享

    现代软件开发中的语言选择策略：PHP、GoLang与多语言栈的构建

    本文探讨了在Web、桌面及高性能应用开发中，如何权衡PHP、GoLang等编程语言的选择。面对快速开发与极致性能的需求，没有单一“完美”语言。教程强调应充分利用PHP在Web领域的现有优势，并通过C/C++等语言弥补性能短板，同时根据具体平台（桌面、移动）选择最合适的工具，构建灵活高效的多语言技能栈…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Go语言在Google App Engine上的Web应用前端整合策略 好文分享

    Go语言在Google App Engine上的Web应用前端整合策略

    本文探讨了在Google App Engine (GAE) 上使用Go语言开发Web应用时，如何选择合适的“前端”解决方案。鉴于GAE的平台特性，我们推荐使用专为App Engine设计的Go语言Web工具包，如Gorilla Web Toolkit。该工具包能有效处理HTTP请求、路由、会话管理等…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Go语言在Google App Engine上的前端解决方案探讨 好文分享

    Go语言在Google App Engine上的前端解决方案探讨

    本文探讨了在Google App Engine (GAE) 上使用Go语言开发Web应用时，如何选择合适的前端解决方案。鉴于GAE的特性，文章推荐了Gorilla Web Toolkit作为Go后端与前端集成的有效工具，并分析了其与GAE的契合点，同时提供了前端架构选择的通用考量，旨在为开发者提供一…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Google TV 配对协议中的 SSL 握手失败与 Go 语言客户端证书处理 好文分享

    Google TV 配对协议中的 SSL 握手失败与 Go 语言客户端证书处理

    本文旨在解决使用 Go 语言连接 Google TV 配对协议时遇到的 SSL 握手失败问题。核心在于 Google TV 要求客户端提供特定格式的客户端证书进行身份验证。文章将详细解释为何会发生握手失败，并提供解决方案，包括客户端证书的生成要求（特别是通用名称 CN 的格式），以及如何在 Go 语…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Golang处理跨域请求怎么做 配置CORS中间件方案 好文分享

    Golang处理跨域请求怎么做 配置CORS中间件方案

    使用 rs/cors 中间件是解决 golang 后端跨域问题的推荐方案，通过配置 allowedorigins、allowedmethods 等参数可精准控制 cors 策略，支持 net/http 和 gin 框架，能自动处理预检请求且避免手动设置头部的遗漏风险，生产环境应避免通配符并明确指定可…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • 使用 jQuery Ajax 在 Go 程序中加载新 HTML 表单 好文分享

    使用 jQuery Ajax 在 Go 程序中加载新 HTML 表单

    本文将探讨如何在使用 Go 语言构建的 Web 应用中，通过 jQuery Ajax 请求成功处理 HTML 表单后，加载新的 HTML 表单。我们将介绍如何通过 JavaScript 和 Go 程序实现这一目标，重点在于如何避免页面刷新和 URL 更改，从而提供更流畅的用户体验。核心思路是利用 j…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • Go语言与GUI开发：现状、挑战与实践选择 好文分享

    Go语言与GUI开发：现状、挑战与实践选择

    Go语言并非主要为图形用户界面（GUI）开发而设计，因此其主流集成开发环境（IDE）通常不内置类似Visual Studio或NetBeans那样的可视化GUI设计器。尽管Go语言本身具备构建GUI应用的能力，但其生态系统在这方面相对不成熟，开发者需依赖第三方库和工具，并通常采用代码驱动或Web技术…

    程序猿的头像 程序猿
    2025年12月15日
    000

  • 如何用Golang开发WebAssembly交互 实现前后端统一语言栈

    用golang开发webassembly实现前后端统一语言栈可行。1. 编译go代码为wasm模块，使用goos=js和goarch=wasm进行编译；2. 引入wasm_exec.js作为前端胶水文件加载wasm模块；3. 使用syscall/js包实现go与javascript交互，包括操作do…

    程序猿的头像 程序猿
    2025年12月15日 • 好文分享
    000
  • 技术栈收敛是否就是技术栈选型？ 好文分享

    技术栈收敛是否就是技术栈选型？

    技术栈收敛与选型的细致解读 技术开发中，技术栈收敛和选型经常被提及，但两者并非完全等同。本文将深入探讨它们之间的关系。 技术栈选型指的是在项目初期或特定需求下，从多个可行方案中选择合适的技术组合的过程。例如，后端可以选择Java、Python或Go，前端可以选择React、Vue或Angular等。…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • PHP开发者该转Go还是转前端？ 好文分享

    PHP开发者该转Go还是转前端？

    PHP开发者职业发展：Go语言还是前端？ 技术栈的选择直接影响着程序员的职业发展。一位资深PHP开发者，因公司内部不同技术岗位薪资差异而面临职业转型抉择：是转向Go语言，还是选择前端开发？本文将分析其面临的困境，并提供一些建议。 现状分析 这位开发者发现，公司Android和嵌入式C开发者的薪资远高…

    程序猿的头像 程序猿
    2025年12月15日
    000
  • 技术栈收敛是否就是技术栈的选型？ 好文分享

    技术栈收敛是否就是技术栈的选型？

    技术栈收敛：并非简单的技术选型 许多人将技术栈收敛等同于技术选型，认为只是在A、B等多种技术方案中进行选择。 这种理解过于简化。技术栈收敛是一个更动态、更复杂的过程，它贯穿于整个项目生命周期。 技术栈选型是收敛的起点，但收敛本身是一个持续优化的过程。 项目初期，为了快速验证想法或满足特定需求，可能会…

    程序猿的头像 程序猿
    2025年12月15日
    000

发表回复

登录后才能评论
关注微信