۱۰ چیز که در مسیر تبدیل شدن به یک استاد JavaScript‌ باید یاد بگیرید

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

۱. جریان کنترل

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

• if else - اگر این مورد را نمی‌شناسید، پس قبلا چگونه کدنویسی می‌کردید؟
• switch - اساسا همان if else، به روشی خوش زبان‌تر. به محض این که چند مورد از حالت‌های مختلف دارید، از آن استفاده کنید.
• for - حلقه‌های for برای این ساخته شده‌اند که مجبور نباشید حرف خود را تکرار کنید. جدا از حلقه for معمولی، for of و for in هم خیلی کاربردی هستند. همچنین در جهت داشتن یک ساختار واضح‌تر، می‌توانید از تابع پیکانی استفاده کنید. برتری بزرگ حلقه‌های for این است که مسدود کننده هستند، پس می‌توانید از async await در آن‌ها استفاده کنید.
• شروط پیشرفته - استفاده از عملگرهای سه‌گانه و منطقی می‌تواند زندگی شما را بسیار آسان‌تر کند؛ به خصوص وقتی که در تلاشید تا کارها را به صورت خطی (inline) انجام دهید، که یعنی مجبور نیستید مقادیر را ذخیره کنید تا بعدا از آن‌ها استفاده کنید. مثال:

// سه‌گان

console.log(new Date().getHours() < 12 ? 'Good Morning!' : 'Time for a siesta')

// عملگرهای منطقی

const isJsMaster = prompt('Are you a JavaScript master?') === 'true'
console.log(isJsMaster && 'proficient coder')

۲. مدیریت خطا

این مورد برای من کمی طول کشید. مهم نیست که روی frontend‌ کار می‌کنید یا backend، در سال اول احتمالا به طور پیشفرض از console.log یا console.error برای مدیریت خطاها استفاده می‌کنید. برای نوشتن برنامه خوب، قطعا باید آن را عوض کرده، و لاگ‌های ضعیف خود را با خطاهایی که به درستی مدیریت شده‌اند، جایگزین کنید. باید بخواهید که بدانید چگونه constructor خطای خود را بسازید و چگونه آن خطاها را به درستی بگیرید. همچنین این که به کاربر نشان دهید مشکل اصلی چیست.

۳. مدل‌های داده

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

const calcShape = (width, height, depth, color, angle) => {...}

const calcShape = ({width, height, depth, color, angle}) => {...}

۴. ناهمگامی

این یک بعد بسیار مهم از JavaScript است؛ چه در حال گرفتن داده‌ها از backend باشید، یا این که به طور ناهمگام در حال پردازش درخواست‌ها در خود backend باشید. تقریبا در تمام موارد، شما با ناهمگامی هشدارهایش مواجه خواهید شد. اگر نمی‌دانید که ناهمگامی هشدارچیست، احتمالا یک خطای عجیب دریافت خواهید کرد، که به مدت تقریبا دو ساعت در تلاش خواهید بود که آن را برطرف کنید. اگر هم می‌دانید که ناهمگامی هشدار چیست، اما نمی‌دانید که چه کاری درباره‌اش انجام دهید، در نهایت با یک callback-hell مواجه خواهید شد. رویکرد بهتر این است که از promiseها، و / یا async / await در برنامه‌های خود استفاده کنید.

۵. دستکاری DOM

این یک موضوع جالب است. معمولا هم چیزی است که در زندگی روزمره به عنوان یک توسعه دهنده، به آن زیاد توجه نمی‌شود. شاید شما jQuery‌ را یاد گرفتید و هیچ وقت حس نکردید که نیاز دارید مقداری مهارت‌های دستکاری DOM‌ را نیز به دست بیاورید. شاید شما فقط در حال استفاده از یک فریم‌وورک frontend هستید، که در آن به ندرت به دستکاری سفارشی DOM نیاز دارید. گرچه، من فکر می‌کنم که حداقل در frontend، این یک بخش حیاتی از درک JavaScript است. دانستن نحوه کار DOM و نحوه دسترسی به عناصر، یک درک عمیق از نحوه کار وبسایت‌ها به شما می‌دهد. به علاوه، به نقطه‌ای خواهید رسید که نیازی به انجام دستکاری‌های سفارشی در DOM نخواهد بود؛ حتی وقتی که از فریم‌وورک‌های frontend‌ مدرن استفاده می‌کنید، و قطعا نمی‌خواهید که jQuery‌ را در فایل package.json خود فقط در جهت دسترسی به عنصر قرار دهید.

۶. Node.js / Express

حتی به عنوان یک توسعه دهنده frontend، باید اساس node.js را بدانید. به طور ایده‌آل، شما همچنین نحوه راه‌اندازی یک سرور نمونه و اضافه کردن برخی مسیرها یا تغییر مسیرهای موجود را خواهید دانست. JavaScript برای نوشتن اسکریپت‌ها در جهت کمک به شما در خودکارسازی بسیاری از فعالیت‌ها، عالی است. از این رو، دانستن نحوه خواندن فایل‌ها، کار کردن با filepathها یا bufferها یک جعبه ابزار خوب برای ساخت هر چیزی را می‌دهد.

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

یک بحث و جدال همیشگی درباره «برنامه‌نویسی تابعی علیه برنامه‌نویسی با گرایش به آبجکت» وجود دارد. احتمالا از طریق هر دو رویکرد، به نتیجه مشابهی خواهید رسید. در JavaScript، این کار حتی ساده‌تر است. شما هر دو رویکرد را در دسترس دارید. کتابخانه‌هایی مانند lodash، یک مجموعه بسیار عالی از ابزار به شما می‌دهند تا برنامه‌هایی را با یک رویکرد تابعی بسازید. امروزه، استفاده از کتابخانه‌های خارجی حتی اصلا ضروری نیست. بسیاری از مهم‌ترین توابع در مشخصه رسمی JavaScript پیاده‌سازی شده‌اند. شما قطعا باید بدانید که چگونه از map ‘reduce’، filter ‘forEach’ و ‘find’ استفاده کنید.

۸. رویکرد با گرایش به آبجکت

به طور مشابه به رویکرد تابعی، اگر شما می‌خواهید در JavaScript با گرایش به آبجکت استاد شوید، باید با آن آشنا شوید. من برای مدت زیادی در حرفه خود از آن بخش غفلت کردم و همیشه با استفاده از یک راه حل کار خودم را راه‌ انداختم، اما گاهی اوقات استفاده از آبجکت‌ها / کلاس‌ها و نمونه‌ها برای پیاده‌سازی عملکردهایی خاص، بهتر است. کلاس‌ها در React، MobX یا سازنده‌های سفارشی، خیلی تحت استفاده قرار می‌گیرند.

۹. فریم‌وورک Frontend

سه فریم‌وورک frontend برتر React، Angular و Vue.js می‌باشند. اگر امروزه به دنبال یک شغل هستید، تقریبا همیشه یکی از آن‌ها را به عنوان یک پیش‌نیاز خواهید داشت. حتی اگر آن‌ها به سرعت تغییر می‌کنند، مهم است که طرح کلی و اصلی آن‌ها را درک کنید تا نحوه کارشان به دستتان بیاید. همچنین، نوشتن برنامه‌ها به این روش آسان‌تر است. اگر هنوز تصمیم نگرفته‌اید که سوار کدام قطار شوید، پیشنهاد من React.js است. من در یکی دو سال اخیر در حال کار با آن بوده‌ام و هنوز از تصمیم خود پشیمان نشده‌ام.

۱۰. bundle کردن / transpile‌ کردن

متاسفانه، این یک بخش بزرگ از توسعه وب است. در یک طرف نباید بگویم متاسفانه، زیرا این که بتوانید با تمام امکانات جدید کد بنویسید، خیلی خوب است. در سمت دیگر، علتي که این حرف را میزنم این است که همیشه باید در ذهن داشته باشیم، مرورگرهای قدیمی‌ای وجود دارند که ممکن است آن امکانات را پشتیبانی نکنند؛ از این رو باید کد خود را به چیز دیگری transpile کنیم تا مرورگرهای قدیمی درک کنند. اگر با Node.js کار می‌کنید، احتمالا کمتر در معرض transpile کردن کد قرار می‌گیرید. استاندارد اصلی برای transpile کردن، babel.js است؛ پس با آن آشنا شوید. همچنین برای bundle‌ کردن کد خود و امتحان کردن همه چیز به صورت یکجا، چند گزینه در اختیار دارید. برای مدت زیادی Webpack بازیکن اصلی بود. مدتی پیش، parcel ظهور کرد و در حال حاضر راه حل مورد علاقه من است. این ابزار بسیار کارآمد است و پیکربندی آن نیز ساده است؛ حتی اگر بی نقص نباشد.

به علاوه:

عبارات قائده‌مند

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

آزمایش کردن

آزمایش کردن یکی از بخش‌های مهم توسعه نرم‌افزار است، و JavaScript هم از این قضیه مستثنا نیست. وقتی که در حال نوشتن کد هستید، قبل از انتشار آن، حتما آن را آزمایش کنید؛ حتی اگر این کار به صورت دستی باشد. یک رویکرد بهتر این است که از آزمایش‌های خودکار، انواع مختلف آزمایش، واحدهای آزمایش، آزمایش end-to-end، آزمایش بارگذاری، آزمایش امنیتی یا آزمایش frontend استفاده کنید. محیط‌های آزمایش مختلفی مانند enzyme، jasmina، mocha، chai و... وجود دارند. در حال حاضر محیط مورد علاقه من، ava.js است.

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

اگر قصد استاد جاوااسکریپت شدن دارید : به چارت آموزشی جاوااسکریپت راکت مراجعه کنید

منبع