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

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

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

"معالج الأحداث"} />

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

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

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

إنشاء مكون قابل لإعادة الاستخدام

قم بتكوين مكوناتك باستخدام كائنات Fusor الخاصة. تغليف الحالة والمعلمات داخل الوظائف. قم بكتابة أسماء المكونات الخاصة بك بحرف كبير.

إليك مثال لمكون زر العد:

استيراد { getElement, update } من "@fusorjs/dom"; زر العد الثابت = (الدعائم) => { دع العد = الدعائم. العد ؟؟ 0; // الحالة الأولية ثابت النفس = ( { العد = 1؛ التحديث(الذات); }} > تم النقر على {() => العد} مرات زر> ); عودة النفس؛ }; تطبيق ثابت = () => ( ); document.body.append(getElement(App()));

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

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

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

يقوم مكون CountingButton بتحديث

جزء فقط من عنصر DOM الخاص به دون التأثير على بقية التطبيق.

بمجرد أن تفهم تمامًا كيفية عمل المكون أعلاه، يمكنك إعادة كتابته بطريقة

أقصر قليلاً مع تحقيق نفس النتيجة:

Const CountingButton = ({ count = 0 }) => ( { العد = 1؛ التحديث(الذات); }} > تم النقر على {() => العد} مرات زر> );

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

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

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

تستقبل كل وظيفة رد اتصال لمعالج الأحداث وسيطتين: كائن الحدث القياسي والكائن الخاص الحالي.

مرة أخرى، إذا فهمت المثال أعلاه، فراجع الإصدار

الأقصر من نفس المكون:

Const CountingButton = ({ count = 0 }) => ( (العدد = 1)}> تم النقر على {() => العد} مرات زر> );

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

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

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

لقد أضفنا خيار التحديث لتحديث المكون بعد استدعاء رد اتصال معالج الحدث، وهو ما يعادل المثال السابق.

دورة الحياة

الجانب الأخير الذي نحتاج إلى فهمه قبل الغوص في تطوير تطبيقات العالم الحقيقي هو دورة حياة المكونات.

ويتكون من أربع مراحل فقط:

1. إنشاء المكون
2. الاتصال بـ DOM
3. تحديث DOM
4. اقطع الاتصال عن DOM

استيراد { getElement, update } من "@fusorjs/dom"; const IntervalCounter = ({ العد = 0 }) => { console.log("1. قم بإنشاء المكون"); يعود ( ); }; مثيل const = ؛ عنصر ثابت = getElement(instance); document.body.append(element); setTimeout(() => element.remove(), 15000);

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

const count = 0;

// Create via JSX
const message = 
Seconds {count} elapsed
;

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

تحتوي خاصية التحميل على وظيفة يتم تشغيلها عند إضافة المكون إلى DOM. تأخذ هذه الوظيفة وسيطة واحدة: الكائن الخاص الحالي. ويمكنه أيضًا إرجاع دالة أخرى يتم تشغيلها عند إزالة المكون من DOM.

نحن نتحكم بشكل كامل في هذه المراحل الأربع من دورة الحياة. يتيح لنا ذلك إنشاء المكونات وتحديثها و

مقارنتها باستخدام طرق مخصصة غير متزامنة أو متزامنة، مع وضع الاستراتيجيات وإطارات الرسوم المتحركة المختلفة في الاعتبار.

بهذا يختتم البرنامج التعليمي

كما ترون من هذا البرنامج التعليمي، Fusor بسيط وموجز وصريح. في أغلب الأحيان، ستستخدم فقط وظيفتين

من وظائف واجهة برمجة التطبيقات (API). ومع ذلك، فهو يوفر أيضًا قدرًا كبيرًا من التحكم والمرونة عند الحاجة. لذا، للإجابة على السؤال الموجود في العنوان، Fusor هي مكتبة جافا سكريبت صغيرة، وليست إطارًا، ولكنها يمكنها تحقيق نفس النتائج مثل الأطر الأخرى.

ابدأ الترميز

جميع الأمثلة المذكورة أعلاه متاحة على CodeSandbox.

راجع أيضًا مثال الساعة التناظرية SVG.

إليك تطبيقًا حقيقيًا.

المشاريع النموذجية المبدئية:

مشغل جافا سكريبت
كاتب TypeScript
شكرًا لك