新的前端框架？-魔扣目錄

或者帶有兩個輔助函數的普通 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 選項，用于在調用事件處理回調后刷新組件，這與前面的示例等效。

生命周期

在深入開發實際應用程序之前我們需要了解的最后一個方面是組件生命周期。

它僅由四個階段組成：

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

登錄后復制

mount 屬性有一個函數，當組件被添加到 dom 時運行。該函數采用一個參數：當前的特殊對象。它還可以返回另一個在組件從 dom 中刪除時運行的函數。

我們完全控制生命周期的這四個階段。這讓我們可以使用自定義的

異步

或并發方法來創建、更新和比較組件，并考慮不同的策略和動畫幀。

教程到此結束