إعادة هيكلة الكود وتوثيقه في هذا الدرس، سنلقي نظرة على إعادة هيكلة الكود الخاص بنا وتوثيقه وهناك أخبار جيدة هنا إذا وصلنا إلى هذه النقطة، فقد يعني ذلك أننا قريبون من نهاية ما يتعين علينا القيام به للتعليمات البرمجية أو على الأقل هذا التكرار من خلال ما يتعين علينا القيام به من أجل الكود لذا من المحتمل أن تبدو بعض هذه الأشياء مثل الفطرة السليمة، ولكن في مهنتي الاستشارية والترميز وجدت هذا الفطرة السليمة في بعض الأحيان ليس كل هذا الشائع لذلك إذا كنت تعرف هذه الأشياء بالفعل، فهذا جيد لك بادئ ذي بدء، نريد أن ننظر في طرق إرفاق معالجات الأحداث وكلنا ندخل في عادات الترميز، أليس كذلك؟ المشكلة هنا مع معالجي الحدثين أمامنا هي أننا نريد أن نفعل شيئين مختلفين عندما ينقر شخص ما على زر معين مشكلة الطريقة التي قمنا بها هي أن واحد من هؤلاء سيحل محل الآخر بسبب الطريقة التي قمنا بها بتخصيص الحدث لذلك نريد حقاً تجنب ذلك ونأمل ألا يأتي إلى مرحلة إعادة البناء قبل أن نكتشف ذلك ولكن إذا حدث ذلك ثم دعونا نغير هذا إلى شيء مختلف على سبيل المثال، إذا كان لديك jQuery فيمكنك استخدام on إذا كنت تستخدم JavaScript عادي يمكنك إضافة مستمع الحدث add event listener هذا يؤكد أن أي معالجات إضافية لا تستبدل المعالجات السابقة كما كان لدينا هناك حتى الآن جيدة جدا مرة أخرى، ربما نوع منطقي من المعرفة الشيء التالي هو وأتعود إلى هذه العادة نفسها أحيانًا أدخل في طريقة ولست متأكدًا حقًا من الأشياء عن كائن معين بطريقة سأحتاج إليها لذا لاحظوا أنني حصلت على أسماء متناثرة هناك في عدد قليل من التكوينات المختلفة وأشعر بينما أعيد صياغة ما أريد فعله حقًا هو العودة وجعل هذا الكود أكثر إيجازًا أو على الأقل أقل عرضة لأخطائي في الكتابة لأنني برغم خبرتي الكبيرة في jQuery بمجرد القيام بنسيان علامة الجنيه ثم الكود الخاص بي يصبح لا يعمل لذا، إذا كنت سأغير هذا الأمر سأقوم فقط بإنشاء المتغيرات إذن هذا هو مربع القائمة المنسدلة dropdown لذلك يمكنني فقط عمل الفهرس المحدد أو يمكنني معالجته في البحث عن jQuery والحصول على الخيار المحدد ثم أجري التعليق المسبق prepend عندما أكون جاهزًا لوضع شيء هناك لذلك هناك بعض النصائح السريعة فقط، عن إنقاذ نفسك من نفسك ماذا عن ذلك؟ قد يبدو الشيء التالي مرة أخرى أساسيًا لكن ما لا نريد فعله هو أن ينتهي بنا الحال مع نوع من ملف نصي منفصل حيث نفرغ فقط مجموعة من الدوال هناك عادة سترى أنه يسمى ملف utils الخاص بنا، صحيح لأننا لا نعرف ماذا نسميها هذه نصيحة إذا لم يكن لديك اسم حقيقي واضح لملفك، فمن المحتمل أن يكون لديك الكثير من الأشياء الملقاة في ملف واحد إذاً هناك القليل هنا، لكن لدي جمع وطرح وضرب ثم هذه هي المشكلة أيضًا هذا موجود فقط في مساحة الاسم العامة لأن لدي إضافة أخرى في ملف هذا العميل وإذا كنت أستخدم كلاهما في نفس الصفحة الآن لدي تعارض بقدر ما يذهب هذا، أحد الأشياء التي يمكننا القيام بها هو مجرد وضع ذلك في وحدة وقد نستكشف أيضًا وضعه في الفئة أو الكلاس أيضًا ولكن مع وحدات JavaScript النمطية، يمنحك هذا خيار تصدير دوال معينة فقط وأنت لا تضع الأشياء هناك في مساحة الاسم العامة أو على الأقل بناء أسهل للتأكد من أنك لا تفعل ذلك لذلك كان لدي كل هذا هنا على سبيل المثال الجمع والطرح والضرب والشيء الآخر الذي أنظر إليه عندما أرى هذه الأشياء كما تعلم، لديهم جميعًا مجموعة المعلمات نفسها إذا وجدت نفسك تواجه هذا الموقف ما قد ترغب في النظر إليه هو القيام بتحويل هذا إلى كائن بدلاً من ذلك لأننا نريد أن تكون قائمة المعلمات لدينا موجزة قدر الإمكان، ولا سيما منكم الذين يأتون من العالم الوظيفي هذا بالتأكيد مصدر قلق لذلك ربما إذا كان لدينا كل هؤلاء وهم عالقون في فئة utils مع مجموعة من التعليمات البرمجية الأخرى التي ربما لا ينبغي أن تكون موجودة دعنا نمضي قدمًا ونضع هذا في مكان آخر لذلك أنشأت فئة أو كلاس يسمى العمليات الحسابية Math ops ومرة أخرى، هذه ليست عمليات رائدة من النوع الرياضي إنها بسيطة للغاية، لكني أحاول أن أوضح أكثر من نقطة حول كيفية إنشاء الوظائف الخاصة بنا دون الحاجة إلى طرحهم هناك في مساحة الاسم العامة الآن لدي هذا الكلاس أو الفئة الذي يسمى العمليات الحسابية والذي يأخذ كونستركتور لكن لاحظ أن كلًا من طرق الجمع والطرح والضرب، تتخذ الآن معلمة واحدة تسمى ثلاثية وما قمت بإنشائه لدعم هذا هو فقط فئة أخرى تسمى الثلاثيات triples ويثبت أن هذه الأشياء هي أرقام من أجل إنشائها وتمضي قدمًا وتعطي تلك القيم حتى أتمكن من تمرير هؤلاء هناك الآن أردت أيضًا أن أتحدث قليلاً عن التوثيق الآن قد تلاحظ أن لدي بعض التعليقات الإضافية هناك مع بعض الرموز الإضافية وهذه هي طريقة لتوثيق التعليمات البرمجية الخاصة بك وهي حزمة تسمى JS doc يمكنك الحصول عليها في أماكن مختلفة المكان الذي حصلت عليها منه هو NPM هنا لذلك إذا لم يكن لديك بعد، فهذه مسألة بسيطة تتلخص في الذهاب إلى سطر الأوامر وإجراء تثبيت NPM لـ JS doc بمجرد حصولك على هذه الحزمة الآن يمكنك البدء في إنشاء هذه التعليقات وفي واقع الأمر، إذا أردت ليس عليك حتى كتابة كل هذا يمكنني تجربة هذا هنا على سبيل المثال إذا فعلت ذلك فقط، ها نحن ذا الشرطة المائلة للأمام والعلامة النجمية سيقرأ توقيع الدالة بالفعل بالنسبة لي ونوعًا من إنشاء بداية تلك الوثائق الآن، ما فعلته مع هؤلاء هو أني حددت نوع بيانات المعلمة ونوع البيانات أيضًا الخاصة بما يعود ما تبقى من هذا مجرد وصف وما سنفعله هو بناء صفحة للتوثيق وهذا سيظهر هنا لذا يمكننا فقط وضع نص عشوائي بعد أي شيء هنا وسيؤدي ذلك إلى إنشاء صفحات HTML عندما نعود إلى سطر الأوامر وإنشاء هذا وبقدر ما يتعلق الأمر بالأساسيات، فإن في المعلمة param يمكنك وضع الأسماء هناك ومرة أخرى، أي وصف تريده لا أعرف ما إذا كنت بحاجة إلى ذلك أم لا، لكنك تعلم هذا هو الحال مع التعليقات بينما نقرأها، نعتقد حسنًا، نحن نعرف بالضبط ما هو لكن بينما نعود بعض الوقت لاحقًا أو عندما يستخدم شخص آخر الكود الخاص بنا ربما فكرة جيدة لوضع هذا هناك لذلك خصصت أو عينت هذا على أنه كونستركتور هناك معلومات حول جميع المعلمات سيظهر هذا كوصف وأي شيء يُرجع قيمة نقوم بتخصيصه كإرجاع بالنوع الآن، إذا كنت ستنشئ وثائق لملفات مختلفة، يمكنك أيضًا استخدام هذا لإنشاء ارتباط في صفحات HTML التي تقوم بإنشائها حتى يتمكن الأشخاص من التصفح من واحد إلى آخر الآن هذه الفئات مرتبطة بإحكام إلى حد ما في هذه المرحلة وهكذا في هذه الصفحة، أريد أن أعطي رابطًا إلى وثائق ثلاثية وفي ثلاثية triples أعطي رابطًا للعمليات الحسابية math ops لذلك يمكنك فعل الكثير من هذا الذي تريده وإذا عدت إلى سطر الأوامر سنقوم بعمل JS doc وبعد ذلك أحتاج إلى إخباره إلى أين أذهب من أجل الحصول على الملفات لبنائها ويمكنني أيضًا، اختياريًا، إخباره بمكان وضع الملفات عندما يبنيها لذلك بالنسبة لهذا المشروع سأدعها تفعل ما تريد القيام به بالنسبة للمكان الذي ستضع فيه هذه الملفات لكنني أردت الحصول على الوثائق من كل شيء موجود هنا في النصوص أي شيء لدي وثائق خاصة به، سأحصل على صفحة له وإلا فإنه سيتجاهلها وأفضل نتيجة هنا، ها نحن ذا هو أنني أفعل هذا وأستعيد موجه الأوامر لذلك يجب أن يكون لدي مجلد خارجي ذلك هو هذا هو الإعداد الافتراضي الذي يتم إنشاؤه في تطبيقي ويمكنني الوصول إلى كل هذا من خلال index dot HTML index.html لذلك هناك الفئات التي يوثقها لم أفعل أي وصف في الصفحة الأساسية ولكن هناك عمليات حسابية math ops وها هو الكونستركتور الخاص بي هناك كل الطرق يخبرني بمكانه في الكود ويمكنني استخدام هذا الرابط للتصفح للوصول إلى الكلاس الآخر ويمكنك أن ترى أنني لم أفعل أوصافًا لكل شيء ولكن عندما أفعل ذلك يظهر هناك لذا فهي طريقة سهلة ومفيدة لتكون قادرًا على القيام بالتوثيق إنها مجرد مسألة وضع بعض التعليقات ونعلم جميعًا أنه من الأسهل القيام بذلك إذا قمت بذلك في وقت إنشائه، وليس في وقت لاحق شكرا لمشاهدتك في درسنا التالي سنتحدث عن التجميع والتصغير ونحن نستعد لشحن منتجاتنا
