یه ممد 20 ساله که برنامهنویس بک-انده. لینکای من: https://redl.ink/Mohammadalian_1383
چندتا لایبرری جاوااسکریپت که احتمالا نیاز خواهید داشت! (1)
با نظرای مثبتی که از مقاله اولم گرفتم انگیزم برای نوشتن این مقاله بیشتر شد، همینجا به همه اونایی که مقاله قبلی رو خوندن و میخونن و خواهند خوند یه دمت گرم میگم??
بریم سراغ لایبرری هایی که احتمالا توی پروژتون نیازتون میشه یا حداقل وقتی باهاش آشنا بشید سعی میکنید یه پروژه بر اساس اون لایبرری تعریف کنید، انقدر که جذابه!
Axios
به عنوان یه برنامه نویس جاوااسکریپت همیشه براتون پیش میاد که یه سری جاها باید با سرور یخورده چیز میز جا به جا کنید. برای این کار میتونید از api های خود جاوااسکریپت مثل XMLHttpRequest و یا Fetch استفاده کنید ولی هرچی کارتون بزرگتر باشه و این تعاملات بخواد بیشتر بشه استفاده از این api ها کارتون رو سخت تر میکنن و لایبرری Axios برای این هستش که این رد و بدل اطلاعات با سرور رو خیلی براتون آسون تر و جذاب تر بکنه (آدم عشق میکنه وقتی باهاش کار میکنه?)، اساس کار این لایبرری Promise ها هستن و خودش از XMLHttpRequest استفاده میکنه و هم میتونید توی محیط node.js ازش استفاده کنید هم توی محیط browser.
تازه دو تا ویژگی خیلی باحال هم داره، اولی interceptor ها هستش که باهاشون میتونید بگید قبل از اینکه request ارسال بشه چه کار بکنه (مثلا بیاد زمان ارسال + url رو توی کنسول چاپ کنه) و یا بعد از اینکه response اومد چیکار کنه (مثلا بیاد زمان پاسخ + url رو توی کنسول چاپ کنه?) ، دومی transformer ها هستن که میتونید بوسیله اونا مقدار یا header های request و دیتای response رو تغییر بدید مثلا هدر api-key رو به ریکوئست اضافه یا حذف کنید یا بیاید و فیلد status توی JSON برگردونده شده توسط سرور رو حذفش کنید!
خلاصه اگر میخواید با جاوااسکریپت به سرور اتصال برقرار کنید axios یه گزینه فوق العاده مناسبه پس ازش غافل نشید?
حجم نهایی باندل شدن این لایبرری در صورت minified + GZIP بودن 4.4 کیلوبایته
iziToast
حتما پیش اومده که بخواید یه سری متون کوچیک(toast) و خوشگل رو به کاربرتون نشون بدین تا از نتیجه کاری که کرده خبردار بشه (مثلا تا انتهای ویدیو رو مشاهده کرده و میخواد بره ویدیو بعد)
این لایبرری با ظاهر خوب و قابل شخصی سازی که داره میتونه این کار رو براتون راحت و جذاب بکنه.
حجم نهایی باندل شدن این لایبرری در صورت minified + GZIP بودن 5 کیلوبایته
Anime.js
انیمیشن های خوشگل خفن در صورت استفاده درست و بجا همیشه باعث داشتن تعامل بیشتر از سمت کاربران و درنهایت داشتن تجربه کاربری بهتر میشن با این لایبرری میتونید دقیقا اینکار رو بکنید، انیمیشن هایی با قابلیت شخصی سازی خیلییی زیاد که به سادگی میتونید بسازیدشون.
حجم نهایی باندل شدن این لایبرری در صورت minified + GZIP بودن 6.7 کیلوبایته
Tippy.js
تولتیپ ها به کاربرامون کمک میکنن تا با یه متن کوتاه به درک درستی از اون چیزی که روش hover کردن برسن و این لایبرری برای اینه که بتونیم تولتیپای خوشگل و خفنی رو بسازیم که خیلیم قابلیت شخصی سازیشون بالاست.
حجم نهایی باندل شدن این لایبرری در صورت minified + GZIP بودن 14.3 کیلوبایته
Moment.js
یکی دیگه از ملزومات هرزبان برنامه نویسی کارکردن با زمان و تاریخه که قطعا بهش نیاز خواهید داشت و این لابرری به قول خودش کارش تجزیه کردن، تایید اعتبار و نمایش زمان و تاریخه مثلا محاسبه فاصله زمانی دو تا تاریخ، نمایش زمان فعلی ایران یا کانادا یا هرجای دیگه که بخواید.
حجم نهایی باندل شدن این لایبرری در صورت minified + GZIP بودن 65.9 کیلوبایته
اگر علاقه مند شدید با این لایبرری ها کارکنید یا دلتون براشون تنگ شده بود و خواستید خاطره ای تجدید کنید میتونید پروژه زیر رو بزنید تا همه لایبرری ها رو تمرین کرده باشید?
با استفاده از https://api.coinranking.com/v1/public/coins و axios لیست پنج تا ارز اول رو بگیرید و با iziToast وقتی که response اومد یا به ارور خورد پیامی مناسب به کاربر نشون بدید وقتی response رو گرفتید اون جایی که قراره response رو نشون بدید انیمیشن متناسب با سلیقه خودتون بدید (مثلا بلرزونیدش!) وقتی کاربر روی یکی از ارزها رفت و hover کرد با tippy.js توضیحات اون رو نشون بدید(توضیحات هم توی api هست) و حقوق اون کاربر رو بگیرید (به دلار) بعد با moment.js حساب کنید چندماه طول میکشه تا بتونه یکی از اون ارزی که انتخاب کرده رو بخره!
پروژه همونطور که مشخصه خیلی واضح تعریف نشده، پس هرجور خودتون خواستید درستش کنید ولی سعی کنید کلیات رو رعایت کنید?
اینم از اولین قسمت معرفی لایبرری های مفید و کاربردی جاوااسکریپت، طبق معمول ممنون میشم اگر ایده، انتقاد و یا لایبرری کاربردی دیگه ای میشناسید توی نظرات بنویسید برام.
راستی اگر پروژه رو انجام دادید و اون رو توی گیتهابتون گذاشتید ممنون میشم کامنت کنید لینک ریپازیتوریتون رو.
این سری ادامه خواهد داشت.....
محمد محمدعلیان - 20 بهمن 1398
مطلبی دیگر از این انتشارات
بررسی مفهوم bubbling و نحوه عملکرد event ها در جاوا اسکریپت
مطلبی دیگر از این انتشارات
فانکشنال js بدون درد و خونریزی - بخش یک reduce
مطلبی دیگر از این انتشارات
ترندهای توسعه رابطکاربری در سال 2018