أمثلة عملية. عروض مباشرة.
اختر مثالًا لفتحه بملء الشاشة مع المعاينة المباشرة والكود المصدري جنبًا إلى جنب.
الأساسيات
4الأنماط التي يتكون منها كل تطبيق Nuclo.
عدّاد
غيّر الحالة ثم استدعِ update(). يُحدَّث النص الديناميكي.
قائمة المهام
استخدم list() للعناصر المتكررة. استدعِ update() بعد كل تغيير.
مرشح البحث
صفِّ مصفوفة باستخدام JavaScript عادي، واعرض النتائج باستخدام list().
التنسيق
استخدم css() لإنشاء أصناف CSS، وcx() للتغييرات الشرطية الصغيرة.
المكوّنات
4دوال عادية بمعلمات ثابتة وديناميكية وعناصر فرعية وقوائم تُطابق بالهوية وبيانات متداخلة. تحصي كل معاينة مرات التركيب.
معلمات ثابتة وديناميكية
تُقرأ معلمة القيمة مرة واحدة عند بناء المكوّن، بينما تُقرأ معلمة الدالة عند كل update(). يعمل المكوّن نفسه مرة واحدة في الحالتين، ويثبت ذلك عدّاد التركيب.
العناصر الفرعية والمعدّلات
يمرّر المكوّن عناصره الفرعية باستخدام النشر: بُناة ونصوص وكائنات سمات ومعدّلات. توضع الأجزاء الشرطية في when()، فلا يُعاد بناء المكوّن المحيط بها.
هوية عناصر القائمة
تحتفظ list() بالصف ما دام عنصره في المصفوفة: أعد الترتيب وأدرج عناصر وغيّر أسماءها دون فقدان المدخلات أو التركيز. ينسخ مفتاح التبديل الكائنات عند كل تحديث ليوضح تكلفة كسر الهوية.
بيانات متداخلة
فريق يضم أعضاء لكل منهم مهام: مكوّن لكل مستوى، واستدعاءات list() متداخلة، وعدّادات مشتقة بدوال تقرأ الكائنات نفسها. لا تُعدّل التغييرات العميقة إلا العقد المعنية.
API
13عرض صغير لكل لبنة أساسية، وهي العروض نفسها المضمّنة في التوثيق.
بُناة الوسوم
يستقبل الباني سمات وعناصر فرعية ثابتة ونصًا ديناميكيًا. يغيّر Rename الحالة ثم يستدعي update().
المكوّنات
المكوّن دالة عادية. يحتفظ كل استدعاء Counter() بعدّاده الخاص.
السمات
يمكن أن تكون قيم السمات دوال. يبدّل الزر الثاني busy ويستدعي update()؛ فتتبع سمات disabled وaria-busy لزر Save هذه القيمة.
الأحداث
onInput وonKeyDown سمتان عاديتان. اكتب ثم اضغط Escape للمسح.
دورة الحياة
يبدأ onMount مؤقتًا متكررًا ويُرجع دالة تنظيفه. تنفّذ إزالة التركيب دالة التنظيف، فيتوقف العد حتى يُركَّب المؤقت مجددًا.
تحديثات صريحة
لا يغيّر count++ سوى المتغير. يُحدَّث النص عند استدعاء update() التالي، سواء من الزر أو أي شيء آخر في الصفحة.
القيم الديناميكية
عدّل الاسم. حُدّد النص الثابت عند بناء العنصر، بينما يُعاد حساب النص الديناميكي عند كل update(). يعيد forceUpdate() بناء الشجرة، فيُحدَّث النص الثابت أيضًا.
update()
يشغّل كل استدعاء update() جميع القيم الديناميكية حتى لو لم تتغير بياناتها. تزيد العروض الأخرى في هذه الصفحة العدّاد أيضًا.
scope()
يضيف كلا الزرين عنصرًا ويغيّر اسم المستخدم. لا يحدّث update('cart') إلا اللوحة التابعة لذلك النطاق.
when()
يُختار أول شرط متحقق، وإلا تُعرض .else(). يُبنى كل فرع جديد من الصفر.
list()
تُطابق الصفوف بهوية الكائنات. حدّد مربع اختيار في صف ثم اضغط Reverse: ينتقل عنصر <li> نفسه بمربع الاختيار وكل محتوياته.
region() وinto()
تخطيط بمنطقة رئيسية مكدّسة ومنطقة جانبية تُملآن من خارجه. اكتب في Home، وافتح الحوار ثم أغلقه: يبقى النص. يملأ Article المنطقتين باستدعاء into() واحد.
forceUpdate()
يحدّث update() سطر lang الديناميكي فقط. يستدعي forceUpdate() الدالة App مجددًا ويعدّل عنصر <h1> نفسه. يعيد الشكل الصريح بناء هذه الشجرة وحدها، لا الصفحة بأكملها.
التنسيق
3أنشئ أصناف CSS وادمجها واستخدم سمة صغيرة.
النماذج
3تحقق بدوال عادية تقرأ الحالة، مع حقول جرى التفاعل معها وخطوات وصفوف ديناميكية.
التحقق من الحقول
قواعد على هيئة دوال تقرأ الحالة العادية، وأخطاء تظهر بعد التفاعل مع الحقل، وفحص غير متزامن مؤجّل لتجميع المدخلات مع حالة انتظار، وإرسال ينتظر اكتمالها جميعًا.
معالج متعدد الخطوات
ثلاث خطوات كفروع when() فوق كائن بيانات واحد. يفعّل Next التحقق من حقول الخطوة ولا يتقدم إلا عند نجاحها. تعرض المراجعة كل البيانات مع روابط Edit.
صفوف ديناميكية
بنود فاتورة في مصفوفة تُعرض باستخدام list(). يتحقق كل صف من بياناته، ويحسب الإجمالي الصفوف الصالحة فقط، وتحتفظ الصفوف بمدخلاتها عند إضافة غيرها أو حذفها.
SVG
27مخططات وتحريكات وأدوات وألعاب ببُناة SVG، تحركها بيانات عادية وأحداث المؤشر وupdate().
مخطط أعمدة
مستطيلات من مصفوفة. قيمتا y وheight دالتان للبيانات، لذا ينقل update() الأعمدة.
مخطط خطي
مسار تُبنى قيمة d له من النقاط، مع مساحة ذات تدرّج لوني ودائرة لكل نقطة.
مخطط حلقي
دائرة لكل شريحة. تمنح stroke-dasharray كل شريحة حصتها من الحلقة، وتحدد stroke-dashoffset بدايتها.
تحريك SVG
SMIL باستخدام البُناة: تجعل animateSvg الشمس تنبض، وتجعل animateTransformSvg الكوكب يدور. تحدد dur الديناميكية السرعة.
مقياس
قوس يمتلئ باستخدام stroke-dashoffset وإبرة تدور بتحويل CSS. كلاهما دالة لعدد واحد.
مخطط راداري
خمس قيم على خمسة محاور. الشكل مسار واحد تُحسب قيمة d له من البيانات، لذا يغيّر update() شكله.
خريطة حرارية
شبكة مستطيلات تتبع فيها fill-opacity مستوى القيمة. انقر خلية لزيادتها؛ ويشكّل عنصر titleSvg الفرعي تلميحها.
تلميح عند التحويم
أحداث المؤشر على عناصر SVG. تختار onPointerEnter النقطة النشطة وتنتقل إليها مجموعة التلميح.
محرر المنحنيات
اسحب مقابض منحنى بيزييه تكعيبي. تختار onPointerDown نقطة، وتنقلها onPointerMove على عنصر svg، فيتبعها المسار.
ساعة
العقارب خطوط، وقيمة transform لكل منها دالة للوقت. يبدأ onMount النبضات ويُرجع دالة التنظيف.
أيقونات متبدلة
أيقونة قائمة تتحول إلى علامة إغلاق بانتقالات CSS، وقلب ينبض بتحريك SMIL يبدأ عند النقر.
تدفق مباشر
تتحرك سلسلتان نحو اليسار بمؤقت. يجعل انتقال CSS بطول نبضة واحدة الحركة سلسة، ويمكن قراءة أي عينة بالتحويم.
مخطط شموع
أربعون موضعًا يقرأ كل منها شمعته. غيّر الإطار الزمني، أو بدّل المتوسط، أو حوّم لقراءة الأرقام، أو شاهد الشمعة المباشرة تتحدث.
سباق الأعمدة
عشرة أعمدة لا تغادر DOM مطلقًا. تحدد رتبتها translateY، فينقل الانتقال كل عمود إلى صفه كلما تغيرت القيم.
مخطط مساحات مكدّسة
تتحول أربعة أشرطة بين التخطيط المكدّس والتدفقي والنسبي. إخفاء سلسلة يجعل سماكة شريطها صفرًا فقط، فيحتفظ كل مسار بشكله.
خريطة شجرية
تخطيط من مستطيلات متقاربة الأبعاد يمكنك استكشاف مستوياته. يحرّك تبديل المقياس كل خلية إلى مستطيلها الجديد، ويعرض النقر على مجموعة عناصرها الفرعية.
مدرّج تكراري مباشر
تتدفق عينات من أربعة توزيعات. تُعاد حسابات الفئات عند كل تغيير، ويتبع منحنى جرسي ملائم المتوسط، ويحدد شريط تمرير عدد الفئات.
لوحة رسم
ترسم أحداث المؤشر خطوطًا متعددة المقاطع. تعرض list() خطًا لكل ضربة رسم، وتطول الضربة الجارية عند كل update().
مقبض دوّار
شريط تمرير مخصص: تحدد زاوية المؤشر القيمة، وتغيّرها مفاتيح الأسهم تدريجيًا، ويحوّل pathLength="100" القيمة إلى شرطة على المسار.
عجلة الألوان
اختر درجة اللون بالزاوية والتشبّع بالمسافة. تتكون العجلة من تسعين قطاعًا وتدرّج شعاعي وقرص داكن.
سبيروغراف
تدور عجلة داخل حلقة ويتتبع قلم مسارها. يطيل كل إطار شرطة واحدة ويحدّث نطاق scope() الخاص به فقط.
كرات مرتدة
جاذبية وجدران وتصادمات ضمن حلقة requestAnimationFrame. اسحب إلى الخلف ثم أفلت لإطلاق كرة.
كتل لزجة
يمزج مرشح تمويه ومصفوفة ألوان الكتل معًا. يتبع أثر من الدوائر المؤشر.
رسم بياني بالقوى
تتنافر العقد وتتجاذب الروابط ويهدأ التخطيط تدريجيًا حتى يستقر. اسحب عقدة أو انقرها لإضافة عقدة فرعية.
تحديد وتكبير
حدّد نطاقًا بالسحب في النظرة العامة لتكبير المخطط أعلاه. يتبع clipPath التحديد لتلوين النطاق المختار.
إكس أو
العب ضد الحاسوب. تضيف when() كل علامة، ويرسمها تحريك CSS على شرطات مسارها.
نص دائري
اكتب نص الشارة. يثني textPath النص حول دائرة، وتضبط textLength طوله ليكمل دورة واحدة تمامًا.
التوجيه
6جداول المسارات والمطابقة والمسار النشط والطبقات والمحمّلات. nuclo-router حزمة مستقلة: npm install nuclo nuclo-router.
تطبيق بمسارات
تطبيق فعلي بموجّه خاص يعمل داخل الإطار: جدول مسارات وoutlet() واحد وروابط عادية وحالة انتظار وصفحة 404. تنقّل ثم استخدم Back.
مسارات متداخلة
Docs تخطيط ذو مسارات فرعية. يُعرض الموضوع في outlet() الخاص به، وتُحل روابط ./topic نسبة إلى مسار التخطيط. اكتب ملاحظات ثم بدّل المواضيع: لا يُعاد بناء التخطيط.
محمّلات المسارات
تُصدّر صفحة المنشور load() تعمل قبل بناء الصفحة. راقب router.pending أثناء الانتظار، وحالة الخطأ مع Retry عند رمي استثناء في المنشور المعطوب.
الطبقات
يدفع نموذج الطلب صفحة العميل كطبقة وينتظر نتيجتها. لا يُعاد عرض النموذج، فتظل ملاحظاته محفوظة. ينهي Save عملية الدفع بنتيجة، ويلغيها Cancel أو Back.
موجّهات متعددة وتحميل
موجّهان ومؤشرا تحميل. لكل من تخطيط المتجر وقسمه load()، ويعملان بالتوازي ضمن router.pending واحد. للشريط الجانبي موجّهه الخاص، أُنشئ دون بدء تشغيله، وله مؤشر تحميل مستقل يُحدَّث من onNavigate.
مطابقة الأنماط
أنماط ثابتة و:param و*rest، وجدول قسم مركّب تحت مسارين أبويين. اكتب مسارًا وشاهد match() تحله دون تحميل أي شيء.
التطبيقات
15برامج أكبر بملء الشاشة وكودها المصدري الفعلي في علامات تبويب: سطح مكتب بنوافذ وجدول بيانات ومحادثة وألعاب ومحررات ومكتبات تدير حالتها بنفسها.
باني الصفحات
اكتب مباشرة في الصفحة، واسحب المقابض لإعادة ترتيب الكتل أو نقلها إلى التخطيطات، واضغط / للإدراج، وانقر بالزر الأيمن للإجراءات. نسّق تخطيطات grid وflex، وتراجع عن التعديلات، وعاين بحجم الهاتف، وصدّر HTML.
تنفيذ الخوارزمية خطوة بخطوة
المحرك JavaScript عادي: مولّدات تغيّر مصفوفة وتسلّم التحكم بعد كل خطوة. يستدعي المشغّل next() وupdate()؛ والأعمدة list() فوق الكائنات نفسها، لذا ينقل التبديل عنصرين.
لوحة كانبان
لوحة فريق: أضف المهام وأسندها لأشخاص وعدّلها في حوار وصفِّها بالشخص أو البحث واسحبها بين الأعمدة وتراجع عن الحذف. الأعمدة والبطاقات مصفوفات عادية للكائنات نفسها؛ وكل نقل هو splice(). تُطابق الصفوف بالهوية، لذا يُعاد استخدام عنصر البطاقة عند سحبها أو ترتيبها أو إسنادها أو تعديلها. يثبت ذلك عدّاد التركيب على الشاشة.
مستكشف three.js
مكتبة تدير حالتها بنفسها. تقرأ اللوحة المواضع والألوان والأعلام مباشرة من كائنات three.js وتكتب التعديلات إليها. تستدعي حلقة العرض update() مرة لكل إطار؛ ولا تُنشأ نسخة موازية للحالة.
تمرير لانهائي
تدفق بلا نهاية: تنشئ fetch() وهمية وسريعة كل صفحة عند الطلب في مصفوفة عادية واحدة. لا توجد في DOM إلا الصفوف القريبة من نافذة العرض: تعرض list() الجزء posts.slice(start, end) بين فاصلين، فتبقى الصفحة خفيفة حتى مع مئة ألف منشور. يطلب عنصر مراقبة في النهاية الفعلية الصفحة التالية قبل دخوله حيز الرؤية.
سطح المكتب
سطح مكتب عامل يتضمن الملفات والملاحظات والطرفية والآلة الحاسبة والمؤقت ولوحة كانبان والتطبيق المالي والتقويم. أنشئ المجلدات ونظّمها وعدّل الملاحظات واستخدم أوامر shell على قرص محاكى مشترك محفوظ في المتصفح. اكتب في الحاسبة بلوحة المفاتيح، وانقر أي موضع في الطرفية لتركيز سطر الإدخال، واسحب البطاقات بين الأعمدة، أو سجّل حساباتك في الجدول المالي وشاهد المخططات تتغير؛ يُحفظ السجل في IndexedDB. تحتفظ النوافذ بحالتها عند النقل والتحجيم والتبديل بين التطبيقات؛ ويملأ المؤقت الجاري علبة شريط المهام باستخدام into().
رسم بياني للعقد
صِل الأعداد والنصوص والمفاتيح بعقد العمليات الحسابية والمقارنات وIf، فتُحدَّث كل قيمة أثناء الكتابة. الدوال رسوم بيانية أيضًا: عقدتا Input وOutput هما منافذ كل Call، ويمكن لـ Call تسمية دالتها نفسها، فتستخدم factorial وsum الاستدعاء الذاتي مع If للخروج. المحرك JavaScript عادي: كل عقدة مولّد يسلّم التحكم لطلب مدخل، وتقودها حلقة واحدة بمكدسها الخاص؛ لذا يداخل sum(50000) خمسين ألف استدعاء في نحو عُشر ثانية دون لمس مكدس استدعاءات JavaScript. لا يوقف الاستدعاء الذاتي بلا مخرج إلا حدّ الخطوات. يكتب السحب x وy ويحدّث نطاق لوحة الرسم فقط؛ ويبيّن عدّاد التنفيذ أن نقل العقد لا يشغّل الرسم البياني.
جدول بيانات تفاعلي
جدول عمل فوق 10,000 كائن صف عادي. البحث والتصفية والترتيب وتقسيم الصفحات دوال عادية على المصفوفة، ومتن الجدول list() للصفحة الحالية. تُطابق الصفوف بالهوية، فينقل الترتيب الصفوف الباقية في الصفحة، ويظل الصف المعدّل الكائن نفسه في كل مكان. يثبت ذلك عدّاد الصفوف المبنية.
محادثة
محادثة بثلاث قنوات، كل منها كائن عادي يضم السجل والمؤشر وحالة الكتابة والمسودة وموضع التمرير. يحفظ التبديل كل قناة كما كانت، ولا يحدّث update("chat-sidebar") إلا شارات غير المقروء. يُحمَّل السجل إلى أعلى بلا نهاية باستخدام unshift() وscrollTop تزداد بمقدار الارتفاع المضاف. تظهر رسالتك قبل وصولها إلى الخادم، وتعدّل send() الكائن نفسه؛ ولا تعيد Retry أو Edit أو Delete أو التفاعلات بناء صفه. تدعم الرسائل الكود والنص العريض والروابط وإشارات @.
لوحة معلومات مباشرة
بطاقات تُحدَّث بمعدلات مختلفة، من عشرين مرة في الثانية إلى مرة واحدة. كل بطاقة scope()، ويستدعي مؤقتها update() بمعرّفها، فلا تعيد النبضة حساب غيرها. تُحصى مرات حساب كل قيمة ديناميكية على الشاشة: انتقل إلى update() عام فتُحسب الساعة نحو مئة مرة في الثانية لتتغير مرة واحدة.
محرر البكسل
الصورة مصفوفة عادية واحدة من 1024 سلسلة لونية، وتقرأ كل خلية لونها منها. تكتب ضربة الرسم في المصفوفة وتستدعي update()؛ وعند انتهائها يحتفظ المحرر بنسخة عبر slice(). يعيد التراجع والإعادة وكل عنصر في list() السجل مصفوفة أقدم: بلا مخزن حالة أو بيانات غير قابلة للتغيير.
الثعبان
حلقة اللعبة مؤقت يستدعي step() على كائنات عادية ثم update() مرة لكل نبضة. الثعبان list() لكائنات خلاياه، ويصبح كائن الذيل الرأس الجديد كل نبضة، فيتحرك عنصر واحد دون بناء عناصر جديدة؛ ولا يزيد عدّاد الأجزاء المبنية إلا عندما يأكل الثعبان. يظهر الطعام بتحريك keyframes().
متتابع الخطوات
مكتبة تدير توقيتها بنفسها. يحجز Web Audio كل نغمة مسبقًا على خطه الزمني، والنمط مصفوفة منطقية عادية ثنائية الأبعاد تبدّلها الشبكة ويقرأها المجدول؛ فتُسمع النقرة في المرور التالي. لا يحدّث مؤشر التشغيل إلا نطاق scope() الخاص به عند تغير الخطوة المسموعة. يبدأ الصوت عند أول Play ويُغلق في تنظيف التركيب، فيتوقف عند مغادرة المثال.
مبدّل اللغة
كل تسمية قيمة ثابتة مكتوبة كما في تطبيق أحادي اللغة، فلا تعيد update() قراءتها: نقرات السلة تحدّث الكميات والإجماليات فقط. يستدعي تبديل اللغة forceUpdate() على هذه الشجرة، فتعمل الدالة مجددًا وتُعدّل العناصر نفسها، بما فيها lang وdir. تأتي العملات وصيغ الجمع والتواريخ والقوائم من Intl، وتبقى السلة والقسيمة المدخلة بعد التبديل.
محرر السمة
مكتبة مكوّنات صغيرة: تسمّي createCss() الرموز، وتبني variants() منها الأزرار والشارات والبطاقات وحقول الإدخال والتنبيهات ومفاتيح التبديل. الرموز متغيرات CSS، لذا يُنشأ كل صنف مرة واحدة. يغيّر كل عنصر تحكم كائن سمة عاديًا ويستدعي update()، فتُعاد كتابة نص عنصر style واحد.