新的前端框架？

首页 > 编程 > 新的前端框架？

新的前端框架？

发布于2024-08-28

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 = 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; // Create

document.body.append(getElement(message)); // Get

setInterval(() => {
  count  = 1;
  update(message); // Update
}, 1000);

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

（切换？“开”：“关”）} />

 (toggle ? "on" : "off")} />
与当前值不同时，才会发生 DOM 更新。


  
  
  设置参数


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









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









事件处理程序，您必须始终使用 _e 后缀：



 "事件处理程序"} />




 "event handler"} />
选项以确保完全W3C标准兼容性：



 "事件处理程序"} />




 "event handler"} />


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

以下是计数按钮组件的示例：



从“@fusorjs/dom”导入{ getElement, update };

const CountingButton = (props) => {
  让计数 = props.count ?? 0; // 初始化状态

  常量自我 = (
     {
        计数 = 1；
        更新（自我）；
      }}
    >
      点击 {() => count} 次
    按钮>
  ）；

  返回自我；
};

常量应用程序 = () => (
  

    三个计数按钮
    
    
    
  
）；

document.body.append(getElement(App()));




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()));
 部分 ，而不影响应用程序的其余部分。

一旦您完全理解了上述组件的工作原理，您就可以以稍微
更短的方式重写它，同时获得相同的结果：



const 计数按钮 = ({ count = 0 }) => (
   {
      计数 = 1；
      更新（自我）；
    }}
  >
    点击 {() => count} 次
  按钮>
）；




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


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



const 计数按钮 = ({ count = 0 }) => (
   (count = 1)}>
    点击 {() => count} 次
  按钮>
）；




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



  
  
  生命周期


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

它仅由四个阶段组成：



创建组件

连接到 DOM

更新 DOM

从 DOM 断开



从“@fusorjs/dom”导入{ getElement, update };

const IntervalCounter = ({ 计数 = 0 }) => {
  console.log("1.创建组件");

  返回 （
     {
        console.log("2.连接DOM");

        const timeId = setInterval(() => {
          数数  ;
          更新（自我）；
          console.log("3.更新DOM");
        }, 1000);

        返回（）=> {
          清除间隔(timerId);
          console.log("4. 断开与 DOM 的连接");
        };
      }}
    >
      自安装 {() => count} 秒以来已过去
    
  ）；
};

const 实例 = ;
const 元素 = getElement(实例);

document.body.append(元素);
setTimeout(() => element.remove(), 15000);




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);


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


  
  
  教程到此结束


正如您从本教程中看到的，Fusor 简单、简洁、明确。大多数时候，您只会使用它的
两个 API函数。然而，它还在需要时提供了很多控制和灵活性。

所以，回答标题中的问题，Fusor是一个小型JavaScript库，不是一个框架，但它可以达到与其他框架相同的结果。


  
  
  开始编码


以上所有示例均可在 CodeSandbox 上找到。

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

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

样板启动项目：


JavaScript 入门
TypeScript Starter



  
  
  谢谢