با استفاده از این 7 قانون کد خود را تمیز کنید

در این مقاله کوتاه، برخی از قوانینی را که می‌توانید برای بهبود کد خود اعمال کنید با هم مرور می‌کنیم. تمام نمونه‌های کد جاوااسکریپت هستند.

کد قابل خواندن، قابل نگهداری است

به نظر من کد قابل خواندن، کدی است که می‌توان آن را نگهداری کرد.

هدف من به عنوان یک توسعه دهنده نوشتن کد با کیفیت است. به این دلیل که هر توسعه دهنده‌ای با هر سطح مهارتی باید بتواند با خواندن کد آن را درک کند. این به توسعه دهندگان جوان کمک می‌کند تا در نوشتن کد اطمینان بیشتری داشته باشند.

حذف کامنت‌های غیرضروری

برخی از کدها می‌توانند بسیار پیچیده باشند. من این را به خوبی می‌دانم و بارها دیده‌ام. در این صورت می‌توان مستندات مناسب و کامنت‌هایی را به کد اضافه کرد.

کلا من طرفدار نوشتن کامنت در کد نیستم یا حداقل به آنها نیازی ندارم.

برای خواندن اینکه این تابع مقدار X آرایه را می‌گیرد و آنها را با هم در یک آرایه جدید ادغام می‌کند، به هیچ کامنتی نیاز نیست.

function mergeArrays(...arrays) {
  let mergedArray = []

  arrays.forEach(array => {
      mergedArray = [...mergedArray, ...array]
  })

  return mergedArray
}

من انتظار دارم اعضای تیم بدانند که عملگر spread چیست و اگر ندانستند، باید در هنگام بررسی کد در مورد آن سوال کنند.

تمرکز روی نام گذاری

اگر به نام mergeArrays نگاه کنید، باید کاملا واضح باشد که این تابع مقدار X آرایه را به یک نوع جدید ترکیب می‌کند.

هرچند می‌دانم که نام گذاری برای متغیرها، توابع و کلاس‌ها سخت است و هرچه تابع پیچیده‌تر باشد، نام گذاری آن نیز سخت‌تر خواهد شد. اما از یک قانون استفاده می‌کنم تا نامگذاری را برای خودم آسان کنم. در اینجا نحوه انجام آن آورده شده است.

تابعی را تصور کنید که دو آرایه از اعداد را با هم ادغام کرده و یک لیست منحصر به فرد از اعداد ایجاد می‌کند. چگونه آن را نام گذاری می‌کنید؟ چیزی مثل این:

function mergeNumberListIntoUniqueList(listOne, listTwo) {
  return [...new Set([...listOne, ...listTwo])]
}

نام آن به طور اصولی بد نیست، زیرا آنچه را که می‌گوید عمل می‌کند. مشکل این است که تابع دو کار انجام می‌دهد. هرچه تابع کار بیشتری انجام دهد، نام گذاریش دشوارتر می‌شود. بنابراین تجزیه آن به دو تابع جداگانه باعث سهولت در استفاده مجدد آن می‌شود.

function mergeLists(listOne, listTwo) {
  return [...listOne, ...listTwo]
}

function createUniqueList(list) {
  return [...new Set(list)]
}

عبارت‌های داخل if

من نتوانستم اسمی برای این مشکل پیدا کنم! ببینید، نامگذاری سخت است.

اما این را زیاد می‌بینم.

مشکل

if(value === 'duck' || value === 'dog' || value === 'cat') {
  // ...
}

راه حل

const options = ['duck', 'dog', 'cat'];
if (options.includes(value)) {
  // ...
}

با این کار یک کد قابل خواندن ایجاد می‌کنید که به نظر می‌رسد یک جمله انگلیسی باشد.

اگر گزینه‌ها شامل مقدار باشند...

خروج زودهنگام

دوازده روش برای نام گذاری این اصل وجود دارد، اما من نام "خروج زودهنگام" را انتخاب کردم.

بنابراین بگذارید یک قطعه کد به شما نشان دهم. مطمئنم قبلا چنین چیزی را دیده‌اید.

function handleEvent(event) {
  if (event) {
    const target = event.target;
    if (target) {
      // Your awesome piece of code that uses target
    }
  }
}

در اینجا سعی بر این داریم که بررسی کنیم آیا شی event نادرست نیست و خصوصیت target در دسترس است یا نه. اکنون مسئله اینجاست که ما قبلا از دستورات if دومی استفاده کرده‌ایم.

بیایید ببینیم که چگونه می‌توانید در اینجا "خروج زودهنگام" انجام دهید.

function handleEvent(event) {
  if (!event || !event.target) {
    return;
  }
  // Your awesome piece of code that uses target
}

با استفاده از "خروج زودهنگام" بررسی می‌کنید که event و event.target نادرست نیست. بلافاصله مشخص می‌شود و از آن اطمینان حاصل می‌کنیم. همچنین واضح است که اگر این عبارت نادرست باشد، هیچ کد دیگری اجرا نمی‌شود.

تخصیص تخریب

در جاوااسکریپت می‌توان شی‌ها و آرایه‌ها را از بین برد.

طبق مستندات موجود در developer.mozilla.org، سینتکس تخصیص تخریب (Destructuring) یک عبارت جاوااسکریپت است که امکان بسته‌بندی مقادیر آرایه‌ها یا خصوصیات اشیا را در متغیرهای مجزا امکان‌پذیر می‌کند.

چند نمونه کد

// Destructuring an object
const numbers = {one: 1, two: 2};
const {one, two} = numbers;
console.log(one); // 1
console.log(two); // 2

// Destructuring an array
const numbers = [1, 2, 3, 4, 5];
const [one, two] = numbers;
console.log(one); // 1
console.log(two); // 2

مشکل تخریب ساختار، در واقع نام گذاری نامناسب برای یک خصوصیت است. مثال کامل، واکشی داده‌ها از یک API و دریافت یک شی پاسخ است که دارای خصوصیت داده است.

const url = "http://localhost:8080/api/v1/organizers/1"
const response = await axios.get(url)
const {name} = response.data

این نمونه کد نشان می‌دهد که شما یک organizer را با شناسه 1 واکشی می‌کنید. شی organizer یک نام دارد و شما آن را از بین می‌برید که مشکلی ندارد.

این کد به خوبی کار می‌کند. اما چرا این نام هنوز هم name است؟ آیا این تنها خصوصیت name در کل دامنه خواهد بود؟ و این نام از کدام شی است؟

با تغییر نام در خصوصیت از این سوالات خودداری کنید.

const url = "http://localhost:8080/api/v1/organizers/1"
const response = await axios.get(url)
const {name: organizerName} = response.data

این کد خوانایی بیشتری پیدا می‌کند و همه می‌دانند که متغیر نام organizer است.

سبک کد زدن

آخرین مورد ولی به همان میزان با اهمیت. همیشه سعی کنید یک سبک کد نویسی در تیم خود تعیین کنید. اهمیتی ندارد که آیا سینگل کوتیشن‌ها یا دابل کوتیشن‌ها، فاصله‌ها، نقطه‌ها و ... را دوست دارید. فقط یک سبک را انتخاب کنید و به آن پایبند باشید. همچنین می‌توانید این کار را با استفاده از liner یا prettier به طور زیباتر انجام دهید.

ابزارهای زیادی وجود دارد که می‌توانید برای رفع این نوع مسائل استفاده کنید. ابزار مورد علاقه من قلاب pre-commit با استفاده از Husky ست. Prettier هم دارای یک صفحه در مستندات خود در مورد قلاب‌های pre-commit می‌باشد.

این قلاب pre-commit همیشه قبل از هر کامیتی دستور پیکربندی شده را اجرا می‌کند. اگر آن را به روش صحیح پیکربندی کنید، زیباتر اجرا می‌شود و تمام قوانین را در همه فایل‌ها اعمال می‌کند. این کار اطمینان می‌دهد که تیم همیشه از یک نوع کد و بدون هیچ مشکلی برخوردار است.

جمع‌بندی

می‌دانیم که برخی از قوانین واضح است و برخی دیگر اینگونه نیست. اما من به عنوان یک توسعه دهنده تمام وقت روی کدهای مختلف کار می‌کنم و اهمیت این قوانین فقط در کدهای بزرگتر و پیچیده مشخص می‌شود. اما این بدان معنا نیست که شما نباید آن را در پروژه‌های کوچکتر خود اعمال کنید. بهبود کیفیت کد به شما کمک می‌کند تا در پروژه‌های کوچکتر کارآیی بیشتری داشته باشید. همچنین به تیم شما در خواندن کد و تأیید درخواست‌های pull کمک می‌کند. همانطور که گفتم، کد قابل خواندن از قابلیت نگهداری بیشتری برخوردار است، اما مزایای بسیار بیشتری نیز دارد.

منبع