https://virgool.io/feed/@Mohammadizanloo55 fa 2026-04-15 07:26:02 https://files.virgool.io/upload/users/70083/avatar/hRgYoI.png?height=120&width=120 https://virgool.io/@Mohammadizanloo55 https://virgool.io/@Mohammadizanloo55/containerpresentational-%D9%BE%D8%AA%D8%B1%D9%86-%D8%AF%D8%B1-react-pgolpl8nlbaq مقدمه سلام امروز میخوام شمارو با یک دیزاین پترن دیگه به اسم Container/Presentational آشنا کنم که این دیزاین پترن به ما کمک میکنه تا به بتونیم view برنامه خودمون رو از logic اون جدا کنیمچطوری؟فرض کنید ما داخل برناممون میخواییم یه سری عکس نشون بدیم که این عکس ها به صورت داینامیک از سمت سرور باید دریافت بشن برای ساخت چنین چیزی میاییم و دوتا کامپوننت ایجاد میکنیم Presentational Components ( کامپوننت ارائه دهنده) : وظیفه این کامپوننت اینه که کنترل کنه دیتاهامون چجوری نمایش بشن که توی مثالی که داریم داره عکس هارو نمایش میده Container Components ( کامپوننت نگه دارنده) : وظیفه این کامپوننت اینه که دیتا رو از سمت سرور دریافت کنه ، اگه تغییری نیاز داره اون رو تغییر بده و به طور کلی data manipulation انجام بده.Presentational Components ( کامپوننت ارائه دهنده) این کامپوننت اطلاعاتی که نیاز داره رو از طریق props هاش دریافت میکنه. عملکرد این کامپوننت فقط و فقط نشون دادن view ای از data مون هست. عملکرد این کامپوننت توی مثالی که داشتیم به شکل زیر هست :نکته : این کامپوننت ها نباید state ای که مربوط به دیتا هست رو کنترل کنند و فقط باید state ای رو داشته باشن که مربوط به ui و یا همون view هستنکته : دیتا های این کامپوننت توسط کامپوننت Container دریافت میشهContainer Components ( کامپوننت نگه دارنده) : وظیفه اصلی این کامپوننت ها دادن گرفتن دیتا از سرور و پاس دادنش به کامپوننت ارائه دهندمون هست.این کامپونت چیزی بجز کامپوننت های ارائه دهنده رو رندر نمیکنن و هیچ استایلی هم ندارنعملکرد این کامپوننت توی مثالی که داشتیم به شکل زیر هست هوک هادر خیلی از مواقع میتونیم به جای استفاده از این پترن از هوک ها استفاده کنیم تا دیگه مجبور نباشیم یک کامپوننت دیگه ایجاد کنیم که فقط وظیفه کنترل دیتا رو داشته باشه توی عکس زیر هوکی ایجاد کردیم که میتونه برای ما اطلاعات مورد نیازمون رو از سرور بگیرهمزایاهمینطور که گفته شد این پترن به ما کمک میکنه تا بتونیم منطق برنامه رو از قسمت view برنامه جدا کنیم تا کد تمیز تری داشته باشیم . همچنین استفاده از این پترن کمک میکنه تا برناممون خیلی بیشتر قابل تست باشه چون به راحتی میتونیم دیتا های مختلف رو به بخش view برناممون بدیم تا ببینیم برناممون چه واکنشی نسبت به اون دیتا ها داره و آیا تست هارو pass میکنه یا نه و دیباگ راحت تری هم داریم چون راحت میتونیم بفهمیم توی بخش view باگ وجود داره یا بخش منطق برنامهسخن پایانی مرسی که وقت گذاشتید و این مطلب رو تا اینجا خوندید :) . امیدوارم براتون مفید بوده باشهاگه متنی که نوشتم ایرادی داشت یا فکر میکنید با عوض کردن قسمتیش قابل فهم تر میشه ممنون میشم تو کامنت ها به من اعلام کنید.من برای نوشتن این متن ها اول این سایت میرم و منطق یک دیزاین پترن رو میخونم و بعد چیز هایی که فهمیدم رو برای شما مینویسم مثلا تو پست قبلی‫ راجب Prototype پترن توضیح دادم که میتونید رو لینک زیر کلیک کنید و بخونیدش https://vrgl.ir/ToM1w Mohammadizanloo Mohammadizanloo Wed, 18 Jan 2023 09:45:22 +0330 https://virgool.io/@Mohammadizanloo55/prototype-%D9%BE%D8%AA%D8%B1%D9%86-%D8%AF%D8%B1-javascript-sjtbobsuzcph سلام :) امروز اومدم تا شمارو با یک دیزاین پترن دیگه آشنا کنم به اسم Prototype که این دیزاین پترن کمک میکنه که به راحتی property آبجکت هایی که از یک نوع هستند رو به اشتراک بزاریم. و همچنین تا حدودی شمارو با prototype chain توی جاوااسکریپت آشنا میکنم که در واقع باهاش میتونین پشت صحنه خیلی از چیز ها توی جاوااسکریپت رو ببینیدما توی برنامه هامون خیلی پیش میاد که آبجکت هایی داشته باشیم که از یک نوع هستند که ما معمولا برای ایجاد چنین آبجکت هایی از قابلیت class که توی es6 اضافه شد استفاده میکنیم :فرض کنید ما میخواییم توی برناممون تعدادی سگ داشته باشیم ، برای اینکار اول یک class به اسم Dog ایجاد میکنیم و بعد از روی اون سگ های جدیدی میسازیم که فعلا سگ هایی که میسازیم فقط میتونن پارس کنن :توجه کنین که تمامی property هایی که اینجا داریم (bark و name ) به صورت اتوماتیک توسط جاوااسکریپت به prototype های کلاس Dog اضافه شدن :نکته : مقدار __proto__ داره همون خروجی prototype کلاس Dog اشاره میکنه چون از روی اون ساخته شده و از اونجا که توی جاوااسکریپت برای دسترسی به یک property از prototype chain استفاده میکنه ( یعنی هی توی prototype های آبجکتش میگرده و به لایه های پایینتر میره تا شاید اونجا یه همچین property ای تعریف شده باشه) ما میتونیم به method های کلاس Dog دسترسی داشته باشیم.وقتی ما با آبجکت هایی از یک نوع کار میکنیم prototype ها خیلی میتونن به ما کمک کنن و برای مواقعی که میخواییم به آبجکت هایی که از یک نوع هستند method یا property ای اضافه کنیم میتونن کار مارو خیلی ساده کننفرض کنید ما میخواییم به تمامی سگ هامون یک method جدید اضافه کنیم که توی اون کار جدیدی بتونن انجام بدنهمینطور که میبینین ما یک method جدید به prototype کلاس Dog اضافه کردیم تا همه شئ های جدیدی که از روی اون ساخته شدن این method بهشون اضافه بشه پس در واقع زمانی که ما داریم متد های مختلفی توی بدنه class تعریف میکنیم ما مستقیما داریم به prototype های اون ، method های جدیدی اضافه میکنیم که یکم تمیز تر از دستی مقدار دادن هست ( مثل همین متد play که دستی مقدارش رو اضافه کردیم )اما ما توی این مثالمون فقط به __proto__ شئ های جدیدی که ساختیم کار داشتیم ( که همون کلاس Dog میشه ) بیایید یک کلاس جدید بسازیم که اون ارث بری بکنه از کلاس Dog بنظرتون الان مقدار __proto__ متغیر dog1 چیه؟ بزارید تو عکس پایین ببینیم مقدارش رو :فکر میکنم الان فهمیدید جاوااسکریپت چجوری داره ارث بری هاش رو انجام میده و یه جورایی پشت صحنه اون رو تونستیم ببینیمیک راه ساده برای ارث بری کردن مستقیم از یک آبجکت دیگه استفاده از Object.create که این اجازه رو به ما میده بیایید یکم دیگه کنجکاوی کنیم بنظرتون مقدار __proto__ متغیر pet1 چیه؟ همینطور که میبینین مقدار __proto__ متغیر pet1 دقیقا برابر با متغیر dog هست حتی به صورت دستی هم میتونیم اینکار رو بکنیم سخن پایانیمرسی که وقت گذاشتید و این مطلب رو تا اینجا خوندید :) اگه میخوایید بیشتر راجب این موضوع بدونید پیشنهادم این هست که حتما این مقاله mdn رو بخونید چون خیلی کامل تر توضیح داده و به شدت مثال های زیادی داره. امیدوارم مقالم براتون مفید بوده باشهاگه متنی که نوشتم ایرادی داشت یا فکر میکنید با عوض کردن قسمتیش قابل فهم تر میشه ممنون میشم تو کامنت ها به من اعلام کنید.من برای نوشتن این متن ها اول این سایت میرم و منطق یک دیزاین پترن رو میخونم و بعد چیز هایی که فهمیدم رو برای شما مینویسم مثلا تو پست قبلی‫ راجب Provider پترن توضیح دادم که میتونید رو لینک زیر کلیک کنید و بخونیدش. https://vrgl.ir/OaIf9 Mohammadizanloo Mohammadizanloo Sat, 07 Jan 2023 09:11:04 +0330 https://virgool.io/@Mohammadizanloo55/js-provider-pattern-oc5a3r0gzsbb مقدمهسلام :) امروز اومدم که شمارو با یه دیزاین پترن دیگه به اسم Provider آشنا کنم.این پترن به شما شیوه ای راحت رو نشون میده که باهاش میتونین با استفاده از api هایی که react توی خودش جا داده دیتا رو از کامپوننت های پدر به فرزند به راحتی انتقال بدید و از props برای انتقال اون ها استفاده نکنید که بعدا به دردسر بیوفتید ( یکم جلوتر مشکل استفاده از props برای دیتا هایی که خیلی از کامپوننت ها نیاز دارنش رو نشون میدیم ) .مشکل استفاده از props ها برای اینجور دیتا ها چیه ؟فرض کنید ما دیتایی مهم رو توی کامپوننت App دریافت میکنیم که کامپوننت های ListItem و Header و Text به اون نیاز دارن . برای این که بتونیم به این کامپوننت ها دیتای مورد نیازشون رو بدیم مجبوریم هستیم طبق ساختار درختی ای که توی کامپوننت ها داریم این دیتا رو از پدر به فرزند هاش اونقدر پاس بدیم تا به اون کامپوننتی که موردنظرمون هست دیتا برسه که نتیجش یه همچین چیزی میشه :فکر کنم کم کم دارید میفهمید چه مشکلی داره درست میشه تو برناممون :) داریم یه props رو الکی به یه کامپوننت میدیم چون فقط فرزندش نیازش داره که اینکار هم برناممون رو کثیف میکنه و هم اینکه اگر فردا قرار باشه یک دیتای دیگه هم به این شکل پاس بدیم کنترل کردن data flow برنامه خیلی سخت و غیرقابل توسعه میشهراه حل چیه ؟برای حل این مشکل از Provider استفاده میکنیم که اگه از این طریق دیتاهامون رو انتقال بدیم دیگه لازم نیست کامپوننت پدر هی به بچه هاش props پاس بده برای اینکار اول یک Context ایجاد میکنیم و کامپوننت هایی که میخواییم به بچه هاشون یه دیتایی برسه رو داخل Provider اون Context میریزیم :همونطور که میبینید Provider ای که داریم یک props به اسم value میگیره که مقدار این props باید دقیقا برابر باشه با دیتایی که قراره کامپوننت های فرزند این Provider داشته باشنحالا چطوری میتونم به دیتای فرستاده شده دسترسی داشته باشم ؟برای این که توی کامپوننت هامون به مقدار این Context دسترسی داشته باشیم از هوک useContext به این شکل استفاده میکنیم :و data flow برناممون به شکل زیر میشه که انصافا از قبلی خیلی تمیزتره :)این پترن برای دیتاهای global ای که توی برنامه داریم بسیار مناسبه مثل هندل کردن تم های مختلف برای برناممون .نمونه های استفاده شده :از این پترن توی کتابخونه های زیادی استفاده میشه که اگه بخواییم یکی از اونها رو مثال بزنیم میتونیم به styled-component اشاره کنیم که برای پیاده سازی تم هاش از همین پترن استفاده کرده:توی این فایل اول میاییم یه Provider درست میکنیم به این شکل :بعد میتونیم توی فایل های مختلف دیگمون از مقدار theme به این شکل استفاده کنیم :فواید این پترن فکر میکنم لازم نیست چیزی از فوایدش بگیم و مشخص باشه که چقدر دیتا فلوی برناممون رو مرتب میکنه و به راحتی میتونیم props هامون رو از کامپوننت های پدر به فرزند پاس داد و دیگه دردسر های قبل رو نداریم.معایب این پترنیکی از بزرگترین مشکلاتی که این پترن داره این هست که اگر دیتای Provider کامپوننتی که پدر هست تغییر بکنه تمامی کامپوننت های فرزند ( حتی اونایی که اصلا از دیتای Provider استفاده نکردن و ازش روحشونم خبر نداره re-render میشن و ممکنه توی برنامه های بزرگ مشکلات performance ای برامون داشته باشن.برای همین ترجیح همیشه اینه که اگر میخوایید دیتایی رو داخل Provider بریزید سعی کنید اون دیتا انقدری مهم باشه و ارزش داشته باشه که همه ی کامپوننت های فرزند بخاطرش re-render بشن . مثلا تم یکی از همون دیتا هاست که باید تمامی کامپوننت ها re-render بشن با عوض شدنش یا اگه پروژتون خیلی زیاد از این نوع دیتا های global داره میتونید از کتابخونه هایی که برای اینکار ساخته شدن مثل redux یا jotai استفاده کنین که دیگه لازم نیست دستی اینجور مسائل رو کنترل کنیم و تا حدودی کارمون رو راحت تر کردنسخن پایانی مرسی که وقت گذاشتید و این مطلب رو تا اینجا خوندید :) . امیدوارم براتون مفید بوده باشهاگه متنی که نوشتم ایرادی داشت یا فکر میکنید با عوض کردن قسمتیش قابل فهم تر میشه ممنون میشم تو کامنت ها به من اعلام کنید.من برای نوشتن این متن ها اول این سایت میرم و منطق یک دیزاین پترن رو میخونم و بعد چیز هایی که فهمیدم رو برای شما مینویسم مثلا تو پست قبلی‫ راجب Proxy پترن توضیح دادم که میتونید رو لینک زیر کلیک کنید و بخونیدش https://virgool.io/Solidity/js-proxy-pattern-hvcccz4rvush Mohammadizanloo Mohammadizanloo Sat, 31 Dec 2022 19:06:24 +0330 https://virgool.io/Solidity/js-proxy-pattern-hvcccz4rvush ‫ Proxy پترنتوضیحات اولیهسلام امروز اومدم که شما رو با یک دیزاین پترن دیگه آشنا کنم به ‫اسم Proxyشاید اسمش واستون عجیب باشه و بگید پروکسی؟ پروکسی مگه واسه رد شدن از فیلترینگ و این داستانا نبود؟برای این که بفهمید دقیقا منطق این دیزاین پترن چیه و منظورش رو خوب متوجه بشید اول باید بدونید که پروکسی هایی که استفاده میکنیم برای فیلترینگ چطوری کار میکننپروکسی ها چطوری کار میکنن؟پروکسی ها توی دنیای شبکه بین ما و لینکی که بهش درخواست میزنیم هستن و هر اطلاعاتی که ما میخواییم از لینک بگیریم یا اطلاعاتی رو که میخواییم اطلاعاتی رو ارسال کنیم به لینک رو ابتدا به پروکسی میدیم بعد پروکسی میره درخواستمون رو میده به اون لینک و اگه باز درخواستمون پاسخی داشت پاسخ درخواستمون برمیگرده به سمت پروکسیمون و پروکسی درخواستمون رو برمیگردونه به ماخیلی خلاصه بخوام بگم انگار ما با احمد قهریم و هر حرفی که میخواییم به احمد بگیم رو به رضا میگیم و رضا میره به احمد میگه و باز اگه احمد حرفی داشت با ما به رضا میگه تا رضا به ما برسونه پیامواگه بازم نفهمیدید که پروکسی ها چیکار میکنن عیبی نداره این عکس رو ببینید کامل متوجه میشید:کاری که پروکسی ها میکنن به روایت تصویرخوب حالا که فهمیدید پروکسی دقیقا چیکار میکنه بریم که بفهمیم دقیقا این پترن چیه.منطق کلی این پترن چیهمنطق کلی این پترن میگه که ما برای تعامل هایی که داریم با آبجکت ها باید از یک واسطه استفاده کنیم و توی اون واسطه یک سری کنترل رو انجام بدیم و بعد تغییرات رو به آبجکت اصلی انتقال بدیم یا اگه میخواستیم مقداری رو از آبجکت دریافت کنیم از آبجکت اصلیمون نگیریم و از آبجکت واسطه بگیریمچطوری باید یک واسطه ایجاد کنیم؟‫توی اکما اسکریپت 6 یک کلاس خیلی خوب اضافه شد به جاوااسکریپت به اسم Proxy که نحوه کار کردن باهاش این شکلیه :نحوه ساختن یک آبجکت واسطه در جاوااسکریپتاز این به بعد برای گرفتن کار کردن با آبجکت‫ person نباید با خود آبجکت person کاری انجام بدیم و فقط باید با آبجکت واسطه که personProxy هست کار کنیم.خوب این چه سودی داره واسمون؟‫عجله نکنید :) هنوز نگفتم چه جادو هایی میتونید با این آبجکت واسطه بکنید.‫کلاس Proxy ما تو ورودی ( آرگومان ) دومش یک آبجکت میگیره که همه اتفاقات خوب اینجا اتفاق میوفته :)ما توی آرگومان دوم کلاس‫ Proxy میتونیم یک آبجکت بسازیم و توش یک سری متد بنویسیم که هر کدومشون یک وظیفه داشته باشن و قبل از انجام شدن اون تعاملات روی آبجکت واسطمون وارد اون متد ها بشن تا بشه عملیات هایی رو مثلا زمان آپدیت کردن یک پراپرتی انجام دادمثلا بگیم هر زمان که میخواست پراپرتی ای از آبجکت واسطمون آپدیت بشه برسی کنیم و بگیم اگه مقدار جدیدش عدد بود فقط آبجکتمون اصلیمون آپدیت بشه و در غیر این صورت آبجکت اصلی هیچ تغییری نکنهخیلی خفنه نه؟ بریم پیاده سازیش کنیماین آبجکت کنترل کننده رو چطوری باید بنویسیم حالا؟ما توی آبجکت کنترل کنندمون متد های زیادی داریم که من قصد دارم دوتاشون رو توضیح بدم ولی همشون رو نمیشه تو این مقاله اورد ولی اگه کنجکاو بودید راجبشون اینجا رو بخونیدمتد get: زمانی اجرا میشه که ما میخواییم مقداری رو از آبجکت واسطه دریافت کنیممتد set: زمانی اجرا میشه که ما بخواییم مقدار یکی از پراپرتی های آبجکت واسطه رو تغییر بدیمبریم که یک مثال ببینیم حالاپیاده سازی متد های get و set برای آبجکت کنترل کنندهتوضیحات کد بالا:‫متد get : اگه پراپرتی ای داشت از آبجکت واسطه دریافت میشد این متد اجرا میشه و تو ورودی اول obj رو به عنوان ورودی میگیره که کل آبجکت person هست و تو ورودی دوم prop رو میگیره که اسم پراپرتی ای هست که گرفته شده و توی متد هم یک console.logگذاشتیم که چاپ میکنه متنی که لاین بعدیش بصورت کامنت وجود داره‫متد set : اگه پراپرتی ای داشت مقدارش آپدیت میشد این متد اجرا میشه و تو ورودی اول obj رو میگیره که کل آبجکت person هست و تو ورودی دوم prop رو میگیره که اسم پراپرتی ای هست که میخواد آپدیت بشه و تو ورودی سوم value رو میگیره که مقداری جدیدی هست که برای اون پراپرتی فرستادم و توی متد هم یک console.logگذاشتیم که چاپ میکنه چیزی که لاین بعدیش بصورت کامنت وجود داره بعد میاد مقدار آبجکتمون رو آپدیت میکنهنکته : اگر در‫ strict mode باشیم و در متد set خودمان false را ریترن کنیم به ارور میخوریم در نتیجه بهتر است اگر مشکلی وجود دارد false را ریترن کنیم و در غیر این صورت true را ریترن کنیماگه نتونستید نحوه ای که آبجکت واسطمون داره کار میکنه رو نفهمیدید گیف زیر رو ببینید تا کامل متوجه شید چه اتفاقی داره میوفتهنحوه کار کردن این دو متددر واقع ما با آبجکت ‫person هیچ کاری نداشتیم اما personProxy ما داره خودش با آبجکت ‫person ارتباط برقرار میکنهبیایید ‫بهتر proxy هارو بنویسیم!‫تو متد های set و get ای که توی آبجکت کنترل کنندمون داشتیم دیدید که ما برای دسترسی به آبجکت personداشتیم از آرگومان اول متد استفاده میکردیم و مقدار رو با همون از آبجکت person تغییر میدادیم یا میگرفتیمش اما راه حل ساده تر چیه؟اینه که به جای‫ نوشتن کد [prop]obj از یک چیز دیگه استفاده کنیم به اسم Reflect این آبجکت که بصورت گلوبال توی جاوااسکریپت تعریف شده یک سری ورودی از ما میگیره و این کار هارو خودش انجام میدهچطوری؟ بریم ببینیم!Reflect نحوه پیاده سازیپروکسی ها کجا به درد ما میخورن؟‫همونطور که مشخصه پروکسی ها به درد تایید سنجی (validation) خیلی میخورن یا وقتی میخواییم اطلاعات یک آبجکت رو آپدیت کنیم یه تغییری تو دیتای ورودی ایجاد کنیم میتونیم از پروکسی ها استفاده کنیممشکلات این دیزاین پترناین دیزاین پترن از اونجایی که برای هربار تعامل با آبجکت یکی از متد های کنترل کننده مارو اجرا میکنن به راحتی میتونن تو پرفورمنس ما تاثیر بدی بزارن و باعث بشن برنامه ما کند اجرا بشه‫ برای همون باید مواظب باشیم که کجا ازش استفاده کنیم.صحبت های پایانیممنونم از اینکه وقت با ارزشتون رو گذاشتید و مقاله من رو خوندید امیدوارم واستون مفید بوده باشه و چیزی به دانشتون اضافه کرده باشهاگه متنی که نوشتم ایرادی داشت یا فکر میکنید با عوض کردن قسمتیش قابل فهم تر میشه ممنون میشم تو کامنت ها به من اعلام کنیدمن برای نوشتن این متن ها اول این سایت میرم و منطق یک دیزاین پترن رو میخونم و بعد چیز هایی که فهمیدم رو برای شما مینویسم مثلا تو پست قبلی‫ راجب Singleton پترن توضیح دادم که میتونید رو لینک زیر کلیک کنید و بخونیدش https://virgool.io/@Mohammadizanloo55/js-singleton-pattern-gh6hokwxuvjj Mohammadizanloo Mohammadizanloo Mon, 28 Feb 2022 22:00:19 +0330 https://virgool.io/Solidity/js-singleton-pattern-gh6hokwxuvjj Singleton پترنسلام امروز اومدم که واستون یک دیزاین پترن رو توضیح بدم که اسم این دیزاین پترن Singleton هستمنطق کلی این دیزاین پترن میگه که ما باید class هایی داشته باشیم که فقط یکبار ازشون یک شی ایجاد کنیم و از این به بعد از اون بتونیم از اون شی ایجاد شده یکسره استفاده کنیم و دیگه شی جدیدی از کلاس نسازیم.حالا که منطق کلیش رو فهمیدیم بریم که با یک مثال قشنگ درک کنیمش ( اگه منطق کلیش رو هم نفهمیدید مشکلی نیست مثال رو ببینید کاملا میفهمید منظورم چیه :)) )اجزای کد ما :یک متغیر counter که توش مقدار شمارنده مون رو ذخیره میکنیم یک متدgetInstanceکه class ای که داریم رو return میکنهیک متد‫getCountکه مقدار فعلی متغیر counter رو return میکنهیک متد increment که مقدار متغیرcounterرو افزایش میدهیک متد decrement که مقدار متغیر counter رو کاهش میدهکلاس Counter ماحتما براتون این سوال پیش میاد که خوب این که یک کلاس سادست! بله کاملا دارید درست میگید این کلاس ما هنوز معیار های دیزاین پترن Singleton رو نداره! چرا معیارش رو نداره؟ الان توضیح میدم :)از یک کلاس Singleton فقط و فقط باید بشه یک شی ساخت و سری های بعدی باید از همون شی استفاده کرد اما از این کلاس ما میشه تا دلمون میخواد شی بسازیم :))Counter ساختن شی های مختلف از کلاسشاید بپرسید اون console.log ته کد چیه که با هم مقایسشون کردی؟ نکته اینه که وقتی کلاسمون Singleton باشه خروجی های متد getInstance اش با هم برابرند چون به یک کلاس اشاره میکنند اما اینجا چون هنوز کلاسمون Singleton نیست مقدارهاشون برابر نیستندCounter درست شدن دو شی مختلف از کلاسخوب حالا چطوری اینو بیاییم Singleton کنیمش؟رسیدیم به جای قشنگش :) بهترین راه برای اینکه مطمئن بشیم که فقط و فقط یک شی از این کلاسمون درست میشه اینه که یک متغیر بسازیم به اسم ‫instance و توی متد constructor کلاس Counter مون برای اولین باری که شی میخواد ساخته بشه کلاس رو تو متغیر instance بریزیم و در سری های بعدی ایجاد شدن شی مقدار متغیر instance رو چک کنیم و اگه مقدار متغیر خالی نبود ارور بدیم و بگیم فقط یکبار میشه از این کلاس شی ساختتوضیحش سخت بود و متوجه نشدید؟ بریم که یک مثال بزنم تا قشنگ درکش کنید :)کلاس Counter ما که singleton شدهو تماممممم :)) بلاخره تونستیم Singleton اش کنیمالان اگه دوبار از کلاسمان شی بسازیم برنامه ارور میدهحالا بیاییم این کلاسمون رو بریزیم تو یه فایل به اسم از فایل counter.js و بعد export کنیمش اما یه نکته ریزی رو باید اینجا رعایت کنیم که شی ساخته شده رو بریزیم داخل Object.freeze که مقداری از آبجکتی که داریم قابل تغییر نباشه و به نوعی آبجکتمون یخ بزنه :))) آبجکتی که داریم رو فریز کردیمش :)حالا بیاییم یه برنامه خیلی ساده با این پترن بسازیم که ببینیم چه شکلی میشه برناممون‫فایل counter.js که توی خودش کلاس Counter رو داره و در نهایت فریز شده اون رو export کردیمفایل index.js که توی خودش ایمپورت میکنه فایل redButton.js و فایل blueButton.js روفایل redButton.js که توی خودش import کرده فایل counter.js رو و یک button داره که رنگش قرمزه و روی اون یک event کلیک ست شده که متدincrement رو صدا میزنه و بعدش متد getCount رو صدا میزنه و مقدار برگشتی اون رو console.log میکنه‫فایلblueButton.js دقیقا همان کار فایل redButton.js رو میکنه ولی رنگش آبیه :))) (عجب تفاوت بزرگی)نکته ای که اینجا باید خیلی حواسمون باشه اینه که هر دو دکمه redButton و blueButton از یک instance استفاده میکنن که از counter.jsاومدهطوری که button هامون دارن از کلاس Counter استفاده میکننوقتی ما متد ‫increment رو در زمان کلیک redButton یا blueButton صدا میزنیم مقدار متغیر counter تو هر دوتا فایل فرق میکنه چون از این کلاس یک شی مشترک ساخته بودیماما استفاده از هر چیزی یه سری معایب هم داره که باید اون هارو هم دونست و بعد از اون چیز استفاده کرد پس بریم تا ببینیم معایب این کار چیهنیازی به class نداریم !یکی از خوبی هایی که ما توی این پترن داریم اینه که این پترن باعث میشه که تو استفاده از رممون صرفه جویی داشته باشیم چون دیگه هی لازم نیست شی های مختلف از یک کلاس بسازیم. لابد الان میگید که خوب این که همش فایده بود که ضررش کو؟. الان میگم ضررش کجاست :تو زبون های دیگه ای مثل Java و ++‫c این امکان وجود نداره که به صورت مستقیم ما یک آبجکت بسازیم و ازش استفاده کنیم اما توی js این امکان وجود داره و ما میتونیم خیلی کدمون رو ساده تر و راحت تر بنویسیمش بدون داشتن متغیر instance الان حتما مثل خودم هیجان زده اید که یعنی چطوری میشه اینکارو کرد؟ بریم که مثال رو ببینیم با هم:اجزای کد :متغیر count که توش مقدار شمارنده مون رو ذخیره میکنیم متدincrement که توش مقدار متغیر count رو یک واحد اضافه میکنیممتد decrement که توش مقدار متغیر count رو یکم واحد کم میکنیممتد getCount که توش مقدار متغیر count رو ریترن میکنیمنوشتن یک آبجکت ساده که دقیقا چیزی که ما میخواییم رو داره مشکل داشتن تو تست نویسیاگه تو برنامتون تست داشته باشید و بخوایید این class رو واسش تست بنویسید باید حواستون باشه که بخاطر تعداد صدا زدن متد های مختلف یا بهم خوردن ترتیب صدا زدنشون مقدار تست های پایینی هم ممکنه چیزی که میخوایید نباشه و این شکلی میشه که همه تست هاتون fail میشه در صورتی که class تون داره درست کار میکنه :))) نمونه یک تست نوشته شدهمعلوم نبودن مقدار فعلیاز اونجایی که این مقدار ما داره تو کل برناممون استفاده میشه ممکنه ما از این کلاس توی جایی استفاده کنیم و انتظار داشته باشیم که مقدارش مثلا 0 باشه اما یهو میبینیم چون تو یه کامپوننت دیگه مقدارش زیاد شده مقدار اولیه اش 4 هست و باعث میشه باگ های عجیب و غریب تو برنامه درست بشهجمع بندی کلی :در کل ایده داشتن متغیر هایی بصورت گلوبال ایده خوبی نیست چون میتونه اتفاقات غیر منتظره ای رو تو برنامه ما ایجاد بکنه مخصوصا تو es6 و این داستانا که let و const اومدن باعث شدن که دولپر ها تا حد ممکن متغیر هایی رو داشته باشن تو برنامه هاشون که پایبند یک scope باشه. اما بازم با سیستم ماژول بندی js میشه تا حدی از این اتفاقات غیر منتظره جلوگیری کرد.مهم ترین چیز تو استفاده از این پترن ترتیبیه که دارید از این کلاس ها میکنید باید سعی کنید تا حد ممکن بصورت تصادفی داده هارو عوض نکنید و اون هارو زمانی استفاده کنید که هنوز داده ای برای مصرف وجود نداره (منظورم موقع ایجاد شدن یک کامپوننت و یا اتصال و گرفتن دیتا از دیتابیس و ایناست)تو React ما اغلب به جای استفاده از کلاس های Singleton از ابزارهای State management مثل Redux یا React Context استفاده میکنیم. اگرچه گلوبال بودن اونها ممکنه شبیه به کلاس های Singleton باشه اما این ابزارها به جای حالت قابل تغییر دادن دیتا تو Singleton فقط امکان خوندن دیتا ها را ارائه میدن مثلا وقتی که داریم از Redux استفاده میکنیم تنها فانکشن های reducer که هیچ side effect ای ندارن استیت رو آپدیت میکنن.ممنون که وقتتون رو گذاشتید و این مقاله رو خوندید من این مقاله رو این شکلی نوشتم که اول این سایت رو خوندم و هرچی که فهمیدم رو براتون نوشتم و قراره مقاله های دیگه این وبسایت رو هم همین کار بکنم و واستون بزارمشون.اگر اشکالی دیدید یا انتقادی داشتید ازم ممنون میشم تو کامنت ها بگیدش Mohammadizanloo Mohammadizanloo Fri, 25 Feb 2022 07:14:02 +0330 https://virgool.io/@Mohammadizanloo55/chrome-extension-ag5t1li6a1gw یکی از مشکلاتی که ما همیشه داشتیم سر و کله زدن با سایت های فیلترشده ای بوده که اصلا نمیدونیم به چه علت فیلتر شدن! فقط میدونیم که فیلتر شکن نیازه :/ یا یکی دیگه از مشکلات ما این بوده که وقتی وارد سایتی مثل یوتیوب میشیم انقد تبلیغ میده به ما که واقعا مارو بیزار میکنه از هرچی یوتیوبه برای یه همچین وقتایی اکستنشن های کروم وارد میدون میشن و خودی نشون میدن :)راه نصب کردن این اکستنشن ها خیلی خیلی اسونه ولی خوب بازم من عکسشو براتون میزارم که راحت باشیدروی گزینه افزودن به chrome کلیک میکنیم :یه تاییده میاد براتون که گزینه اد اکستنشن رو میزنید به همین سادگی و خوشمزگی :) خوب بریم برای معرفی اکستنشن ها اگه میخوایید که خیلی سریع وارد منوی جیمیلتون شین و مدیریت کنیدشون از این اکستنشن استفاده کنید Google Mail Checkerاگه مثل من شدیدا طرفدار تم دارک هستین و کلا با تم لایت مشکل دارین ازین اکستنشن استفاده کنیدDark Readerبرای رد کردن تبلیغ های یوتیوب از این دوتا اکستنشن استفاده کنین مسدود کننده تبلیغاتی برای یوتیوب™ مسدودساز تبلیغ AdGuard اگه خیلی به امنیت حساباتون اهمیت میدید و میخوایید که جای خوبی برای نگهداری پسورد هاتون و برای اکانت هاتون پسورد خیلی امنی داشته باشیدlastpass چندتا از فیلترشکن هایی که من خودم استفاده میکنم و راضیم Hoxx VPN Proxy Stay secure with CyberGhost VPN Free Proxyهرچند الان با رمز پویا تقریبا فیشینگ غیرممکن شده ولی اگه خواستید از امنیت یک درگاه پرداخت مطمن بشید ضد فیشینگ درگاه‌های بانکیاگه شما هم مثل من زبان انگلیسی ضعیفی دارید و نیاز دارید به گوگل ترنسلیت مترجم Google‬ امیدوارم از خوندن این مطب چیزی دستگیرتون شده باشه و دست خالی نرفته باشید خلاصه که کروم رو دست کم نگیرید :) Mohammadizanloo Mohammadizanloo Tue, 28 Apr 2020 12:46:56 +0430