新的前端框架？- 技术经验 -卓越飞翔博客

新的前端框架？

或者带有两个辅助函数的普通 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 {() =&gt; count} elapsed</div>; // create

document.body.append(getelement(message)); // get

setinterval(() =&gt; {
  count += 1;
  update(message); // update
}, 1000);

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

<div class="{()"> (toggle ? "on" : "off")} /&gt;




<br>仅当新值与当前值<p>不同时，才会发生 dom 更新。<strong>

</strong>
  
  
  设置参数
</p>

<h2>大多数时候，你会照常设置参数：</h2>
<p>

</p>
<pre class="brush:php;toolbar:false"><div style="padding:1em"></div>

但是，有时您需要区分属性

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

<div name1_a="attribute" name2_p="property"></div>

要添加事件处理程序

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

<div click_e="{()"> "event handler"} /&gt;




<br>还有其他类型，其中一些可以采取额外的选项<p>以确保完整的<strong>w3c标准</strong>兼容性：<strong>
</strong>

</p>
<pre class="brush:php;toolbar:false"><div click_e_capture_once="{()"> "event handler"} /&gt;




<br>
  
  
  创建可重用组件


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

<p>这是一个计数按钮组件的示例：</p>
<p>

</p>
<pre class="brush:php;toolbar:false">import { getelement, update } from "@fusorjs/dom";

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

  const self = (
    <button click_e="{()"> {
        count += 1;
        update(self);
      }}
    &gt;
      clicked {() =&gt; count} times
    </button>
  );

  return self;
};

const app = () =&gt; (
  <div style="padding:1em">
    <p>three counting buttons</p>
    <countingbutton></countingbutton><countingbutton count="{22}"></countingbutton><countingbutton count="{333}"></countingbutton>
</div>
);

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

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

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

更短

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

const countingbutton = ({ count = 0 }) =&gt; (
  <button click_e="{(event," self> {
      count += 1;
      update(self);
    }}
  &gt;
    clicked {() =&gt; count} times
  </button>
);

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

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

最短

版本：

const countingbutton = ({ count = 0 }) =&gt; (
  <button click_e_update="{()"> (count += 1)}&gt;
    clicked {() =&gt; count} times
  </button>
);

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

生命周期

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

它仅由四个阶段组成：

组件
到 dom
dom

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

const IntervalCounter = ({ count = 0 }) =&gt; {
  console.log("1. Create the component");

  return (
    <div mount="{(self)"> {
        console.log("2. Connect to the DOM");

        const timerId = setInterval(() =&gt; {
          count++;
          update(self);
          console.log("3. Update the DOM");
        }, 1000);

        return () =&gt; {
          clearInterval(timerId);
          console.log("4. Disconnect from the DOM");
        };
      }}
    &gt;
      Since mounted {() =&gt; count} seconds elapsed
    </div>
  );
};

const instance = <intervalcounter></intervalcounter>;
const element = getElement(instance);

document.body.append(element);
setTimeout(() =&gt; element.remove(), 15000);

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

异步

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

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

两个

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

开始编码

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

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

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

样板入门项目：