لذا فأنت في حالة الجحيم / فيما يلي - إليك كيفية الخروج منه

تصوير لوكا برافو على Unsplash

ما هو هذا الموضوع؟

إذا كنت من خلفية جافا سكريبت ، فقد تكون سمعت مصطلحات callback hell أو async / await hell. يبدو شيء مثل هذا:

الرعب.

هناك موقف مشابه باستخدام فقط إذا / آخر كذلك. يمكنك تسمية هذا على أنه مطورون مهووسون ، أو تجاهله من خلال التفكير في أن هذا أمر جيد في بعض الحالات.

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

لغرض هذه المقالة ، سأعرض مثالًا باستخدام ReactJS. يمكن تطبيق المبدأ نفسه في Javascript أو أي لغة في هذا الشأن.

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

لنرسم صورة يتم إعطاؤك زرًا للتطبيق في React & يحتوي الزر على خيارين لموضوع ، إما افتراضي أو أساسي. تعتقد أنه بسيط ويمكنك كتابة مكون الخاص بك:

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

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

لذلك يكتبون عبارة منفصلة إذا:

حتى الان جيدة جدا …

هذا يكون حيثما تستمتع

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

الآن استنادًا إلى هذا المتطلب ، تقوم بنية API بالكامل بتغيير المكون . ينتهي المطور الذي يعمل على الشفرة بمنطق مثل هذا:

التي خرجت عن السيطرة بسرعة كبيرة ... أليس كذلك؟

وتعتقد لنفسك ، لم يكن هناك شيء يمكنك القيام به :(

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

كل المجموعات الممكنة من القيم التي يمكن أن يحتوي عليها المكون <MyButton /> في وقت واحد

إذا كان هذا يبدو معقدًا بعض الشيء ، فيمكنك محاولة النظر إلى هذا المخطط التالي لتفهمك.

هذا هو نفسه كما في السابق ، يتم حذف قيم FALSE هنا من أجل البساطة

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

المحلول

بناءً على المعايير المذكورة أعلاه ، يمكنني كتابة الكود الخاص بي لتبسيطه.

هذا الرمز هو الآن وسيلة أكثر قابلية للقراءة. يمكن لأي مطور يعمل على هذا الرمز أن يوسّع وظائفه بسهولة وأن يواصل حياته ، مع العلم أنه قام بعمل رائع مع الكود.

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

باستخدام automata (آلات الحالة المحدودة) - مثل طريقة الترميز:

  • الرمز أكثر قابلية للقراءة الآن
  • رمز هو أكثر للصيانة

لا تتردد في مشاركة أفكارك. شكرا لقرائتك.

يمكنك أيضًا الوصول إلي على twitter @ adelibr

المرجع والإلهام: كومة تبادل المنتدى