event loop explorer

Event Loop Explorer

حول المشروع

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

لقطات الشاشة:

العرض التوضيحي:

لا تتردد في تجربتها هنا: https://vault-developer.github.io/event-loop-explorer/

القيود والتبسيط المعروفة:

• يتم تحليل رمز JavaScript إلى AST باستخدام Acorn Parser ، ثم يتم إنشاء ترتيب الأحداث. تعمل جميع الأمثلة الافتراضية كما هو متوقع ، يمكنك محاولة تعديل الكود ومعرفة كيفية عمله. ومع ذلك ، لا يتم تغطية جميع الحالات. لن يعمل مشغلات المهام Async/Await ، وعودات المعقدة ، و SetInterval ، كما هو متوقع.
• عادةً ما يتم تشغيل مرحلة العرض كل 16.66 مللي ثانية (60 إطارًا في الثانية) ، ولكن في هذا المشروع ، يتم تبسيطها إلى كل دائرة حلقة حدث ثانية فقط. نحن نحسب كل دائرة كـ 360 مللي ثانية للبساطة ، لذلك يتم تشغيل مرحلة العرض كل 720 مللي ثانية.
• واجهة المستخدم ليست صديقة للهاتف المحمول ، يرجى استخدام أجهزة سطح المكتب فقط.

مساهمة:

إذا كنت ترغب في المساهمة ، فلا تتردد في توتر هذا المستودع وإنشاء طلب سحب.
هناك الكثير من الموضوعات في قسم "الخطط المستقبلية".
هل لديك سؤال أو فكرة؟
لا تتردد في رفعها في جلسة مناقشاتنا؟

إطلاق محليا:

 git clone [email protected]:vault-developer/event-loop-explorer.git

cd event-loop-explorer

yarn install

yarn dev

الخطط المستقبلية:

• إصلاح الرسوم المتحركة المتأخرة في عجلة حلقة الحدث ؛
• أضف وظيفة الخطوة إلى الأمام ؛
• أضف إجراء github للتحقق من PRS ؛
• جعل تخطيط الهاتف المحمول أكثر سهولة في الاستخدام.
• إضافة بناء جملة التحقق من الرمز ؛
• تحقق من حالات Edge JS ، بما في ذلك new Promise((res) => {res(console.log(4))}) ؛
• أضف تبديلًا إلى وحدة التحكم للتبديل بين إخراج Console.log والسجلات الشاملة لكل خطوة ؛
• إضافة اختبارات الوحدة ؛
• قم بتنظيف الكود ، وإزالة Todos ؛

مستوحاة من:

• JS Visualiser بواسطة Andrew Dillon
• "في الحلقة" التي قدمها جيك أرشيبالد في jsconf.asia 2018