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

من همیشه تپانچه میگیرم

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

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

مسئله اصلی این است که وقتی در مورد 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
}, [])

// resultado:
[
    {
        "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"
    }
]

نتیجه گیری

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

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

نکته کتاب: