新的前端框架？

或者带有两个辅助函数的普通 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);

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

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

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

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

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

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

 "event handler"} />

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

 "event handler"} />

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

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

基于mui框架修改的移动端城市地址选择

基于mui框架修改的移动端城市地址选择

下载

import { getelement, update } from "@fusorjs/dom";

const countingbutton = (props) => {
  let count = props.count ?? 0; // init state

  const self = (
     {
        count += 1;
        update(self);
      }}
    >
      clicked {() => count} times
    
  );

  return self;
};

const app = () => (
  

    
three counting buttons
    
    
    
  
);

document.body.append(getelement(app()));

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

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

const countingbutton = ({ count = 0 }) => (
   {
      count += 1;
      update(self);
    }}
  >
    clicked {() => count} times
  
);

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

版本：

const countingbutton = ({ count = 0 }) => (
   (count += 1)}>
    clicked {() => count} times
  
);

生命周期

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

它仅由四个阶段组成：

创建
1. 组件
连接
2. 到 dom
更新
3. dom
与 dom 断开

4. 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 入门
谢谢