كيفية كتابة كود JS نظيف؟ 5 نصائح للكتابة للمشاركة

قلل من عبء القراءة، وإلهام التفكير الإبداعي، وتعلم مهارات JavaScript بسهولة. Rigongyiping، jym،rush~

1. تعريف الأرقام كثوابت

غالبًا ما نستخدم الأرقام، مثل الكود التالي:

const isOldEnough = (person) => {.
  إرجاع person.getAge() >= 100;
}

من يعرف ما الذي تشير إليه هذه الـ 100 على وجه التحديد؟ نحتاج عادةً إلى الجمع بين سياق الوظيفة للتخمين والحكم على القيمة التي قد يمثلها هذا الرقم 100 على وجه التحديد.

إذا كان هناك العديد من هذه الأرقام، فمن السهل أن يسبب ارتباكًا أكبر.

كتابة جافا سكريبت نظيفة: تحديد الرقم كثابت

يحل هذه المشكلة بوضوح:

const AGE_REQUIREMENT = 100;
const isOldEnough = (شخص) => {
  return person.getAge() >= AGE_REQUIREMENT;
}

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

2. تجنب استخدام القيم المنطقية كمعلمات دالة.

يعد تمرير القيم المنطقية إلى الوظائف كمعلمات طريقة كتابة شائعة تؤدي بسهولة إلى ارتباك التعليمات البرمجية.

const validateCreature = (مخلوق، isHuman) => {
  إذا (هو الإنسان) {
    // ...
  } آخر {
    // ...
  }
}

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

ومع ذلك، فإننا نؤيد مبدأ المسؤولية الفردية للوظائف، لذلك:

اكتب JavaScript نظيفًا: تجنب القيم المنطقية كمعلمات دالة

const validatePerson = (person) => {
  // ...
}
const validateCreature = (مخلوق) => {
  // ...
}

3. عند تغليف شروط متعددة،

غالبًا ما نكتب كودًا مثل هذا:

if (
  person.getAge() > 30 &&
  person.getName() === "سيمون" &&
  person.getOrigin() === "السويد"
) {
  // ...
}

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

اكتب جافا سكريبت نظيفًا: قم بتغليف شروط متعددة

const isSimon =
  person.getAge() > 30 &&
  person.getName() === "سيمون" &&
  person.getOrigin() === "السويد";
إذا (سيمون) {
  // ...
}

أو

const isSimon = (شخص) => {
  يعود (
    person.getAge() > 30 &&
    person.getName() === "سيمون" &&
    person.getOrigin() === "السويد"
  );
};
إذا (هو سيمون (شخص)) {
  // ...
}

أوه، اتضح أن هذه الشروط هي لتحديد ما إذا كان هذا الشخص هو سيمون ~

هذا النوع من التعليمات البرمجية هو رمز نمط تعريفي، وهو أكثر قابلية للقراءة.

4. تجنب الأحكام السلبية

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

على سبيل المثال، في الكود أدناه، الشرط !isCreatureNotHuman(creature) هو سلبي مزدوج، مما يجعل قراءته صعبة بعض الشيء.

const isCreatureNotHuman = (مخلوق) => {
  // ...
}

إذا (!isCreatureNotHuman(creature)) {
  // ...
}

اكتب جافا سكريبت نظيفًا: تجنب شروط الحكم السلبي

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

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

const isCreatureHuman = (مخلوق) => {
  // ...
}
إذا (isCreatureHuman(مخلوق)) {
  // ...
}

5. تجنب الكثير من if...else...

لقد أكد Bengua دائمًا على هذه النقطة:

على سبيل المثال، الكود التالي:

if(x===a){
   الدقة = أ
}إلا إذا(س===ب){
   الدقة = ب
}إلا إذا(س===ج){
   الدقة = ج
}إلا إذا(س===د){
    //...
}

أعيد كتابتها كخريطة:

Let MapRes={
    أ:أ،
    ب:ب،
    نسخة،
    //...
}
res=mapRes[x]

مثال آخر هو الكود التالي:

const isMammal = (creature) => {
  إذا (مخلوق === "إنسان") {
    عودة صحيحة؛
  } وإلا إذا (مخلوق === "كلب") {
    عودة صحيحة؛
  } وإلا إذا (مخلوق === "قطة") {
    عودة صحيحة؛
  }
  // ...
عودة كاذبة.
}

أعيد كتابتها كمصفوفة:

const isMammal = (creature) => {
  الثدييات الثابتة = ["إنسان"، "كلب"، "قطة"، /* ... */]؛
  عودة الثدييات. ويشمل (مخلوق)؛
}

اكتب JavaScript نظيفًا: تجنب الكثير من if...else...

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

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

ما ورد أعلاه هو كيفية كتابة كود JS نظيف؟ تمت مشاركة 5 نصائح للكتابة بالتفصيل لمزيد من المعلومات، يرجى الانتباه إلى المقالات الأخرى ذات الصلة على موقع PHP الصيني!