مقدمة

عندما صادفت كبار أذهلني أن أصنع نفس الشيء بنكهاتي.

1. لقد قمت بتطوير لوحة أوامر مخصصة يمكن تشغيلها باستخدام Cmd D على نظام Mac أو Ctrl D على نظامي التشغيل Windows/Linux.

2. تعمل لوحة الأوامر هذه كبوابة، مما يسمح للمستخدمين بالانتقال إلى أي مسارات ثابتة محددة مسبقًا داخل التطبيق.

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

4. في هذه المقالة، سأرشدك عبر المكونات الرئيسية وقرارات التصميم وراء هذا المشروع، بما في ذلك استخدام React Portals، والنمط القابل للملاحظة، ومستمعي أحداث النافذة.

التقنيات والأنماط الرئيسية المستخدمة

1. بوابات التفاعل

أنا. للتأكد من أن لوحة الأوامر لا تتداخل مع DOM الجذر، اخترت استخدام React Portals.

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

ثالثا. كان هذا أمرًا ضروريًا لعزل بنية DOM الخاصة بلوحة الأوامر عن بقية التطبيق، مما يضمن عدم تأثر DOM الجذر.

2. نمط يمكن ملاحظته

أنا. لقد قمت بتنفيذ نمط يمكن ملاحظته مشابه لـ Angular's RxJS. كان السبب الرئيسي لاعتماد هذا النمط هو فصل إدارة الحالة ومنطق معالجة الأحداث عن المكون نفسه.

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

ثالثا. يعمل هذا النمط على تحسين نمطية قاعدة التعليمات البرمجية وقابلية صيانتها.

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

3. مستمعو الأحداث

أنا. للكشف عن تفاعلات المستخدم، استخدمت مستمعي أحداث النافذة. تراقب هذه المستمعات عند الضغط على اختصارات لوحة المفاتيح المحددة (مثل Cmd D أو Ctrl D).

ثانيا. عند اكتشاف ضغطات المفاتيح هذه، يتم التحقق من الحالة ذات الصلة، وإذا تم استيفاءها، يقوم Observable ببث الحدث.

لماذا لا نستخدم عمال الويب؟

أنا. قد تتساءل لماذا اخترت عدم استخدام Web Workers.

ثانيا. على الرغم من أن Web Workers ممتازة في تفريغ المهام الحسابية الثقيلة من السلسلة الرئيسية، إلا أنها ليست مناسبة تمامًا لمستمعي الأحداث المتعلقة بـ DOM.
ثالثا. نظرًا لأن تركيز هذا المشروع كان على التعامل مع أحداث DOM بكفاءة، كان النمط Observable هو الاختيار الأكثر ملاءمة.

التعاون والخطوات التالية

أنا. التنفيذ الحالي هو خفيف الوزن ، مع قاعدة تعليمات برمجية تبلغ حوالي 900 بايت . أنا منفتح على التعاون مع أي شخص مهتم بتحسين هذا المشروع بشكل أكبر أو حتى تجميعه كمكتبة npm.

ثانيا. لا تتردد في استكشاف الكود والتواصل إذا كنت ترغب في المساهمة!

*رابط GitHub:- *(https://github.com/Ashutoshsarangi/react-portal)

مرجع
https://github.com/timc1/kbar?tab=readme-ov-file