مفاهیم هسته‌ JavaScript را در چند دقیقه یاد بگیرید

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

• توضیحی کوتاه
• علت مناسب بودن آن
• یک مثال کد کاربردی (ES5 / ES6 با توابع پیکانی)

داشتن یک دانش عمومی، همیشه در هنگام کار با اکوسیستم JavaScript ایده خوبی است. به این صورت، نحوه کار و تعامل همه چیز را درک می‌کنید، یاد می‌گیرید و سریع‌تر پروژه خود را ارتقا می‌دهید.

مفاهیم جاوا‌اسکریپتی که بررسی خواهیم کرد:

1. Scope
2. IIFE
3. MVC
4. Async / Await
5. Closure
6. Callback

1. Scope

Scope، جعبه‌ای (box) دارای مرز (boundary) است. دو نوع مرز در JavaScript وجود دارند: local و global، که با نام‌های inner (داخلی) و outer (خارجی) نیز شناخته می‌شوند.

Local یعنی این که شما به همه چیز داخل مرز، (داخل جعبه) دسترسی دارید؛ و global یعنی این که شما به همه چیز خارج از مرز نیز دسترسی دارید.

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

چرا برای استفاده مناسب است؟

• منطق را جداسازی می‌کند
• شما را متمرکزتر می‌کند
• خوانایی کد را بهتر می‌کند

مثال

فرض کنید که تابعی ساخته‌اید و می‌خواهید به یک متغیر تعریف شده در سطح global دسترسی داشته باشید.

ES5

ES6

همانطور که در مثال بالا نمایش داده شد، تابع showName() به هر چیزی که در داخل مرز آن (locally) و همچنین خارج از آن (globally) تعریف شده است، دسترسی دارد. دقت کنید که سطح global نمی‌تواند به متغیرهای تعریف شده در سطح local دسترسی داشته باشد؛ زیرا نسبت به فضای خارج از خود محدود شده است، مگر این که آن را برگردانید یا به عبارتی return کنید.

2. IIFE

IIFE (Immediately Invoked Function Expression = بیانیه تابع سریعا فراخوانده شده) همانطور که از نامش پیداست، یعنی این که تابع پس از ساخته شدن، سریعا فراخوانده می‌شود. قبل از این که ES6 کلاس‌ها / متدهایی برای پشتیبانی از الگوی برنامه‌نویسی متمایل به آبجکت (OOP = Object oriented programming) را معرفی کند، راه رایج برای انجام این کار، این بود که IIFE را به شکل یک نام کلاس تقلید کنیم و توابع را به عنوان متدهایی جمع شده در return فراخوانی کنیم.

چرا برای استفاده مناسب است؟

• سریعا کد را اجرا می‌کند
• از آلوده شدن سطح global جلوگیری می‌کند
• از ساختار ناهمگام پشتیبانی می‌کند
• خوانایی کد را بهتر می‌کند (که البته برخی مخالف این قضیه هستند)

مثال

در طی سال‌های اخیر، فناوری پیشفرت‌های زیادی به خود دیده است. برای مثال، حال شما قابلیت تغییر رنگ تقریبا هر چیزی را دارید؛ مثلا خودروی خود. بیایید یک مثال کد ببینیم.

ES5

ES6

در مثال بالا، دو تابع را داخل return (changeColorToRed() و changeColorToBlack()) جمع کرده‌ایم. این ما را قادر می‌سازد تا به توابع مختلفی دسترسی داشته باشیم، و متدی که می‌خواهیم را فراخوانی کنیم.

به طور خلاصه، ما در ابتدا تابع car را در جهت دسترسی به محتویات داخل آن فراخوانی می‌کنیم. سپس از نشانه‌گذاری نقطه‌ای (.) برای فراخوانی تابعی که داخل return تعریف شده است استفاده می‌کنیم. این روش مشابه به ساختار دارای کلاس‌ها / متدها است، که در آن‌ها قبل از این که بتوانیم نام متد را فراخوانی کنیم، نام کلاس را فراخوانی می‌کنیم. به این صورت می‌توانید کدهای مرتب، قابل نگه‌داری و قابل استفاده مجدد داشته باشید.

3. MVC

MVS (Model View Controller) یک فریم‌وورک طراحی (و نه یک زبان برنامه‌نویسی) است که ما را قادر می‌سازد تا رفتار برنامه را به ساختاری واقعی تقسیم کنیم. تقریبا 85 درصد وب‌اپلیکیشن‌های امروزی، الگوی اساسی‌ای دارند. انواع دیگری از فریم‌وورک‌های طراحی وجود دارند، اما تا به اینجا، این مورد اساسی‌ترین و آسان‌ترین الگو است.

چرا برای استفاده مناسب است؟

• مقیاس‌پذیری و قابلیت نگهداری بالا
• ارتقا، بروزرسانی و دیباگ کردن آن آسان است (البته بر اساس تجربه شخصی)
• راه‌اندازی آن آسان است
• یک ساختار و بررسی اجمالی را فراهم می‌کند

مثال

بیایید نگاهی به یک مثال کوتاه از فریم‌وورک طراحی MVC داشته باشیم.

ES5

ES6

همانطور که در مثال بالا نمایش داده شده است، معمولا view، model و controller را در پوشه‌ها / فایل‌های مختلفی نگه می‌داریم؛ اما در اینجا جهت نشان دادم مفهوم، همه آن‌ها را در یک فایل قرار داده‌ایم. اهداف این فریم‌وورک طراحی این است که فرایند توسعه ساده‌تر شده، و یک محیط همکاری پایدار پشتیبانی شود.

4. Async / Await

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

چرا برای استفاده مناسب است؟

• قابلیت‌های همگام
• کنترل رفتار
• کاهش Callback Hell

به این مقاله نیز نگاهی بیندازید:

• نکات مثبت، اشتباهات و نحوه استفاده از async/await در JavaScript

مثال

فرض کنید که می‌خواهید تمام کاربران را از یک REST API بگیرید و در قالب JSON نمایش دهید.

ES5

ES6

در جهت استفاده از await، باید آن را داخل یک تابع async جمع کنیم تا به JavaScript اطلاع دهیم که در حال کار با promiseها هستیم. همانطور که در مثال نشان داده شده است، ما منتظر (await) دو چیز می‌مانیم: response و users. قبل از این که بتوانیم response را به قالب JSON تبدیل کنیم، باید مطمئن شویم که آن را دریافت کرده‌ایم؛ در غیر این صورت یک response را که وجود ندارد تبدیل می‌کنیم، که خود یک خطا را بروز می‌دهد.

5. Closure

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

چرا برای استفاده مناسب است؟

• رفتار تابع را گسترش می‌دهد
• در هنگام کار با رویدادها پر کاربرد است

مثال

فرض کنید که به عنوان یک مهندس توسعه دهنده برای شرکت Volvo کار می‌کنید، و آن‌ها به یک تابع نیاز دارند که فقط نام یک خودرو را چاپ می‌کند.

ES5

ES6

تابع showName() یک closure است زیرا رفتار تابع showInfo() را گسترش می‌دهد، و همچنین به متغیر carType دسترسی دارد.

6. Callback

یک callback، تابعی است که پس از اجرا شدن یک تابع دیگر، اجرا می‌شود. Callbackها با نام Call-after نیز شناخته می‌شوند. در دنیای JavaScript، تابعی که منتظر یک تابع دیگر می‌ماند تا اجرا شده یا یک مقدار (آرایه یا آبجکت)‌ را برگرداند، به عنوان Callback شناخته می‌شود. Callback راهی برای همگام‌تر کردن پردازش‌های ناهمگام است.

چرا برای استفاده مناسب است؟

• منتظر اجرای یک رویداد می‌ماند
• قابلیت‌های همگام را فراهم می‌کند
• روشی پرکاربرد برای زنجیره‌ای سازی توابع است (اگر A تمام شد، سپس B را اجرا کن،‌ و به همین صورت ادامه بده)
• ساختار کد و کنترل را فراهم می‌کند
• شاید درباره Callback Hell شنیده باشید. این اصطلاح یعنی این که شما یک ساختار برگشتی از Callbackها دارید. (Callbackهایی داخل Callbackهایی داخل Callbackها و...)

مثال

فرض کنید که Elon Musk در SpaceX نیازمند تابعی است، که در هنگام فشرده شدن یک دکمه، موتورهای موشک Falcon Heavy را روشن می‌کند.

ES5

ES6

دقت کنید که این تابع قبل از انجام یک کار، منتظر بروز یک رویداد می‌ماند. به طور خلاصه، ما تابع fireUpEngines() را به عنوان یک آرگومان به تابع pressButton() ارسال می‌کنیم. وقتی که یک کاربر یک دکمه را می‌فشارد، موتورها روشن می‌شوند.

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

منبع