7 توصيات لتحسين موثوقية كود جافا سكريبت

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



1. استخدام وظائف المصنع


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

من المهم معرفة أن وظيفة المصنع تسمى بدون استخدام كلمة أساسية new. إذا اتصلت بها بهذه الكلمة الرئيسية ، فستتوقف عن التصرف كما ينبغي.

▍ لماذا تستخدم وظائف المصنع؟


يمكن استخدام وظائف المصنع لتبسيط إنشاء كائن دون الحاجة إلى الارتباط بالفئات أو الكلمة الرئيسية new.

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

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

فيما يلي مثال بسيط على وظيفة المصنع:

function createFrog(name) {
  const children = []
  
  return {
    addChild(frog) {
      children.push(frog)
    },
  }
}

const mikeTheFrog = createFrog('mike')

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

2. عند كتابة وظائف المُنشئ ، أضف طرقًا إلى نماذجها الأولية


إذا كنت قد بدأت للتو في تعلم جافا سكريبت ، فقد يبدو لك العمل مع كائن نموذج أولي شيء جديد. لذلك ، في البداية ، كان معي.

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

هنا مثال دالة منشئ:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
}

Frog.prototype.leap = function(feet) {
  console.log(`Leaping ${feet}ft into the air`)
}

لماذا استخدام بناء Frog.prototype.leapبدلاً من كتابة أسلوب leapإلى كائن تم إنشاؤه بواسطة المنشئ؟ على سبيل المثال ، مثل هذا:

function Frog(name, gender) {
  this.name = name
  this.gender = gender
  
  this.leap = function(feet) {
    console.log(`Leaping ${feet}ft into the air`)
  }
}

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

بمعنى آخر ، إذا كنت تعتمد على المثال السابق المستخدم this.leap، يتبين أنه عند إنشاء مثيلات متعددة للكائن Frog، سيكون لكل منها طريقته الخاصة leap. أي - سيتم إنشاء عدة نسخ من هذه الطريقة. في هذه الحالة ، يشير هذا إلى الاستخدام غير العقلاني لموارد النظام ، حيث سيكون في كل هذه الكائنات نسخة من نفس الطريقة التي تتصرف بنفس الطريقة في كل مكان. ليس من الضروري إنشاء نسخ من مثل هذه الطريقة في كل مثيل للكائن.

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

فيما يلي مثال على استخدام هذه التقنية في حزمة الطلبات الشائعة .

3. إضافة خاصية. نوع للكائنات ليتم تمييزها.


خاصية .type، باتفاق غير رسمي ، غالبًا ما تُضاف إلى الأشياء ، وجدت استخدامًا واسع النطاق للغاية هذه الأيام. إذا كنت تكتب تطبيقات React ، فربما تكون قد صادفت هذه الخاصية طوال الوقت. خاصة - إذا كنت تستخدم Redux .

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

function createSpecies(type, name, gender) {
  if (type === 'frog') {
    return createFrog(name, gender)
  } else if (type === 'human') {
    return createHuman(name, gender)
  } else if (type == undefined) {
    throw new Error('Cannot create a species with an unknown type')
  }
}

const myNewFrog = createSpecies('frog', 'sally', 'female')

4. استخدم TypeScript


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

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

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

5. كتابة الاختبارات


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

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

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

6. اكتب وظائف بسيطة قدر الإمكان.


كما نعلم جميعًا ، تسمح لك JavaScript بدون مشاكل بإنشاء وظائف ضخمة تحل العديد من المهام في وقت واحد.

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

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

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

7. تذكر دائمًا أهمية معالجة الأخطاء عند استخدام JSON.parse و JSON.stringify


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

الخطر هنا هو أن تمرير JSON.parseكود JSON غير صحيح يؤدي إلى توقف التطبيق. في العمل ، واجهت مؤخرًا موقفًا حيث ألقى أحد مشروعات الويب لدينا أخطاء بسبب حقيقة أن إحدى الحزم الخارجية لم تتناسب JSON.parseمع الكتلة try/catch. انتهى هذا بفشل الصفحة ، ولم نتمكن من التخلص من المشكلة حتى يتم إصلاح رمز الحزمة الخارجية. حدث كل هذا بسبب حقيقة أنه في الرمز ، أثناء تشغيله ، ظهر خطأ غير معالج:

SyntaxError: Unexpected token } in JSON at position 107

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

ملخص


نأمل أن تكون التوصيات المقدمة هنا لتحسين موثوقية شفرة جافا سكريبت مفيدة لك.

القراء الأعزاء! ما الذي تنصح به لأولئك الذين يرغبون في كتابة كود جافا سكريبت أفضل وأكثر موثوقية؟

Source: https://habr.com/ru/post/undefined/


All Articles