چگونه توابع طولانی را خواناتر کنیم

درک توابع طولانی معمولا سخت تر است. در حالی که تکنیک هایی در OOP (برنامه نویسی شی گرا) برای کوچکتر کردن آنها وجود دارد، برخی از توسعه دهندگان ترجیح می دهند کل کد را در یک مکان ببینند. داشتن همه کدها در یک تابع بزرگ لزوما بد نیست. آنچه در واقع بد است کد نامشخص و نامشخص در آن تابع است. خوشبختانه، کارهایی وجود دارد که می توانید برای بهبود آن انجام دهید.

استخراج توابع رایج

اگر تابع طولانی شما حاوی کدهایی است که قبلاً در جای دیگری خارج از آن تابع نوشته اید، بهتر است آن قطعه کد را در یک تابع جدید استخراج کنید – این ایده اصلی DRY است (خودتان را تکرار نکنید).

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

// util.js

export function slugify(aString) {
 // convert aString to a slug and return it
}

import { slugify } from './util.js'

function aVeryLongFunction() {
  // ...

  // At this point you needed to slugify some text
  const slug = slugify(title)

  // ...
}

فرض کنید عملکرد شما هنوز طولانی است حتی بعد از اینکه تمام قطعات رایج را در توابع کمکی استخراج کردید. در این مورد چه باید کرد؟

ابتدا باید کدهای مرتبط را به صورت تکه ای گروه بندی کنید، سپس یکی از این دو گزینه را انتخاب کنید:

• نظراتی را اضافه کنید تا توضیح دهید که هر تکه کد چه کاری انجام می دهد.
• هر تکه کد را در یک تابع تودرتو استخراج کنید.

این بیشتر یک ترجیح شخصی است—من دومی را ترجیح می دهم زیرا اولاً، خواندن نام توابع واضح و صریح را دوست دارم تا نظرات، و دوم، می توانم از دامنه اضافی تابع جدید برای ساده سازی بیشتر تابع تودرتو استفاده کنم.

گروه بندی تکه های کد مرتبط

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

هر دو انتخاب خوب هستند. نکته مهم در اینجا این است که در کل پایگاه کد خود ثابت بمانید.

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

رویکرد نظرات

بعد از اینکه تکه های کد مرتبط خود را از هم جدا کردید، وقت آن است که به خواننده بگویید هر تکه چه کاری انجام می دهد. شما به راحتی می توانید این کار را با نوشتن یک توضیح تمیز بالای هر تکه انجام دهید.

function aVeryLongFunction() {
  // [explain what it's doing with comments]
  // ...
  // ...

  // [explain what it's doing with comments]
  // ...
  // ...

  // [explain what it's doing with comments]
  // ...
  // ...
}

اگر دوست دارید نظرات بنویسید و این روش را دوست دارید، خوب است. هیچ اشکالی در این رویکرد وجود ندارد – در واقع در پروژه های منبع باز بسیار محبوب استفاده می شود.

اگر نظرات را دوست ندارید، می توانید هر تابع را در یک تابع تودرتو استخراج کنید.

رویکرد توابع تو در تو

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

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

پس از اعمال آن، کد شما به شکل زیر در می آید:

function aVeryLongFunction() {
  function doThis() {}
  function thenDoThis() {}
  function andThenThis() {}

  // Define all your shared local variables here.
  // All nested functions above should access them
  // directly without passing them

  // Then start calling each one in order
  doThis()
  thenDoThis()
  andThenThis()
}

با این رویکرد، می‌توانم کارهایی که تابع انجام می‌دهد را در مراحل واضح و مجزا بخوانم. اگر لازم باشد ببینم هر مرحله چگونه پیاده سازی می شود، به تابع مربوطه می روم.

اگر این مقاله را دوست داشتید، تمام مقالات دیگر من در Coddip را بررسی کنید—این مکانی برای ارتقاء کیفیت کد جاوا اسکریپت شماست.