کدنویسی و طراحی با لبخند

بخندید و برنامه نویسی یاد بگیرید!

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

هدف ما اینست که سهم هر چند کوچک در آموزش طراحی و برنامه نویسی داشته باشیم و همراه با خنده و تفریح آموزش بدیم!

مشاهده آموزش ها
کل آموزش ها
25
نظرات و عقیده
11
وردپرس
8
آموزش طراحی
5

مراحل طراحی یک قالب وردپرس

طراحـــــی ، قدرت تخیلی در قالب کد

با مرور زمان امکانات جدید و ویژگی‌های قدرتمند زیادی به جاوا اسکریپت اضافه شد؛ در ابتدا جاوا اسکریپت زبانی صرفا برای اعتبارسنجی فرم‌های اچ‌تی‌ام‌ال معرفی شد؛ اما با گذشت زمان با اضافه شدن امکانات، محبوبیت جاوا اسکریپت بیشتر و بیشتر شد، اما هم‌چنان زبانی سمت کلاینت بود و نمیشد از آن در سمت بک‌اند و سرور استفاده کرد؛ این مهم‌ترین دلیل بود که جاوا اسکریپت نتواند جایگزین PHP شود؛ اما بعد nodejs این مشکل هم برطرف شد، به طوری که برخی افراد به جاوا اسکریپت کوچ کردند و پروژه‌های بک‌اند خود را نیز با جی‌اس پیاده‌سازی کردند. اکما اسکریپت ۶ به بعد نیز امکانات جذابتری در اختیار کدنویسان قرار داد.

امکانات جدید جاوا اسکریپت در سال ۲۰۲۱

امکانات جدید جاوا اسکریپت در سال ۲۰۲۱

 

امکانات جدید جاوا اسکریپت

 

در این مقاله می‌خواهیم به برخی از این ویژگی‌های جدید که در سال ۲۰۲۱ میلادی معرفی شده‌اند، اشاره کرده و به صورت عملی طرز استفاده و Syntax آن‌ها را به شما ارائه دهیم؛ همه‌ی مثال‌ها با توضیح ساده و کافی برای درک هر چه بهتر خدمت شما ارائه خواهد شد.

به طور کلی این ویژگی‌های جدید را می‌توان در لیستی مانند زیر طبقه‌بندی کرد:

  • replaceAll
  • Promise.any
  • AggregateError
  • WeakRef
  • عملگر‌های جدید
  • FinalizationRegistry
  • جدا کننده شماره‌ها
  • Array.prototype.sort نیز بهبود عملکرد یافته است.
  • repeat

 

replaceAll یکی از زیباترین امکانات جدید

 

در گذشته برای پیداکردن یک رشته و تغییر آن به رشته‌ی دیگر از replace استفاده می‌کردیم؛ اما این متد فقط می‌توانست این کار را یک‌بار انجام دهد و اگر می‌خواستیم تمامی رشته‌ها در سراسر متن تغییر کنند، حتما باید از پترن‌های عبارات با قاعده (Regular Expression Pattern) استفاده می‌کردیم؛ اما با استفاده از replaceAll که در ES12 معرفی شده است می‌توانید این کار را بسیار ساده تر انجام دهید.

خروجی کد بالا در پایین به صورت کامنت برای شما مشخص شده است؛ همان طور که می‌بینید در طول کل رشته تمامی عبارت “ehsan gomnam” ها را به “web developer” تغییر می‌دهد.

 

توجه کنید:

در این متد، جاوا اسکریپت به بزرگی یا کوچکی حروف حساس است. یعنی عبارت Ehsan با عبارت ehsan متفاوت است.

 

جاوا اسکریپت همه جاست!

جاوا اسکریپت همه جاست!

 

جدا‌کننده ارقام

 

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

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

 

کارایی Promise ها

کارایی Promise ها

 

Promise.any

 

اگر پرامیس (Promise) ها را بلد باشید می‌توانید این موضوع را خیلی آسان درک کنید؛ اگر هنوز قسمت Promise ها را بلد نیستید، باید بدانید پرامیس‌ها برای باگ‌گیری خود خاصیت زبان جاوا اسکریپت ساخته شده‌اند؛ جی‌اس کد‌های شما را به صورت خط به خط (line by line) تفسیر می‌کند، در این میان اگر انجام کاری زمان‌بر باشد، آن را نادیده می‌گیرد و به دنبال تفسیر کد‌های بعدی می‌رود؛ اما این می‌تواند برای ما دردسر درست کند، فرض کنید ما چیزی را از یک api گرفته و درون یک متغیر ذخیره کرده‌ایم؛ خب قاعدتا fetch کردن این داده‌ها کار زمان‌بری محسوب می‌شود؛ و بعد در سطر‌های بعدی روی آن متغیر عملیاتی انجام داده‌ایم؛ اگر جی‌اس، بدون اجرای قسمت اول، یعنی fetch کردن و دریافت داده‌ها، به اجرای بقیه کد‌ها برود، چه اتفاقی خواهد افتاد؟ جواب بسیار ساده است؛ تعریف نشده! چون واقعا متغیر مورد نظر اصلا مقدار‌دهی نمی‌شود که بتوانیم روی آن کار‌هایی انجام دهیم. برای حل این مشکل باید از Promise ها استفاده کنیم. می‌توانید بدین صورت به خاطر بسپارید که ما در واقع، از جاوا اسکریپت قول می‌گیریم که یک کار را انجام دهد و بعد از این‌که آن کار را انجام داد، به سراغ کد‌های مشخص شده‌ای برود. تا این قسمت اصلا از ویژگی جدید صحبتی نکرده‌ایم.

با استفاده از Promise.any ما می‌توانیم چند کار را تعیین کنیم و به جی‌اس بفهمانیم که فقط یکی از این کار‌ها‌ و سریع‌ترین آن‌ها‌را انجام دهد؛ برای این منظور می‌توانیم Promise های خود را در متغیر‌های مختلف ذخیره کنیم، و یک آرایه از نام آن متغیر ها بسازیم و به متد Promise.any پاس بدهیم.

همان‌طور که در سورس‌کد بالا می‌بینید؛ ما به صورت مجازی وظایفی را شبیه‌سازی کردیم که اولی ۲۰۰ میلی ثانیه و دومی ۵۰۰ میلی ثانیه طول می‌کشد، در نتیجه وظیفه‌ای که ۲۰۰ میلی ثانیه برای انجام آن کافی است، انتخاب شده و اجرا می‌شود.

 

AggregateError

 

ما Promise.any را به صورت کاملا عملی و ساده توضیح دادیم؛ اما چیزی که نگفتیم این است که اگر بنا به هر دلیلی هیچ یک از این دستور‌ها و کار‌ها اجرا نشود چه می‌شود؟ در جواب باید بگوییم، یک AggregateError خوشگل به ما برگردانده می‌شود و ما می‌توانیم با استفاده از آن، سورس‌کد خودمان را هندل کنیم.

به مثال زیر توجه کنید:

این مثال دقیقا توسط MDN استفاده شده است و شما می‌توانید با مراجعه به AggregateError – MDN مستندات آن را نیز بخوانید.

 

۳ عملگر شرطی جدید از امکانات جدید جاوا اسکریپت است

۳ عملگر شرطی (وظیفه‌ای) جدید از امکانات جدید جاوا اسکریپت است

 

عملگر‌های منطقی جدید

 

Logical assignment operator ها در ساده‌تر کردن کار ما نقش خوبی را ایفا می‌کنند؛ در‌واقع کمک اصلی آن‌ها این است که باعث می‌شوند ما عملکرد‌های وظیفه‌ای منطقی را ساده‌تر انجام دهیم؛ حداقل بهترین معادل فارسی که می‌توانیم برای این موضوع مطرح کنیم همین است؛ اما با توجه به مثال‌هایی که زده می‌شود، می‌توانید این موضوع را نیز به سادگی متوجه شوید.

 

عملگر &&

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

عملگر ||

در این جا متغیر ehsan زمانی برابر با مقدار abafat قرار داده می‌شود که مقدار درستی نداشته باشد یعنی تقریبا این سه عملگر شبیه یک‌دیگر هستند.

 

عملگر ??

با استفاده از این عملگر نیز می‌گوییم اگر متغیر ehsan برابر با خالی (null) یا تعریف نشده (undefined) بود، مقدار آن با مقدار متغیر abafat برابر شود.

 

repeat ویژگی جدید و پر‌کاربرد جاوا اسکریپت

 

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

 

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

ضمنا اگر سوال یا دیدگاهی داشتید خیلی خوشحال می‌شویم که آن را با ما در میان بگذارید.

به نظر می رسد که شما نوتیفیکیشن را مسدود کرده اید!
اشتراک گذاری
شاید این مطالب را نیز بپسندید
دیدگاه یا سوال خود را مطرح کنید
guest
0 نظر/ سوال و جواب
Inline Feedbacks
View all comments
0
اگر سوال یا دیدگاهی دارید ، مطرح کنید!x
()
x