https://virgool.io/feed/@hashcode Write Clean Code and Make everyone happy fa 2026-04-15 05:59:58 https://files.virgool.io/upload/users/51592/avatar/umHTCG.png?height=120&width=120 https://virgool.io/@hashcode https://virgool.io/@hashcode/%D9%86%DA%AF%D8%A7%D9%87%DB%8C-%D8%A8%D9%87-%D8%A8%D8%A7%D9%86%D8%AF%D9%84%D8%B1%D9%87%D8%A7%DB%8C-%D8%AC%D8%A7%D9%88%D8%A7%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%AF%D8%B1-%DB%B2%DB%B0%DB%B2%DB%B5-%D9%88-%D9%85%D8%B9%D8%B1%D9%81%DB%8C-rolldown-xuyfv84l9u7l در پایان سال ۲۰۲۴ یه اتفاق باحال افتاد: rolldown بتا اومد و کلی سر و صدا کرد، مخصوصاً بین دوستانی که با Vite کار میکنن.باندلر چیه و چرا بهش نیاز داریم؟باندلر یه ابزاریه که فایل‌های مختلف و وابستگی‌هاشون رو میگیره و مثل یه آشپز ماهر، همه رو با هم ترکیب میکنه و یه غذای خوشمزه (یه فایل بهینه!) تحویل میده.بعضی از توسعه‌دهنده‌ها میگن "الان که مرورگرها Es Module و http2 ساپورت میکنن دیگه نیازی به باندلر نداریم!"، ولی خب هنوز نیاز داریم که کدهامون رو:- کوچیک کنیم (minify)- برای مرورگرهای قدیمی‌تر ترجمه کنیم- کد های jsx / ts و ... ترنسپایل کنیم- و کلی کار دیگه که نمیشه بیخیالشون شد!*‌ راستی توضیحات نسخه ویدویی کاملتره خواستی اونم ببینتاریخچه باندلرها (سیر تکامل! )نسل صفر: Browserify !اولین باندلر محبوبی که اومد و کار باندلینگ رو به سبک node انجام دادنسل اول: باندلرهای جاوااسکریپتی۱. **Parcel**- ساده است و config نمیخواد- قابلیت HMR داره و واسه پروژه‌های vanilla عالیه۲. **Rollup**- فیچری های زیادی داره و داخل vite هم استفاده میشه- پلاگین‌هاش از در و دیوار میریزه۳. **Webpack**- پادشاه باندلرها! همه میشناسنش- کلی قابلیت داره- تقریبا همه فیچر های رو داره و بیشترین استفاده رو در بین پروژه ها تا سال ۲۰۲۴ داشته!نسل دوم: هیولای های سرعت!۱. **ESBuild**- با Go نوشته شده توسط cto قبلی فیگما- سریع هست 🏃‍♂️۲. **Turbopack**- اومدن Webpack رو با Rust بازنویسی کردن- هنوز تو production نمیشه ازش استفاده کرد (فعلاً تو آزمایشگاهه!)۳. **RSPack**- اینم یه Webpack دیگه با Rust- سرعتش خیلی خوبه ولی هنوز داره خودشو ثابت میکنهخوب حالا Vite چطور کار میکنه؟ویت یا Vite یه ابزار بیلده و خودش بانلدر نیست ولی یه اومده و از دو تا باندلر استفاده میکنه- موقع توسعه از ESBuild استفاده میکنه (چون سریعه)- موقع تولید از Rollup استفاده میکنه (چون باید همه چی بهینه باشه)آیا esbuild نمیتونه بهینه باشه یا چرا دقیقا vite از دوتا بانلدر استفاده میکنه اینجا ببینمشکلی که ویت داره اینه که یسری inconsistency توی dev و prod ایجاد شده و اومدن یه پروژه جدید تعریف کردن. کی تعریف کرده؟ آقای Evan You خالق vue , vite و ... و تیمش تو کنفرانس viteConf 2024 راجبش حرف زدن رول دان یا RollDownرولداون اومده که بگه "چرا دو تا باندلر؟ من تنهایی کار همه رو انجام میدم! یه سری فیچر جدید هم میدم و بهینه تر هم هستم " نتایج تست‌هاش هم بهتره:تست اول : تو تست باندلینگ با ۱۰,۰۰۰ فایل JS:- رولداون: ۶۰۰ میلی‌ثانیه- ESBuild: ۸۰۰ میلی‌ثانیه- RSPack: ۲ ثانیه- Rollup: ۲۲ ثانیه (میشه تو این فاصله یه چایی خورد! 😅)تست دوم : توی ویدیو ببینیدآمار جالب سال ۲۰۲۴- فعلاً Webpack داره پادشاهی میکنه (۸۶٪)- ولی همه به Rolldown امیدوارن (۸۶٪ علاقه‌مندی)اگر رنکینگهای بعدی هم مهمه برای روی لینک آمار بزن حرف آخررولداون با توجه به سرعت و قابلیت‌هاش، به نظر امیدوار کننده میرسه. شاید تا چند وقت دیگه همه بگن "Webpack? اون مال قدیما بود!" 😉حالا میتونی خودت امتحانش کنی و ببینی روی پروژه تو چطور کار می کنه. فقط یادت باشه هنوز بتاست، پس یهو نری تو production ازش استفاده کنی!دمت گرم که تا اینجا خوندی! 🙌اگه این مقاله برات مفید بود و فکر میکنی رفیق برنامه‌نویست هم باید بدونه همین الان براش بفرست - شاید فردا تو مصاحبه کاریش به دردش بخوره! 😉توی پست‌های بعدی میخوایم سراغ چیزای باحال‌تر بریم، نظرت چیه؟ 🤔 منابع بیشتر:- معرفی رولداون توسط تئو: https://youtu.be/IDe1zVWoX94?si=TQVnEwCk-Oy_IZEp- ایوان یو در ViteConf 2024: https://youtu.be/mWK3Y_1kmaM?list=PLqGQbXn_GDmnObDzgjUF4Krsfl6OUKxtp&t=719- نظرسنجی State of JS: https://stateofjs.com/en-US#فرانت‌اند #جاوااسکریپت #رولداون #توسعه_وب #frontend #bundler #development Hamid Shoja Hamid Shoja Mon, 06 Jan 2025 20:38:10 +0330 https://virgool.io/@hashcode/%DA%A9%DB%8C-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A7%D8%B2-session-%D9%88-%DA%A9%DB%8C-jwt-%D8%A8%D8%B1%D8%A7%DB%8C-authentication-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C-f0qbtbk80db6 درود به دوستان عزیز بعد مدت ها گفتم پست داشته باشم امروز میخام درباره authentication و JSON Web Tokens یا JWT ها حرف بزنیم. مکانیزم هر کدومو رو بررسی میکنیم و مزایا و معایبشون رو نگاه کنیم.و آخرش بهیمم کی از کدوم باید استفاده کنیم.اگر علاقمندی این مقاله رو در قالب ویدیو ببینی تو یوتوب میتونی تماشا کنی بررسی Session سشن یک روش قدیمی‌تر برای پیگیری وضعیت لاگین کاربره.اول بیا ببینیم authentication مبتنی بر session چجوری کار می‌کنه:کاربر اطلاعات ورودش رو می‌فرسته به سرورسرور این اطلاعات رو چک می‌کنهاگه درست باشن، یه session جدید می‌سازهسرور اطلاعات session رو ذخیره می‌کنه، معمولا تو database یا تو حافظه موقت مثل Redisاین اطلاعات می‌تونه شامل ID کاربر، زمان انقضای session و چیزای دیگه باشهسرور یه جواب می‌فرسته با یه ID session منحصر به فرد، معمولا به شکل cookieتو درخواست‌های بعدی، کلاینت خودکار این ID session رو با هر درخواست می‌فرستهسرور این ID رو می‌گیره، اطلاعات session مربوطه رو پیدا می‌کنه و ازش برای authentication و پردازش درخواست استفاده می‌کنهنکته مهم اینه که تو authentication مبتنی بر session، سرور مسئول ساخت و ذخیره اطلاعات session هست. بعدش از ID session به عنوان کلید استفاده می‌کنه تا این اطلاعات رو تو درخواست‌های بعدی بازیابی کنه.یه مزیت session ها اینه که باطل کردنشون راحته. چون اطلاعات session رو سرور نگه می‌داره، می‌تونه هر وقت بخواد اون رو پاک یا باطل کنه.ولی تو یه سیستم توزیع شده که برنامه‌ت رو چندتا سرور اجرا میشه، همه این سرورا باید به اطلاعات session دسترسی داشته باشن. معمولا اینو با یه session store مرکزی مثل Redis یا یه Distrbiued sql database انجام میدن. این روش خوب کار می‌کنه ولی یه کم پیچیدگی اضافه می‌کنه و ممکنه هر درخواست رو کند کنه چون سرور باید جداگانه بره سراغ session store.بررسی JWT: جیسون وب توکن یا JWT یه نوع توکنه که به صورت JSON فرمت شده و شامل اطلاعات کاربره. حالا بیا ببینیم authentication مبتنی بر JWT جات چجوری کار می‌کنه:کاربر اطلاعات ورودش رو می‌فرسته به سرورسرور این اطلاعات رو چک می‌کنهاگه درست باشن، یه JWT می‌سازهسرور JWT رو با یه کلید مخفی secret key امضا می‌کنه. این امضا از دستکاری توکن token integrity جلوگیری می‌کنهسرور JWT رو برمی‌گردونه به کلاینت، معمولا تو response bodyکلاینت JWT رو ذخیره می‌کنه، معمولا تو local storage یا cookieتو درخواست‌های بعدی، کلاینت JWT رو تو header درخواست می‌فرستهسرور امضای JWT رو چک می‌کنه. اگه معتبر باشه، به اطلاعات داخل توکن اعتماد می‌کنه و ازش برای authentication و authorization استفاده می‌کنهتفاوت مهم اینه که با JWT ها، سرور هیچ وضعیت session رو ذخیره نمی‌کنه. همه اطلاعات لازم داخل خود توکن هست که روی کلاینت ذخیره میشه. این باعث میشه JWT ها stateless باشن. امضای JWT‌هابرای امضای JWT‌ها چند تا الگوریتم داریم که HMAC، RSA و ECDSA از معروف‌ترین‌هاشونن. الگوریتم HMAC یه روش امضای متقارنه، یعنی از یه کلید مخفی یکسان برای امضا و تایید توکن استفاده می‌کنه. این روش ساده‌تر و سریع‌تره، ولی باید کلید مخفی رو با هر سرویسی که می‌خواد توکن رو چک کنه به اشتراک بذاری، که می‌تونه مشکل امنیتی ایجاد کنه.از طرف دیگه، RSA و ECDSA روش‌های امضای نامتقارن هستن. اینا از یه کلید خصوصی برای امضا و یه کلید عمومی برای تایید استفاده می‌کنن. این باعث می‌شه معماری امن‌تری داشته باشی که توش کلید خصوصی مخفی می‌مونه و فقط برای امضا استفاده می‌شه، در حالی که هر سرویسی می‌تونه با کلید عمومی توکن رو تایید کنه. البته این روش نسبت به HMAC پیچیده‌تر و سنگین‌تره.انتخاب الگوریتم امضا بستگی به نیازهای امنیتی و معماری سیستمت داره. اگه یه برنامه یکپارچه داری یا به همه سرویس‌های سیستمت اعتماد داری، HMAC کافیه. ولی اگه معماری microservices داری یا می‌خوای JWT‌ها رو با سرویس‌های شخص ثالث غیرقابل اعتماد به اشتراک بذاری، RSA یا ECDSA راه حل امن‌تری ارائه می‌دن.رفرش توکن یکی از چالش‌های JWT‌ها، مدیریت انقضای توکن‌هاست. اگه یه توکن دزدیده بشه، تا وقتی منقضی نشده قابل استفاده‌س. برای کم کردن این خطر، می‌تونی از refresh token‌ها در کنار access token‌های کوتاه‌مدت استفاده کنی. اکسس تون access token همون JWT اصلیه که برای authentication تو هر درخواست استفاده می‌شه و معمولا حدود 15 دقیقه اعتبار داره. refresh token از طرف دیگه خیلی طولانی‌تر اعتبار داره، شاید چند روز یا چند هفته.وقتی access token منقضی می‌شه، به جای اینکه از کاربر بخوای دوباره لاگین کنه، کلاینت می‌تونه درخواست refresh token رو به یه endpoint خاص تو سرور بفرسته. سرور چک می‌کنه ببینه refresh token معتبره و باطل نشده، اگه همه چی درست باشه یه access token جدید صادر می‌کنه. این فرایند پشت صحنه اتفاق می‌افته و کاربر متوجه نمی‌شه.این روش بین امنیت و تجربه کاربری تعادل ایجاد می‌کنه. access token کوتاه‌مدت خطر سوءاستفاده رو کم می‌کنه، در حالی که refresh token طولانی‌مدت اجازه می‌ده کاربرا برای مدت طولانی لاگین بمونن بدون اینکه مجبور باشن مدام وارد سیستم بشن.مهمه بدونی که درخواست refresh token فقط وقتی فرستاده می‌شه که access token منقضی شده باشه، نه تو هر درخواست. access token تو هر درخواستی که نیاز به authentication داره فرستاده می‌شه.پس کی باید از authentication مبتنی بر session استفاده کنی و کی JWT بهتره؟کی session خوبه وقتی:- می‌خوای بتونی فوراً session‌ها رو باطل کنی- قبلاً یه مخزن داده مرکزی برای کارای دیگه داری و می‌تونی ازش برای ذخیره session هم استفاده کنی- می‌خوای داده‌های حساس رو روی سرور نگه داری که امنیت بیشتری داره کیJWT‌ها گزینه خوبی هستن وقتی:- به یه معماری stateless نیاز داری چون همه اطلاعات لازم تو خود توکن ذخیره می‌شن- می‌خوای برنامه‌ت رو راحت‌تر روی چند سرور مقیاس‌پذیر کنی- نیاز داری اطلاعات authentication رو با سرویس‌های دیگه به اشتراک بذاری، مثلاً تو معماری microservicesاگه JWT رو انتخاب می‌کنی، در نظر بگیر که از refresh token‌ها هم استفاده کنی تا بین امنیت و تجربه کاربری تعادل ایجاد کنی.در نهایت، انتخاب بین این دو روش بستگی به نیازها و معماری خاص برنامه‌ت داره.اگه از مقاله خوشت اومده، ممکنه مقالات بعدی هم برات جالب باشه پس فالو و لایک یادت نره ضمنا سورس این مقاله bytebytego هست که محتوای خیلی خوبی تولید میکنه و میتونید سایتشو دنبال کنید و منم این مقاله رو که بنظرم خیلی مفید بود از روش ترجمه کردم تا مقاله بعدی بدوردحمید شجاع Hamid Shoja Hamid Shoja Mon, 05 Aug 2024 14:48:23 +0330 https://virgool.io/CodeLovers/%DA%86%D8%B1%D8%A7-%D8%A8%D8%A7-%D9%88%D8%AC%D9%88%D8%AF-callback-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D8%A8%D9%87-promise-%D9%86%DB%8C%D8%A7%D8%B2-%D8%AF%D8%A7%D8%B1%DB%8C%D9%85-qfa8bjrv5ode جاوا اسکریپت اغلب برای برنامه نویسی Asynchronous یا برنامه نویسی در حالتی که از callbackها استفاده میشه به کار میره. در مورد اینکه Callback چیه و چرا باید از اون استفاده کنیم در مقاله قبلی صحبت کردیم و مثال زدیم. اگر دقیقا نمیدونید callback چیه و چرا معرفی شد حتما قبلش اون مقاله رو بخونید. مشکل Callback چیه؟ استفاده پیوسته از Callback ممکنه ما رو به مشکلی به نام callback hell هدایت کنه. Callback hell با توجه به سطوح مختلف تورفتگیش باعث میشه کد شما مثه یک هرم خواندش مشکل باشه که به اون Pyramid Of Doom هم میگن. خوب تو این مقاله قصدم اینه یه نگاهی به این مشکل بصورت دقیق تر داشته باشم و علت معرفی promise و اینکه این مشکل رو چطور حل می کنه بپردازم. لازمه بگم که هر امکان جدیدی که معرفی میشه یه دلیلی پشتشه و فهم اون بجای صرفا یادگیری نحوه استفاده، درک دقیقتر و عمیقتر و البته لذت بیشتری در برنامه نویسی بهتون میده.خوب بریم سراغ مشکلی که callback میتونه ایجاد کنه .بیایید به حالتی فکر کنیم که احتمالاً می تونه callback hell ایجاد کنه. تصور کنیم که می خوایم اطلاعات یک کاربرو از API یا دیتابیس بگیریم. بعد از اینکه اطلاعات کاربر رو گرفتیم، می خوایم همه پست های وبلاگ اون کاربرو دریافت کنیم و بعدش وقتی که پست های وبلاگ دریافت شد ، نظرات اون پست رو هم دریافت کنیم.در روش synchronous یا همزمان ، همه چی شسته رفته است یعنی همه چی خوب و به ترتیب و پشت سر هم اجرا میشن البته این بشرطیه که بین درخواستامون تاخیری نباشه که متاسفانه هست و سرور ممکنه تاخیر داشته باشه خوب ناچارا پس باید بگیم که از روش asynchronous یا ناهمزمان استفاده باید بشه.بنابراین اول بیایین سه تا function ایجاد کنیم که این سه تا کار و انجام میده. یعنی گرفتن کاربر، گرفتن پست ها، گرفتن کامنت هاfunction getUser(id, callbackfunc) { setTimeout(() => { console.log('Getting the user from the database...'); callbackfunc({ id: id, name: 'Vegibit' }); }, 1000); }function getBlogPosts(username, callbackfunc) { setTimeout(() => { console.log('Calling WordPress Rest API for posts'); callbackfunc(['Post1', 'post2', 'post3']); }, 1000); } function getComments(post, callbackfunc) { setTimeout(() => { console.log('Calling WordPress Rest API for comments for ' + post); callbackfunc(['comments for ' + post]); }, 1000); }خوب سه تا تابع نوشتیم که هر کدوم حدود یه ثانیه تاخیر ایجاد میکنن بعد دیتایی که میخاییم رو برمیگردونن. حالا باید اینها رو به ترتیب کال کنیم یعنی اول یوز رو بگیریم بعد از اینکه اطلاعت یوزر برگشت تابع دوم پستاش و بعد کامنت هاش ....پس اینجوری مینویسمش : getUser(1, (user) => { getBlogPosts(user.name, (blogposts) => { getComments(blogposts[0], (comments) => { console.log(user, blogposts[0], comments); }) }) });خوب به نظر همه چی درسته !بنظرتون کد کار میکنه ؟ بلی این کد کار می کنه، خوب پس !!! اگر کار میکنه دیگه مقاله نوشتنوتون چی بود؟؟ نکته اینکه که خوندن این دست کده ها و نگاه کردن بهش آسون نیست. از این بدتر ، اگر سطوح بیشتری از callback داشته باشیم تورفتگی بیشتر میشه و مطمئناً در کد گم می شیم (به بالای 5 تا کالبک تو در تو لحظه ای فکر کنید یا تصویر پایین رو نگاه کنید) ، این خودش میتونه سبب ایجاد باگ بشه که خوب بعدا براتون دردسر ساز میشه. حالا پیدا کردن باگ هم خودش داستانیه، کد پایین ببینید اینجا همون چیزیه که به اون Pyramid Of Doom میگیم! یا همون جهنم callback معروف خوب چه راهکارایی هست از شر این کال بک راحت شیم ؟اول از همه که خوب اگر یک یا دو سطح کال بک دارین سخت نیست نیازی هم نیست کاری کنید. دوم یه روش که این مشکل رو کمتر میکنه استفاده از Named functions هست ولی روش پرفکتی نیست از حوصله این مقاله هم خارجه خواستین در موردش مطالعه کنید برین اینجا میریم سراغ اصل مطلب اینکه از Promise ها استفاده کنیم و اینکه چطور بهمون در این موضوع کمک میکنن. معرفی آقای Promise حالا بهش گفتم آقا، خانوما نارحت نشن چون آقایون زیاد قول میدن گفتیم اینجوری صداش کردم.پرامیس ها یا Promises (وعده ها :-/ از من به شما نصحیت همون انگلیسشو یاد بگیرید) نتیجه نهایی یک عملیات asynchronous رو برامون نگه میدارن. بطور کلی هر وقت عملیات ناهمزمان تموم بشه میتونه منجر به یه نتیجه یا یک خطا بشه یعنی چی ؟ جلوتر میگم ، بطور کلی یه promise سه حالت اصلی میتونه داشته باشه اول Pending بعد Fulfilled و آخری Rejected. خوب حالا یعنی چی؟ همون مثال بالا رو در نظر بگیریم که میخاییم کاربر رو از دیتابیس بگیریم وقتی درخواست میدیم promise میره تو فاز pending بعدش که نتیجه اومد میره تو حالت fulfilled اگر هم نتوست و مشکلی پیش اومد اینترنت قطع شد سرور اتیش گرفت بد قول بود یا هرچی میشه rejected نحوه نوشتن یک پرامیس خیلی راحت هست. ابتدا با ساختار اون بشیم و بعد مثال بالا رو با پرامیس خواهیم نوشت:var promise = new Promise(function(resolve, reject) { // do something ... })همونطور که می‌بینیم، پرامیس یک آبجکت از کلاس ‌Promise هست که فقط یک آرگومان می‌گیره که یک تابع بی‌نام هست. وقتی یک پرامیس ساخته میشه، این تابع بطور خودکار اجرا میشه. این تابع عملیات مورد نظر رو انجام میده و نهایتا باید یک نتیجه رو به خروجی بفرسته. نتیجه موفقیت‌آمیز بودن یا خطا. این تابع دو تا آرگومان می‌گیره که اولی resolve و دومی reject هست.وقتی عملیات این تابع به پایان رسید، اگر خروجی کار موفقیت‌آمیز بود، باید resolve رو صدا بزنیم و اگر خطا داشت reject رو صدا می‌زنیم.بزارین یه مثال خیالی عملی تر بزنم.const promise = new Promise((resolve, reject) => { // Do some asynchronous tasks // ... setTimeout(() => { let apiResponse = 1; if (apiResponse == 1) { resolve('It worked'); // pending => resolved, fulfilled } else { reject(new Error('Something went wrong')); // pending => rejected } }, 1000); }); promise.then(result => console.log('Result:', result)) .catch(err => console.log('Error', err.message));زمانی که بخش resolve اجرا میشه یا عملیات موفق هست (apiResponse = 1) و زمانی که درخواست بخش rejected اجرا میشه یا عملیات نا موفق هست (apiResponse=0) بخش catch پرامیس یه خطا نشون میدهخوب الان با نحوه کار پرامیس میتونیم مثال بالامون رو با کمک پرامیس دوباره بنویسیم .پرامیسس به جای کال بکدر مثالی که برای callback hell نشون دادم ساختار parymid of doom وجود داشت، به عبارتی ، ما اونجا مشکل تو در تو بودن کد رو داشتیم که خواندن کد رو دشوار میکرد. در اینجا ، می تونیم توابع asynchronous را طوری تغییر بدیم که یک promise برگردونن. از اونجایی که این توابع async یک promise برمی گردونن پس می تونیم با استفاده از .then () و .catch () این promise ها رو بکار بگیریم و بدینگونه Parymid of doom و callback hell را حذف کنیم. توجه : توابع asynchronous از تابع بعنوان پارامتر دیگه استفاده نمیکنن در واقع خودشو یه promise به ما return میکنن. امیدوارم مشخص شود که در داخل وعده بازگشت شده ، اکنون کد async (خواندن یک پایگاه داده یا درخواست API) قرار دارد.// getUser(1, (user) => { // getBlogPosts(user.name, (blogposts) => { // getComments(blogposts[0], (comments) => { // console.log(user, blogposts[0], comments); // }) // }) // }); getUser(1) .then(user => getBlogPosts(user.name)) .then(blogposts => getComments(blogposts[0])) .then(comments => console.log(comments)) .catch(err => console.log('Error: ', err.message)); function getUser(id) { return new Promise((resolve, reject) => { setTimeout(() => { console.log('Getting the user from the database...'); resolve({ id: id, name: 'Vegibit' }); }, 1000); }); }function getBlogPosts(username) { return new Promise((resolve, reject) => { setTimeout(() => { console.log('Calling WordPress Rest API for posts'); resolve(['Post1', 'post2', 'post3']); }, 1000); }); }function getComments(post) { return new Promise((resolve, reject) => { setTimeout(() => { console.log('Calling WordPress Rest API for comments for ' + post); resolve(['comments for ' + post]); }, 1000); }); } خوب اینم از پرامیس کدشو سعی کنید خودتون یه بار بنویسید تو سایتایی مثه playcode.io ، codesandbox یا مروگر و...این کد رو برین تست کنید باهاش کار کنید. تا واستون جا بیفته.خلاصه مزایای پرامیس‌هاخوانایی کد بالاتر میره. چون کدهای ساده‌تری خواهیم داشت.مدیریت بهینه‌تر نتیجه موفقیت‌آمیز یک عملیات ناهمگاممدیریت بهینه‌تر خطای یک عملیات ناهمگاماوکی مقاله طولانی شد. اگرچه زیاد توضیح دادم ولی میدونم که تا الان به این خوبی کسی پرامیس رو توضیح نداده بود ;-) خوشحالم که خوشتون اومده، کامنت و لایک فراموش نشه حتما واسه دوستا و هم تیمیاتون که با پرامیس و کال بک مشکل دارن بفرستن این مقاله رو و تا میتونید شیر کنید. مقاله بعدی که مخام بنویسیم راجبع اینه که چرا با وجود callback و promise تو نسخه es8 اومدن و async await رو معرفی کردن چه کاربردی داره و چه مشکلی رو حل میکنه ، یه مقاله هم راجبع کارایی که با پرامیس میشه انجام داد خواهم نوشت پس همراهم باشید.ممنون که مقاله رو خوندید.حمید شجاع <br/>https://vegibit.com/javascript-callbacks-vs-promises-vs-async-await/https://www.freecodecamp.org/news/node-js-what-when-where-why-how-ab8424886e2/#:~:text=Blocking%20refers%20to%20operations%20that,a%20non%2DJavaScript%20operation%20completes.https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced Hamid Shoja Hamid Shoja Wed, 20 Jan 2021 12:46:18 +0330 https://virgool.io/CodeLovers/%DA%86%D8%B1%D8%A7-%D8%A8%D9%87-callback-%D8%AF%D8%B1-%D8%AC%D8%A7%D9%88%D8%A7-%D8%A7%D8%B3%DA%A9%D8%B1%DB%8C%D9%BE%D8%AA-%D9%86%DB%8C%D8%A7%D8%B2-%D8%AF%D8%A7%D8%B1%DB%8C%D9%85-vp2r26jnjeq2 جاوا اسکریپت با قابلیت های closure ، first class functions و دیگر قابلیت هاش یک زبان برنامه نویسی قدرتمند شناخته میشه از طرفی جاوا اسکریپت اغلب برای برنامه نویسی Asynchronous استفاده میشه خوب چطور اینکارو انجام میده با قابلیتی به نام Callback میخوام تو این مقاله با یک مثال توضیح بدم که چطور میتونیم یک callback بنویسیم .میخوام در چند مقاله نگاهی به سیر تحول برنامه نویسی ناهمزمان را در JavaScript از callback تا async await داشته باشیم تا درک دقیقتری از این موضوع پیدا کنیم و این درک قطعا کمکی زیادی در برنامه نویسی Node.js و جاوا اسکریپت می کنه. با من همراه باشید ...برنامه نویسی Asynchronous این نوع برنامه نویسی یا برنامه نویسی غیر همزمان، زمانی استفاده میشه که نیازه به عملیات i/o داشته باشیم. مثه کار با database، دانلود عکس ، نوشتن روی دیسک و .... ، اینا همشون عملیات i/o محسوب میشن. بعبارتی همشون یکم زمان نیاز دارن و ممکنه جوابش همون لحظه آماده نباشه. و از طرفی نمیدونیم چقدر زمان لازمه که جوابش حاضر بشه ممکنه یه ثانیه ممکن 5 ثانیه یا یک دقیقه ... خوب بنظرتون چطور این موضوع رو باید سمت خودمون مدیریت کنیم بیایین با مثال بیشتر بررسی کنیم فرض کنید که عملیاتی داریم که دو ثانیه طول میکشه اجرا بشه از تابع setTimeout کمک میگیریم تا این تابع رو بنویسیم این تابع قراره بره و از دیتابیس عنوان یک پست رو برامون بیاره تا به کاربر نشون بدیم. const getBlogPost = () => { setTimeout(() => { return { title: 'JavaScript Callbacks' } }, 2000); }; const blogpost = getBlogPost(); console.log(blogpost.title); قبل اینکه پایین تر برین بنظرتون چه اتفاقی میفته خروجی چی میشه ؟؟خوب این خروجی تکه کد بالاس : express-rest $node index.js C:nodeexpress-restindex.js:21 console.log(blogpost.title); ^ TypeError: Cannot read property 'title' of undefined at Object. (C:nodeexpress-restindex.js:21:22) at Module._compile (module.js:643:30) at Object.Module._extensions..js (module.js:654:10) at Module.load (module.js:556:32) at tryModuleLoad (module.js:499:12) at Function.Module._load (module.js:491:3) at Function.Module.runMain (module.js:684:10) at startup (bootstrap_node.js:187:16) at bootstrap_node.js:608:3خوب خروجی داره میگه نمیتونه title رو بخونه در واقع میگه اون undefined هست؟ علتش چیه ؟؟ یه مفهموم دیگه رو در اینجا لازمه بررسی کنیم، جاوا اسکریپت برای عملیات غیرهمزمان صبر نمیکنه تا کامل شن و جلو میره و بقیه کد ها رو به ترتیب از بالا به پایین اجرا میکنه . در واقع خط کد هایی رو اجرا میکنه که موجب توقف برنامه نمیشن. بعبارتی جاوا اسکریپ یک زبان no blocking هست. (بر خلاف زبانی های مثه java یا .net) اینجا تو این مثال تابع getBlogPost() فورا اجرا میشه و 2 ثانیه منتظرش نمیمونه و مقدار blogpost رو میزاره undefined و به همین خاطر خروجی با خطا مواجع میشه. خوب چطور اینو مدیریت کنیم ؟ این دلیلی هست که از callback باید استفاده کنیم. کاربرد Callbackها در جاوا اسکریپت؟توابع Callback در واقع توابعی هستند که می تونن بعنوان پارامتر یه تابع دیگه پاس داده بشن. معمولا معروف به high-order functions هم شناخته می شن که در واقع داخل اون تابعی که فراخوانی شده call میشن. معمولا هم زمانی استفاده میشن که نیازه به عملیات i/o داشته باشید. حالا سعی میکنیم مثال بالا و مشکلی که بالا ایجاد شد رو با callback حل کنیم. به نحوه نوشتن تابع دقت کنید.const getBlogPost = (callbackfunc) => { setTimeout(() => { callbackfunc({ title: 'JavaScript Callbacks' }); }, 2000); }; getBlogPost((blogpost) => { console.log(blogpost.title); })خروجی : خوب خروجی همون چیزی که انتظار داشتیم بعد از 2 ثانیه title نمایش داده میشه. اگر به نحوی تعریف تابع نگاه کنید میبیند که چاپ title بعنوان یه تابع تعریف شده که بعنوان پارامتر یا همون callback به تابع getBlogPost ارسال میشه، بنابراین به محض اینکه 2 ثانیه تموم شد این تابع call میشه . به همین سادگی، به همین ...این مقاله ادامه داره و در بخش بعدی میخوام سراغ اینکه چرا به promise نیاز داریم بپردازم خوشحال میشم با نظرتون در ادامه همراهیم کنید. این نوشته رو از مقاله پایین براتون خلاصه و ترجمه کردم اگر مثال بیشتر میخواهین تا این موضوع کاملا واستون جا بیفته توصیه میکنم مقالات دیگه ای که لینک کردم رو نگاه کنید. سپاس حمید شجاعhttps://vegibit.com/javascript-callbacks-vs-promises-vs-async-await/https://www.freecodecamp.org/news/node-js-what-when-where-why-how-ab8424886e2/#:~:text=Blocking%20refers%20to%20operations%20that,a%20non%2DJavaScript%20operation%20completes.https://nodejs.org/en/docs/guides/blocking-vs-non-blocking/https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced Hamid Shoja Hamid Shoja Wed, 13 Jan 2021 10:22:49 +0330