احتمالا تا به امروز در برنامههای جاوا اسکریپتی خود از کتابخانههای ثالث و یا توابع ویژهای برای نمایش شمسی تاریخ، نمایش فارسی اعداد، افزودن جدا کنندهی سه رقمی اعداد (جداکنندهی هزارگان)، نمایش تاریخ نسبی مانند 1 روز قبل و ... استفاده کردهاید. خبر خوب اینکه موتور جاوا اسکریپتی تمام مرورگرهای جدید (از فایرفاکس 29 و کروم 24 به بعد) به صورت توکار یک چنین تبدیلهایی را پشتیبانی میکنند و برای مثال برای تبدیل تاریخ میلادی به شمسی و نمایش آن، ...
در ادامه مطالب مربوط به برنامه نویسی تابعی، قصد دارم بیشتر وارد کد شویم
و مباحث عنوان شده را در دنیای کد پیاده سازی کنیم. هدف این قسمت، refactor کردن کد موجود
به یک معماری immutable هست. پیشتر درباره immutable ها صحبت کردیم. ابتدا برای یکسان سازی ادبیات مورد استفاده، چند کلمه را مجددا تعریف خواهیم
کرد: Immutability : عدم توانایی تغییر داده ...
پیشنیاز این مطلب مطالعه قسمت MobX میباشد. در این مثال قصد داریم یک برنامهی Todo را با استفاده از MobX و React ایجاد کنیم. ایجاد ساختار ابتدایی پروژه برای ساخت پروژه، به خط فرمان مراجعه کرده و با دستور زیر، یک پروژهی react از نوع typescript را ایجاد میکنیم. npx create-react-app todo-mobx --template typescript
cd todo-mobx برای توسعهی این مثال، از محیط توسعهی ...
روشی را که تا اینجا در مورد MobX بررسی کردیم، تا نگارش 5x آنرا پوشش میدهد. در همین زمان، کتابخانهی دیگری به نام mobx-react-lite ارائه شد که به همراه تعدادی Hook مخصوص MobX بود تا با سیستم جدید React که مبتنی بر Hooks است، سازگار شود. این امکانات در حال حاضر با خود کتابخانهی mobx-react 6x یکپارچه شده و به زودی mobx-react-lite منسوخ شده اعلام میشود. البته روش inject/observer بررسی شدهی تا نگارش 5x آن، هنوز هم برقرار است و قرار نی ...
در ادامهی سری کار با MobX، میخواهیم نکاتی را که در سه قسمت قبل مرور کردیم، در قالب یک برنامه پیاده سازی کنیم:
این برنامه از چهار کامپوننت تشکیل شدهاست:
- کامپوننت App که در برگیرندهی سه کامپوننت زیر است:
- کامپوننت BasketItemsCounter: جمع تعداد آیتمهای انتخابی توسط کاربر را نمایش میدهد؛ به همراه دکمهای برای خالی کردن لیست انتخابی.
- کامپوننت ShopItemsList: لیست محصولات موجود در فروشگا ...
تا اینجا دو مثالی را که از Mobx بررسی کردیم (مثال ورود متن و مثال کامپوننت شمارشگر)، به عمد به همراه decoratorهای @ دار آن نبودند. برای مثال در قسمت قبل ، یک کلاس را با یک خاصیت ایجاد کردیم که روش مزین سازی خاصیت value آن را با observable decorator، توسط متد decorate انجام دادیم و این هم یک روش کار با MobX است؛ بدون اینکه نیاز به تنظیمات خاصی را داشته باشد: import { decorate } from "mobx";
class Count {
value = 0;
}
...
MobX از 4 مفهوم اصلی تشکیل میشود:
- Observable state: در MobX نیز همانند Redux، کل شیء state به صورت یک شیء جاوا اسکریپتی ارائه میشود؛ با این تفاوت که در اینجا این شیء، یک Observable است که نمونهای از مفهوم آنرا در مثال قسمت قبل بررسی کردیم.
- Actions: متدهایی هستند که state را تغییر میدهند.
- Computed properties: در مورد مفهوم خواص محاسباتی در قسمت قبل بحث کردیم. این خواص، ...
در قسمت قبلی درباره تفاوتهای Stack و Heap، صحبت کرده و به این نتیجه رسیدیم که برای آزادسازی حافظه Heap، در صورتیکه نخواهیم اینکار را بصورت دستی انجام دهیم، نیاز به Garbage Collector پیدا خواهیم کرد. تاریخچهای مختصر از GC در NET.
ایده اولیه ایجاد Garbage Collector در NET.، در سال 1990 بود که در آن زمان، مایکروسافت مشغول پیاده سازی خود از JavaScript بنام JScript بود. در ا ...
پیش از بحث در مورد «مدیریت حالت»، باید با مفهوم «حالت» آشنا شد. «حالت» در اینجا همان لایهی دادههای برنامه است. زمانیکه بحث React و کتابخانههای مدیریت حالت آن مطرح میشود، میتوان گفت حالت، شیءای است حاوی اطلاعاتی که برنامه با آن سر و کار دارد. برای مثال اگر برنامهای قرار است لیستی از موارد را نمایش دهد، حالت برنامه، حاوی اشیاء متناظری خواهد بود. حالت، بر روی نحوهی رفتار و رندر کامپوننتهای React تاثیر میگذارد. بنابراین مدیریت حالت، ر ...
تا اینجا الگوی Redux را در برنامههای React بررسی کردیم که شامل این موارد است:
- با استفاده از Redux، یک شیء سراسری state، کار مدیریت state تمام برنامه را به عهده میگیرد که به آن «single source of truth» نیز گفته میشود. البته هرچند میتوان کامپوننتهایی را هم در این بین داشت که state خاص خودشان را داشته باشند و آنرا در این شیء سراسری ذخیره نکنند.
- در حین کار با Redux، تنها راه تغییر شیء سراسری state آن، صدور رخ ...