العديد من النصائح العملية لتحسين JavaScript والتي تستحق المعرفة

كيف تبدأ بسرعة مع VUE3.0: أدخل

"الصعوبة:؟" " وقت القراءة الموصى به: 5 min "

الفيديو الرئيسي

إذا... كود المعكرونة

• بمجرد كتابة أكثر من وظيفتين if...else يجب أن نفكر فيما إذا كانت هناك طريقة تحسين أفضل.
• على سبيل المثال، نحتاج الآن إلى حساب سعر الطعام في ماي لاو بناءً على الاسم، ويمكنك القيام بذلك.

• طريقة الكتابة هذه ستجعل جسم الوظيفة يحتوي على الكثير من عبارات الحكم الشرطية. عندما نريد إضافة منتج في المرة القادمة، نحتاج إلى تعديل المنطق في الوظيفة وإضافة عبارة if...else ، وهذا أيضًا ينتهك الافتتاح والإغلاق إلى حد ما. المبدأ هو أنه عندما نحتاج إلى إضافة منطق، يجب أن نحاول حل التغيير في المتطلبات عن طريق توسيع الكيان البرمجي بدلاً من تعديل الكود الحالي لإكمال التغيير.
• هذه طريقة تحسين كلاسيكية للغاية، يمكننا استخدام بنية بيانات مشابهة Map لحفظ جميع المنتجات.

• بهذه الطريقة، لا نحتاج إلى تغيير منطق getPrice عندما نحتاج إلى إضافة منتج آخر في المرة القادمة. بالطبع، يحب المزيد من الأشخاص هنا استخدام foodMap مباشرةً حيث يتم استخدامه هذه الفكرة.
• ثم سيتساءل بعض الطلاب في هذا الوقت، ماذا لو كنت لا أرغب في استخدام السلاسل فقط key ؟ إذن يمكنك استخدام new Map ، والفكرة مشابهة، ويتم توسيع كيان إضافي لتخزين التغييرات.

تحل عمليات خطوط الأنابيب محل الحلقات الزائدة عن الحاجة.

• توجد قائمة طعام لـ Mai Moulao

• إذا كنت تريد العثور على الطعام الذي ينتمي إلى المجموعة 1، كيف يمكنك العثور عليه؟
• ما ورد أعلاه هو أسلوب استخدمناه كثيرًا من قبل. من الواضح أن استبدالنا filter map بدلاً من for لا يمكن أن يجعل الكود أكثر انسيابية فحسب، بل يجعل الدلالات أكثر وضوحًا بهذه الطريقة تتم过滤المصفوفة أولاً ثم重组.

يستبدل البحث الحلقة المتكررة

• أو المثال أعلاه إذا أردنا العثور على طعام معين وفقًا لقيمة السمة في مصفوفة كائنات الطعام هذه، فسيظهر استخدام find .

يتضمن استبدال الحلقات المتكررة

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

• وبالمثل، لا يمكن لعب مخلل الملفوف ونودلز اللحم البقري الخاصة بـ Kang Fu بهذه الطريقة فحسب، بل يمكن استدعاء جميع العمليات المشابهة للعثور على عناصر محددة في مصفوفة باستخدام وظيفة includes .

قيمة الإرجاع الناتجة

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

فإن

• استخدام result كقيمة الإرجاع أعلاه لا ينطبق على جميع المواقف، نحتاج أحيانًا إلى إنهاء نص الوظيفة مبكرًا لمنع الزملاء اللاحقين من قراءة البرامج الزائدة عن الحاجة.

• في المثال التالي، عندما لا يكون selectedKey لدينا موجودًا، يجب أن return فورًا، حتى لا نحتاج إلى مواصلة قراءة الكود التالي، وإلا فسيؤدي ذلك إلى زيادة تكاليف القراءة كثيرًا عند مواجهة وظائف أكثر تعقيدًا.

للحفاظ على الكائن سليمًا

• ، غالبًا عندما نحصل على البيانات التي يتم إرجاعها بواسطة الواجهة الخلفية من خلال طلب، ستتم معالجتها وفقًا لبعض السمات. إذا كان هناك عدد قليل من السمات التي تحتاج إلى معالجة، فسيعتاد العديد من الطلاب على استخدام الطريقة الأولى.
• ولكن في الواقع، هذه العادة سيئة، لأنه عندما لا تكون متأكدًا مما إذا كانت هذه الوظيفة تحتاج إلى إضافة سمات تبعية في المستقبل، فيجب عليك الحفاظ على سلامة الكائن، كما ذكرت في مقالتي الأخيرة، وتعلم كيفية تبني التغييرات لا يقتصر getDocDetail على استخدام icon content ، فقد تكون هناك سمات مثل title date في المستقبل، لذلك قد نقوم أيضًا بتمرير الكائن الكامل مباشرة، الأمر الذي لن يؤدي فقط إلى تقصير قائمة المعلمات ولكن أيضًا جعل الكود أكثر قابلة للقراءة.

الاستخدام الذكي للعوامل

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

في نهاية الكتابة

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

[دروس الفيديو ذات الصلة الموصى بها: الواجهة الأمامية للويب]

ما ورد أعلاه هو تفاصيل العديد من النصائح العملية لتحسين JavaScript التي تستحق المعرفة. للمزيد، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!