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

فصل الـ imports وترتيبها

أحب أن أرتّب الـ imports وأفصل بينها بأسطر فارغة لأميّز نوع كل import. وهذا مفيد جدًا حين تريدون معرفة الملفات التي تنتمي إلى الـ module الحالي وتلك المأخوذة من أماكن أخرى. كما أن ترتيب الـ imports يساعد على التنقل بينها بسرعة ومعرفة المكان الذي جاء منه كل import. بالنسبة إلى الـ imports القادمة من node_modules، يمكننا ترتيبها كلها باستثناء import الخاص بـ react. لكن بما أننا نادرًا ما نحتاج إلى تتبّع الـ imports القادمة من node_modules، فلا تحظى بالأولوية نفسها في الترتيب مثل غيرها. مثال:

import React from "react";
import moment from "moment";

// Absolute imports after the imports from node_modules
import Button from "src/views/atoms/buttons";
import Label from "src/views/atoms/label";
import Placeholder from "src/views/atoms/placeholder";
import TextInput from "src/views/atoms/text-input";

// Relative imports after the absolute imports
import Button from "../atoms/buttons";
import TextInput from "../atoms/text-input";

ترتيب الـ props

هذا الجزء سيكون مزعجًا بعض الشيء. فاكتساب هذه العادة يستغرق وقتًا طويلًا، لكن صدّقوني، حين ترون component يحمل عددًا لا يُحصى من الـ props وكلها مرتّبة، ستشعرون كأنكم تبرمجون في الجنة. فتتبّع الـ props أسهل وأسرع بكثير حين تكون مرتّبة. والدماغ بارع جدًا في إيجاد العناصر المرتّبة، وحين تكون الـ props مرتّبة لا يستغرق العثور على الـ prop الذي تبحثون عنه عند استخدام Component سوى ثوانٍ معدودة. على سبيل المثال: هذا component بـ props غير مرتّبة: حاولوا إيجاد الـ prop المسمّى deadpool

import React from "react";

export const ComponentWithoutSortedProps = () => {
  // I have unsorted props
  return <DummyComponent
      ironMan={ironMan}
      thor={thor}
      blackPanther={blackPanther}
      wasp={wasp}
      antMan={antMan}
      hulk={hulk}
      hawkEye={hawkEye}
      quickSilver={quickSilver}
      scarletWitch={scarletWitch}
      blackWidow={blackWidow}
      warMachine={warMachine}
      moonKnight={moonKnight}
      spiderMan={spiderMan}
      doctorStrange={doctorStrange}
      deadpool={deadpool}
      yondu={yondu}
      loki={loki}
      captainAmerica={captainAmerica}
      winterSoldier={winterSoldier}
   />;
}

والآن إليكم component بـ props مرتّبة. حاولوا إيجاد deadpool مرة أخرى:

import React from "react";

export const ComponentWithSortedProps = () => {
  // I have sorted props
  return <DummyComponent
      antMan={antMan}
      blackPanther={blackPanther}
      blackWidow={blackWidow}
      captainAmerica={captainAmerica}
      deadpool={deadpool}
      doctorStrange={doctorStrange}
      hawkEye={hawkEye}
      hulk={hulk}
      ironMan={ironMan}
      loki={loki}
      moonKnight={moonKnight}
      quickSilver={quickSilver}
      scarletWitch={scarletWitch}
      spiderMan={spiderMan}
      thor={thor}
      warMachine={warMachine}
      wasp={wasp}
      winterSoldier={winterSoldier}
      yondu={yondu}
   />;
}

أتمنى أنكم لاحظتم كم كان تتبّعه سهلًا. والآن تخيّلوا أنكم تقرؤون كودًا فيه مئات الـ components كل يوم، وكم من الوقت تقضون في البحث عن prop واحد. قد يستغرق هذا الأسلوب وقتًا في البداية، لكنه يؤتي ثمارًا كبيرة لاحقًا حين تكبر قاعدة الكود. ملاحظة: إذا وجدتم الترتيب مهمة صعبة جدًا، فهناك دائمًا extensions جاهزة لتقوم بذلك عنكم. شخصيًا أستخدم أمر sort lines المدمج في vscode لترتيبها تصاعديًا. حدّدوا الأسطر، ثم اضغطوا ctrl+shift+p واكتبوا sort lines لاستخدامه.

فصل جمل return

القاعدة واضحة من العنوان نفسه. حاولوا فصل جملة return عن بقية جمل الكود. والسبب أن ذلك يسهّل كثيرًا معرفة مواضع جمل return في أي دالة داخل الملف، فيساعدنا على تتبّع كل القيم المتوقع أن تعيدها الدالة بشكل مميّز عن بقية الكود. هذا مثال على كود لم تُفصَل فيه جمل return:

export const doVeryLongTaskWithMultipleReturns = (v1, v2) => {
  const x = 'something great';
  const y = 'another thing that is great';

  if(x === v1) {
    return x;
  }
  if (y === v2) {
    const thing1 = 'hello world';
    const thing2 = 'world hello';
    const joinedThing = thing1 + thing2;
    return joinedThing;
  } else {
    if (v1 === v2) {
      const gettingOverIt = 'impossible';
      const gettingBelowIt = 'impossible';
      const joined = gettingOverIt + gettingBelowIt;
      return joined;
    }
  }
  return y;
};

وهذا مثال فُصلت فيه جمل return بسطر فارغ:

export const doVeryLongTaskWithMultipleReturns = (v1, v2) => {
  const x = 'something great';
  const y = 'another thing that is great';

  if(x === v1) {
    return x;
  }

  if (y === v2) {
    const thing1 = 'hello world';
    const thing2 = 'world hello';
    const joinedThing = thing1 + thing2;

    return joinedThing;
  } else {
    if (v1 === v2) {
      const gettingOverIt = 'impossible';
      const gettingBelowIt = 'impossible';
      const joined = gettingOverIt + gettingBelowIt;

      return joined;
    }
  }

  return y;
};

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