或者帶有兩個(gè)輔助函數(shù)的普通 javascript？
在本文中，我將討論如何使用 fusor 庫(kù)開(kāi)發(fā)可重用的 web 組件 以及這樣做的好處。
這些組件可以組合成成熟的 web 應(yīng)用程序，與使用 react、angular、vue、solid、svelte 等創(chuàng)建的應(yīng)用程序相同。
fusor api 僅由兩個(gè) 主要函數(shù)組成：
創(chuàng)建包裝在特殊對(duì)象中的 dom 元素。
更新包裝在特殊對(duì)象中的 dom 元素。
加上一些很少使用的功能，例如：
從特殊對(duì)象獲取 dom 元素。
你不需要了解這個(gè)特殊物體的任何信息。
創(chuàng)建 dom 元素
通過(guò) jsx 創(chuàng)建
import { getelement } from "@fusorjs/dom";
const count = 0;
// create via jsx
const message = <div>seconds {count} elapsed</div>;
document.body.append(getelement(message)); // get
登錄后復(fù)制
我們使用了 create 和 get api 函數(shù)。
替代性非 jsx 創(chuàng)建
import { div } from "@fusorjs/dom/html";
const message = div("seconds ", count, " elapsed"); // create
登錄后復(fù)制
更新 dom 元素
import { getelement, update } from "@fusorjs/dom";
let count = 0;
const message = <div>seconds {() => count} elapsed</div>; // create
document.body.append(getelement(message)); // get
setinterval(() => {
count += 1;
update(message); // update
}, 1000);
登錄后復(fù)制
我們使用了update api 函數(shù)。它以遞歸方式更新 dom 元素及其所有子元素。它從函數(shù)結(jié)果中檢索新值，使它們變得動(dòng)態(tài).
子項(xiàng)、屬性和屬性都可以是動(dòng)態(tài)的。
<div class="{()"> (toggle ? "on" : "off")} />
<br>僅當(dāng)新值與當(dāng)前值<p>不同時(shí)，才會(huì)發(fā)生 dom 更新。<strong>
</strong>
設(shè)置參數(shù)
</p>
<h2>大多數(shù)時(shí)候，你會(huì)照常設(shè)置參數(shù)：</h2>
<p>
</p>
<pre class="brush:php;toolbar:false"><div style="padding:1em"></div>
登錄后復(fù)制
但是，有時(shí)您需要區(qū)分屬性
和屬性。要指定它們的類型，您可以在它們的名稱中添加 _a 或 _p 后綴：
<div name1_a="attribute" name2_p="property"></div>
登錄后復(fù)制
要添加事件處理程序
，您必須始終使用 _e 后綴：
<div click_e="{()"> "event handler"} />
<br>還有其他類型，其中一些可以采取額外的選項(xiàng)<p>以確保完整的<strong>w3c標(biāo)準(zhǔn)</strong>兼容性：<strong>
</strong>
</p>
<pre class="brush:php;toolbar:false"><div click_e_capture_once="{()"> "event handler"} />
<br>
創(chuàng)建可重用組件
<h2>使用 fusor 的特殊對(duì)象組成您的組件。將狀態(tài)和參數(shù)封裝在函數(shù)內(nèi)。將您的組件名稱大寫。</h2>
<p>這是一個(gè)計(jì)數(shù)按鈕組件的示例：</p>
<p>
</p>
<pre class="brush:php;toolbar:false">import { getelement, update } from "@fusorjs/dom";
const countingbutton = (props) => {
let count = props.count ?? 0; // init state
const self = (
<button click_e="{()"> {
count += 1;
update(self);
}}
>
clicked {() => count} times
</button>
);
return self;
};
const app = () => (
<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()));
登錄后復(fù)制
countingbutton 組件僅更新其自身 dom 元素的部分
，而不影響應(yīng)用程序的其余部分。
一旦你完全理解了上述組件的工作原理，你就可以用稍微
更短
的方式重寫它，同時(shí)達(dá)到相同的結(jié)果：
const countingbutton = ({ count = 0 }) => (
<button click_e="{(event," self> {
count += 1;
update(self);
}}
>
clicked {() => count} times
</button>
);
登錄后復(fù)制
每個(gè)事件處理回調(diào)函數(shù)接收兩個(gè)參數(shù)：標(biāo)準(zhǔn)事件對(duì)象和當(dāng)前特殊對(duì)象。
再一次，如果您理解上面的示例，請(qǐng)查看同一組件的
最短
版本：
const countingbutton = ({ count = 0 }) => (
<button click_e_update="{()"> (count += 1)}>
clicked {() => count} times
</button>
);
登錄后復(fù)制
我們添加了 update 選項(xiàng)，用于在調(diào)用事件處理回調(diào)后刷新組件，這與前面的示例等效。
生命周期
在深入開(kāi)發(fā)實(shí)際應(yīng)用程序之前我們需要了解的最后一個(gè)方面是組件生命周期。
它僅由四個(gè)階段組成：
- 創(chuàng)建組件
連接到 dom
更新 dom
與 dom 斷開(kāi)
import { getElement, update } from "@fusorjs/dom";
const IntervalCounter = ({ count = 0 }) => {
console.log("1. Create the component");
return (
<div mount="{(self)"> {
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
</div>
);
};
const instance = <intervalcounter></intervalcounter>;
const element = getElement(instance);
document.body.append(element);
setTimeout(() => element.remove(), 15000);
登錄后復(fù)制
mount 屬性有一個(gè)函數(shù)，當(dāng)組件被添加到 dom 時(shí)運(yùn)行。該函數(shù)采用一個(gè)參數(shù)：當(dāng)前的特殊對(duì)象。它還可以返回另一個(gè)在組件從 dom 中刪除時(shí)運(yùn)行的函數(shù)。
我們完全控制生命周期的這四個(gè)階段。這讓我們可以使用自定義的
異步
或并發(fā)方法來(lái)創(chuàng)建、更新和比較組件，并考慮不同的策略和動(dòng)畫(huà)幀。
教程到此結(jié)束
從本教程中可以看出，fusor 簡(jiǎn)單、簡(jiǎn)潔、明確。大多數(shù)時(shí)候，您只會(huì)使用它的
兩個(gè)
api 函數(shù)。然而，它在需要時(shí)也提供了很多控制和靈活性。
所以，回答標(biāo)題中的問(wèn)題，fusor 是一個(gè)小型 javascript 庫(kù)，不是框架，但它可以達(dá)到與其他框架相同的結(jié)果。
開(kāi)始編碼
以上所有示例都可以在 codesandbox 上找到。
另外，請(qǐng)查看 svg 模擬時(shí)鐘示例。
這是一個(gè)真實(shí)世界的應(yīng)用程序。
樣板入門項(xiàng)目：
javascript 入門
typescript 入門
謝謝
