چرا جاوا اسکریپت بی نظم نیست؟

من همیشه ناامید می شوم

وقتی می شنوم که مردم می گویند که فرانت اند خراب است، واقعاً ناامید می شوم، به خصوص وقتی ادعا می کنند که جاوا اسکریپت “هر چیزی را می پذیرد” و شما می توانید آن را به هر طریقی که می خواهید بنویسید، زیرا ما می توانیم به چندین روش به یک نتیجه برسیم.

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

مسئله اصلی این است که وقتی در مورد Frontend و جاوا اسکریپت صحبت می کنیم، مانند Backend که در آن چارچوب ها و قراردادهای پذیرفته شده به طور گسترده وجود دارد، الگوهای طراحی کاملاً تعریف شده ای نداریم. در Frontend، اطلاعات مربوط به بهترین شیوه ها و الگوها در سراسر وب پراکنده شده است که منجر به دیدگاه ها و نظرات گوناگون می شود. این عدم یکنواختی توسعه و درک را به خصوص برای مبتدیان دشوارتر می کند. حتی نویسنده این متن هم نظرات خودش را دارد.

نقطه ای که می خواهم به آن بپردازم

برای پایان دادن به این سخن گفتن، می‌خواهم تأکید کنم که فقط به این دلیل که چیزی واضح نیست، به این معنی نیست که وجود ندارد، یا اینکه شما نباید به دنبال دانش باشید تا حداقل الگوهای اولیه را در کد خود اعمال کنید. برای مثال، در مورد جاوا اسکریپت، وب‌سایت‌های متعددی وجود دارند که پیاده‌سازی‌ها و الگوهای ثابتی را در زبان ارائه می‌کنند و آماده استفاده در طول توسعه هستند. شما فقط باید زمانی را به مطالعه اختصاص دهید و هدف هر منبع و زمان مناسب برای استفاده از آن را درک خواهید کرد. مثال: Mozilla Docs JS.

بیایید به یک مثال کد واقعی نگاه کنیم

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

بیایید به سادگی برخی از قسمت های کد را تنظیم کنیم تا با توصیه های مستندات جاوا اسکریپت هماهنگ شود. این امکان پذیر است زیرا زبان روش ها/عملکردهای خاصی را برای مدیریت کارآمدتر موقعیت های خاص ارائه می دهد.

می خواهم به شما یادآوری کنم که در اینجا به یک مفهوم بسیار اساسی جاوا اسکریپت خواهیم پرداخت: کار با آرایه ها و اشیاء. کد به ساده ترین شکل ممکن نوشته شده بود و از پیچیدگی های غیر ضروری جلوگیری می کرد.

بنابراین، بیایید شروع کنیم! اول، ما یک شی را تعریف می کنیم که از نظر تئوری از Backend ما از طریق API دریافت می شود:

const storesList = [{
  activeStories: [
    {
      name: 'Starbucks',
      code: 1
    },
    {
      name: 'Duck Duck Coffe',
      code: 2
    }
  ],
  inactiveStories: [
    {
      name: 'Mac Coffe',
      code: 3
    }
  ]
}]

اکنون، به دلایل غیرمعمول و غیر متعارف، اما فقط برای مثال، باید یک فیلد جدید به نام “برچسب” را به این شی اضافه کنیم. قسمت “برچسب” باید از پیشوند تشکیل شده باشد Opened به دنبال آن نام فروشگاه

ابتدا، اجازه دهید پیاده‌سازی را ببینیم که من آن را «کمتر ایده‌آل» می‌دانم، زیرا از بهترین ابزارها، روش‌ها یا توابع در جاوا اسکریپت برای انجام افزودن فیلد «برچسب» استفاده نمی‌کند.

storesList.reduce((previous, current) => {
  current.activeStories.forEach(store => {
    previous.push({
      ...store,
      label: `Opened ${store.name}`
    })
  })

  return previous
}, [])

// result:
[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

در اینجا، ما می توانیم مشاهده کنیم که، اول، یک داریم .reduce، به دنبال آن a .forEachو در نهایت الف .push. همه اینها فقط برای بازگرداندن یک لیست تازه بازسازی شده برای نمایش روی صفحه استفاده می شود. چیزی که در اینجا بیش از همه مرا آزار می دهد کمبود آشکار دانش یا عدم استفاده از عملکردهایی مانند این است .flatMap و .map، که منابع اساسی و مهم هنگام کار با جاوا اسکریپت هستند. علاوه بر این، نحو کد گیج کننده و بیش از حد پرمخاطب می شود.

حال، بیایید ببینیم چگونه می‌توانست انجام شود:

storesList.flatMap((item) => {
  return item.activeStories
}).map((item) => {
  return {
    ...item,
    label: `Opened ${item.name}`
  }
})

بنابراین، شما چه فکر می کنید؟ ساده تر، درست است؟
چرا اینطور است؟ چرا اینجوری؟

برویم از نظر مفهومی، .flatMap آرایه اشیاء ما را در یک سطح “مسطح” می کند. نتیجه به این صورت خواهد بود:

[
    {
        "name": "Starbucks",
        "code": 1
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2
    }
]

در حال حاضر، ما استفاده می کنیم .map، که برای “Remap” یک آرایه خدمت می کند، به این معنی که ما از هر آیتم عبور می کنیم و ویژگی “label” را اضافه می کنیم. نتیجه به این شکل است:

[
    {
        "name": "Starbucks",
        "code": 1,
        "label": "Opened Starbucks"
    },
    {
        "name": "Duck Duck Coffe",
        "code": 2,
        "label": "Opened Duck Duck Coffe"
    }
]

نتیجه گیری

این واقعا شگفت انگیز است! جاوا اسکریپت تمام ابزارهایی را که برای نوشتن کدهای باکیفیت نیاز دارید فراهم می کند.

تنها کاری که باید انجام دهید این است که آن را مطالعه کنید و مفاهیم را به درستی اعمال کنید، نه اینکه فقط برای کدنویسی کدنویسی کنید.

توصیه های کتاب: