https://virgool.io/feed/@alisafari Senior Front-End Developer fa 2026-06-07 08:53:59 https://files.virgool.io/upload/users/7226/avatar/LJylj8.png?height=120&width=120 https://virgool.io/@alisafari https://virgool.io/@alisafari/%DA%AF%D8%B3%D8%AA%D8%B1%D8%B4-%D8%B1%D9%88%DB%8C%D8%AF%D8%A7%D8%AF-%DB%8C%D8%A7-event-propagation-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%D9%86%DA%A9%D8%A7%D8%AA%DB%8C-%DA%A9%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85-zeno3osoo6ci گسترش رویداد یا Event Propagation چیه؟خب اینجوری باید توضیح بدم که شما وقتی یک div دارید که توی اون یک button هست و روی button یک رویداد کلیک مینویسید، وقتی کاربر روی این button کلیک میکنه در واقع این رویداد فقط روی button انجام نمیشه و ممکنه یکسری اِلمان دیگر (مثلا همون div پدر) رو هم تحت تاثیر قرار بده. به این کار میگن گسترش رویداد یا Event Propagation.انواع Event Propagationما کلا دو نوع گسترش رویداد یا Event Propagation داریم رویداد حبابی یا Event Bubbling و رویداد گرفتنی یا Event Capturingرویداد حبابی یا Event Bubbling چیه؟اگر به فارسی معنیش کنیم میشه رویداد حباب یا حبابی، همین نشون میده کارش چیه، یعنی چی؟یعنی اینکه وقتی شما روی یک اِلمان که داخل یک المان دیگر هست کلیک میکنید این رویداد از داخل به خارج منتشر میشه یعنی از خودش شروع میکنه تا به والد یا پدرش برسه که مثل یک حبابه (وقتی حباب ایجاد میشه اول کوچیکه بعد رفته از درون بزرگ میشه) به طور مثال اول کلیک خودش رو صدا میزنه بعد شروع میکنه کلیک والد رو صدا زدن.رویداد حبابی یا Event Bubbling در کدفرض کنید که این کد رو توی فایل html داریماتفاقی که میافته اینه که با کلیک روی button اول alert باتن اتفاق میافته بد alert که روی کلیک div نوشتیم. این میشه Event Bubbling.رویداد گرفتنی یا Event Capturingاین رویداد رو هم اگر به فارسی برگردونم میشه رویداد گرفتن یا گرفتنی (خیلی توی فارسی خوب نمیشه برعکس Event Bubbling)، خب یعنی چی، چیکار میکنه، اگر توی مثال قبل یک پارامتر true به فانکشن addEventListner بدیم میشه Event Capturing، درواقع Event Capturing برعکس Event Bubling میشه یعنی به جای انتشار از داخل از پدر یا والد به فرزند میرسه. به مثالی که در ادامه میزنم توجه کنید تا بگم چجوری عمل میکنه...قطعه کد زیر رو داخل فایل html بنویسیدحالا خروجی کد وقتی روی button کلیک کنیم میشه:اول alert اِلمان div اتفاق میافته بد alert خود button که روش کلیک کردیم، یعنی در واقع وقتی روی فرزند که button باشه کلیک کردیم event پدر صدا زده شد. برای جلوگیری از این رویداد ها هم در ادامه توضیح میدم که باید چه کرد.جلوگیر از انتشار رویداد هاخب تا اینجا فهمیدیم که چه اتفاق هایی میافته و شاید بیشترمون این مشکل رو با Event Bubbling داشتیم.یعنی روی یک اِلمان فرزند که کلیک میکردیم میرفت رویداد پدر رو هم صدا میزد. بعد میرفتیم سرچ میکردیم و با یک خط کد از وقوع اون جلوگیری میکردیم. مثلا اگر یه درخت (Tree) داشتیم که روی فرزنداش کلیک میکردیم، پدرش هم کلیک میشد. (چقدر توضیح دادم).بعد از اینکه سرچ میکردیم عموما میرسیدیم به دوتا فانکشن، یکی ()event.preventDefault و دیگری ()event.stopPropagationالبته هر کدوم یه کاری رو انجام میدن که در ادامه براتون کامل توضیح میدم.متد ()event.preventDefaultوقتی از این فانکش استفاده کنیم مانع از عمل کردن ذاتی اون اِلمان یا اِلمنت میشم، مثلا اگر روی submit یک فرم بذاریم باعث میشه اون فرم کار نکنه یا وقتی روی keydown یک اینپوت بذاریم اون رویداد دیگه کار نمیکنه.کد بالا به شما یه event رو لاگ میده اما هیچ کاراکتری توی input تایپ یا چاپ نمیشه.پروپرتی event.defaultPreventedاگر بخواهیم ببینم که ()event.preventDefault روی یک اِلمان اتفاق افتاده با پروپرتی event.defaultPrevented میتونیم متوجه بشیم. یک مقدار boolean برمیگردونه.متد ()event.stopPropagationاگر از این فانکشن استفاده کنیم باعث میشه Event Propagation دیگه اتفاق نیافته، یعنی تاثیرش رو روی بقیه المان ها نمیذاره، مثلا اگر داشته باشیم.خب وقتی از این فانکشن بعد از alert استفاده کنیم باعث میشه دیگه alert پدر یا همون div اتفاق نیافته.متد ()event.stopImmediatePropagationخب تفاوت این متد با متد event.stopPropagation() این هست که این متد علاوه بر اینکه از اجرای رویداد پدر جلوگیری میکنه بلکه از اجرای رویداد های مشابه اون اِلمان هم جلوگیری میکنه، خب این یعنی چی؟ یعنی اگر دو جا برای button رویداد click رو نوشتید اون موقع از رخ دادن بقیه رویداد های مشابه (click) هم جلو گیری میکنه. مثلا توی مثال زیر دیگه alert مربوط به کلیک !button clicked again اجرا نمیشه.Event Propagation× علی صفری علی صفری Sat, 19 Feb 2022 03:09:15 +0330 https://virgool.io/Solidity/%D9%86%D9%88%D8%AF-%D8%AC%DB%8C-%D8%A7%D8%B3-nodejs-%D9%88-%D8%AA%D9%85-%DA%86%DB%8C%D8%B2%D9%87%D8%A7%DB%8C%DB%8C-%DA%A9%D9%87-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%AF%D8%B1-%D9%85%D9%88%D8%B1%D8%AF%D8%B4-%D8%A8%D8%AF%D9%88%D9%86%DB%8C%D9%85-espj0vgmlzhq کمی درباره NodeJSخیلی قبل از اینکه NodeJS معرفی بشه، تقریبا همه توسعه دهنده های وب از جاوااسکریپت به عنوان یک زبان اسکریپتی برای توسعه و پویاسازی صفحات وب ازش استفاده میکردند. خیلی هم محبوب بود و کتابخانه جی کوئری هم تونسته بود کار ما رو برای پیاده سازی صفحات وب راحت تر کنه. ولی شخصی به نام Ryan Dahl در سال 2009 نود جی اس رو معرفی کرد که بگه جاوااسکریپت قدرتمند تر از این حرفاست که فقط سمت کلاینت اجرا بشه. یعنی چی؟ یعنی تا قبل از نودجی اس شما برای اجرا جاوااسکریپت نیاز داشتید که یک مرورگر داشته باشید. ولی الان نود جی اس یک پلتفرمه که با استفاده از موتور V8 گوگل میتونه جاوا اسکریپت روسمت سرور اجرا کنه.سمت سرور چه کارهایی میشه کرد؟مثلا قبل از نود جی اس، اگر شما جاوااسکریپت بلد بودید میتونستید یک وب اپلیکیشن رو برای خودتون طراحی کنید، ولی برای قسمت Back-End اون نیاز داشتید که یک برنامه نویس جاوا یا دات نت یا پی اچ پی یا کلا کسی که زبان برنامه نویسی بلد باشه که بتونه سمت سرور کد بنویسه رو پیدا کنید که نیاز های شما مثل نوشتن API و کار با دیتابیس و احراز هویت و ... رو انجام بده.اما الان با NodeJs و همون جاوااسکریپتی که بلدید میتونید خیلی راحت تمامی کار های بالا و بیشتر از اون (میکروسرویس ها که خیلی پیاده سازی سریع و اجرا با سرعت بالایی دارند توی نود جی اس) رو خودتون انجام بدید.نود جی اس (NodeJS) بازدهی بالایی داره!نود جی ای در کنار موتور V8 از زبان ++C استفاده کرده و باعث شده سرعت بسیار بالایی داشته باشه.نودی جی اس و موتور V8 به صورت منظم آپدیت میشن و با آخرین قابلیت های جاوا اسکریپت خودشون رو بروز میکنند.یکی از دلایلی که میتونه توی سرعت و بازدهی بالا هم میتونه تاثیر داشته باشه روش انتفال فایل JSON هست که بسیار سریعه.نود جی اس (NodeJS) کراس پلتفرمیکی از آرزوها و هدف های شرکت های بزرگ اینه که بتونند با نوشتن یک کد چند خروجی بگیرند. مثلا با یک زبان برنامه نویسی یک پروژه بنویسن و بتونن روی همه سیستم عامل ها اجراش کنند. به این میگن کراس پلتفرم (Cross-Platform).خبر خوب اینه که نود جی اس کراس پلفترمه. یعنی شما مثلا با ابزاری مثل Electron.js میتونید برنامه هایی بنویسید که روی سیستم عامل های لینوکس، ویندوز و مک اجرا بشه.نود جی اس (NodeJS) چه کارهایی میتونه بکنه؟نرم‌افزارهای محدوده I/O (ورودی و خروجی)نرم‌افزارهای جریان داده‌ای (Data Streaming)داده‌های نرم‌افزارهای بلادرنگ (Real-Time-App)برنامه‌های مبتنی بر JSON APIبرنامه‌های تک صفحه‌ای SPAچند شرکت بزرگ که از نود جی اس استفاده میکنند. علی صفری علی صفری Fri, 18 Feb 2022 22:37:08 +0330 https://virgool.io/@alisafari/%D9%82%D8%A7%D8%A8%D9%84%DB%8C%D8%AA-destructuring-assignment-%DA%86%DB%8C%D8%B3%D8%AA-%D9%88-%DA%86%D8%B1%D8%A7-%D8%A8%D8%A7%DB%8C%D8%AF-%D8%A7%D8%B2-%D8%A7%D9%88%D9%86-%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87-%DA%A9%D9%86%DB%8C%D9%85-xakjypst2ff0 چرا باید از Destructuring assignment استفاده کنیم؟حجم کد هامون رو پایین میاره و باعث میشه خوانایی کد بالابره در نتیجه میتونه از بروز خطاهای سهوی تا حد زیادی جلوگیری کنه.قابلیت Destructuring assignment این امکان رو به ما میده که بتونیم از داخل یک آرایه یا یک آبجکت داده ها رو استخراج کنیم و تبدیلشون کنیم به دسته ای از متغیرها چون خیلی از اوقات کارمون رو راحت تر میکنند.مثلا به روش معمول اگر بخوایم مقادیر یک آرایه رو بخونیم و بهشون اسم بدیم باید به شکل زیر عمل کنیم:حالا اگر بخوایم مثال قبل رو با Destructuring assignment انجام بدیم باید به شکل زیر عمل کنیم. توی خط 2 ما گفتیم مقدار خونه صفر آرایه رو دریافت کن و اسمش رو بذار firstName و همچنین مقدار خونه 1 آرایه رو هم بگیر و اسمش رو بذار lastName و بعد هم خروجی دلخواهمون رو چاپ کن. همین :)حالا همین کار رو میشه برای آبجکت ها هم انجام داد. مثلا به صورت معمول ما میایم به این شکل به آیتم های یک آبجکت دسترسی پیدا میکنیم.مثال قبل رو میشه با استفاده از Destructuring assignment به شکل زیر انجام داد. در ادامه میگم که چجوری آبجکت تو در تو رو هم استخراج کنید.همون طور که توی خط 4 میبینید ما یک آبجکت contactInfo داریم که داخل آبجکت person هست. حالا برای اینکه بهش دسترسی داشته باشیم باید email رو از داخل contactInfo خارج کنیم (خط 8).اگر هم بخوایم مقدار پیشفرض بهشم بدیم اینجوری میشه:به این صورت اگر مقدار email خالی باشه یک مقدار پیشفرض جای اون رو میگیره. علی صفری علی صفری Fri, 18 Feb 2022 22:21:07 +0330