کتابخانه RxJs با هدف توسعه ساخت برنامه های asynchronous و event-based ساخته شده است. این کتابخانه بر اساس الگوهای طراحی observer pattern به ما امکان میدهد بلاک هایی از کُد را برای مشاهده تغییر مقادیر و event ها رزرو کنیم. زمانی که تغییری یا اتفاقی رخ میدهد، این بلاک های رزرو شده فراخوانی شده و مقادیر تغییر یافته یا event مربوطه به صورت پارامتر به آنها ارسال میگردد.
اما این امکان پیش از RxJS هم در جاوااسکریپت وجود داشت. به مثال زیر توجه کنید:
همین منطق را میتوان به کمک RxJS هم پیاده سازی کرد:
پس کتابخانه RxJS چه مزیتی برای ما دارد؟ در ادامه و پیش از پرداختن به مفاهیم اصلی کتابخانه RxJS، ابتدا به مزایای آن میپردازیم.
مزیت اول : purity
مزیت اول استفاده از کتابخانه RxJS بحث purity است. به مثال زیر توجه کنید:
برای شمردن تعداد کلیک هایی که روی داکیومنت انجام شده، یک متغیر بنام count تعریف میکنیم و مقدار آن را به ازای هر کلیک افزایش میدهیم. متغیر count خارج از بلاک کُد تعریف شده است. یعنی برای شمردن تعداد کلیک ها به متغیری خارج از بلاک کُد نیاز داریم. این یک مثال ساده است. این وابستگی به خارج از بلاک کُد میتواند خیلی پیچیده تر باشد و احتمال بروز خطا در برنامه را افزایش دهد.
اما به کمک توابعی که در RxJS تعریف شده است، میتوانیم کدی بنویسیم که وابستگی نداشته باشد:
می بینیم که به کمک تابع scan ( مشابه تابع reduce در آرایه ها) میتوانیم متغیر count را از بیرون صدا نکنیم و در روند انتقال event ، شمارش را انجام دهیم.
مزیت دوم : کنترل جریان (flow)
مزیت دوم استفاده از کتابخانه RxJS کنترل جریان انتقال event ها و تغییرات متغیرها در برنامه است. در مثال زیر میخواهیم چنانچه فاصله یک کلیک تا کلیک قبلی کمتر از یک ثانیه باشد، آن را در نظر نگیریم:
کتابخانه RxJS توابعی در اختیار ما قرار میدهد که بتوانیم به سادگی این کار را در جریان انتقال event کلیک انجام دهیم:
پس از کلیک روی داکیومنت، تابع throttleTime به مدت یک ثانیه هر event دیگری را از جریان انتقال event حذف میکند و به مدت یک ثانیه نه لاگی اتفاق می افتد و نه شمارشی انجام میشود.
مزیت سوم : کنترل روی مقادیر و متغیرها
مزیت سومی که کتابخانه RxJS در اختیار ما قرار میدهد این است که در جریان انتقال event یا تغییر، روی مقادیر مختلف کنترل داشته باشیم.
به مثال زیر توجه کنید:
به کمک کتابخانه RxJS میتوانیم این تغییر دیتا را در مسیر انتقال event انجام دهیم و کنترل متغیرها را به دست بگیریم:
نتیجه آبجکتی است که هم تعداد کلیک را بر میگرداند و هم موقعیت افقی کلیک روی صفحه را شامل میشود.
این کتابخانه همچنین بر اساس الگوی طراحی iterator pattern و اصول برنامه نویسی functional روی مجموعه ها (collections)، به ما امکان میدهد که بتوانیم روی مجموعه ای از event ها و مقادیر جدید برنامه نویسی کنیم.
در کتابخانه RxJS با چه مفاهیمی سروکار داریم؟ آشنایی با این مفاهیم به ما کمک میکند با عمق بیشتری به امکانات این کتابخانه نگاه کنیم.
مفاهیم اصلی کتابخانه RxJS عبارتند از:
مفهوم Observable :
دسترسی به مجموعه ای از اتفاق ها یا مقادیر تغییر یافته را امکان پذیر میکند.
دقت کنید که Observable تنها دسترسی به تغییرات را امکان پذیر میکند. دسترسی به تغییرات از زمانی صورت میگیرد که مصرف کننده تغییرات (consumer) در Observable ی که تعریف کرده ایم، subscribe شده باشد.
با اجرای کد بالا خروجی زیر قابل مشاهده است:
مقادیر ۱و ۲و ۳ بلافاصله پس از subscribe و مقدار ۴ یک ثانیه پس از subscribe در کنسول مشاهده میشود. اهمیت این موضوع فرق بین تابع معمولی (Function) و Observable است.
یک تابع معمولی
در حالیکه یک Observable
مفهوم Observer :
مجموعه ای از توابع callback است که میدانند از اتفاق ها و مقادیر تغییر یافته ای که Observable ارائه میدهد، چطور استفاده کنند. به عبارت دیگر، Observer ها مصرف کننده (consumer) تغییرات هستند.
همان طور که در مثال Observable مشاهده کردید، Observer ها با subscribe کردن، شروع به استفاده از تغییرات و مقادیر میکنند:
از بین سه تابع next، error و complete تنها next callback است که الزامی است.
یک Observer میتواند تابع complete را نداشته باشد، و تنها دریافت موفق یا ناموفق تغییرات و مقادیر برایش کافی باشد:
همچنین ممکن است تنها نیاز به دریافت موفق تغییرات داشته باشد و بدون نیاز به تعریف error callback، فقط next callback را تعریف کند:
به هر حال تابع next برای مصرف تغییرات و اتفاقات بازگردانده شده، الزامی است.
مفهوم Subscription :
آبجکتی است که به اجرای Observable ها دسترسی میدهد تا بتوان اجرای آنها را کنترل کرد. میتواند Observer ها را پاک کند یا اجرای Observable را قطع کند. مهمترین تابعی که Subscription در اختیار قرار میدهد تابع unsubscribe است. به کمک آن میتوان اجرای Observable را قطع کرد.
در کد بالا تابع interval از کتابخانه RxJS فراخوانی شده . این تابع ابتدا صفر برمیگرداند. به ازای هر ثانیه که بگذرد یک واحد به عدد قبلی اضافه کرده و نتیجه را بر میگرداند. observer یک تابع است و عدد برگردانده شده را در کنسول نمایش میدهد. به کمک تابع setTimeout و پس از چهار ثانیه، اجرای observable متوقف میشود. انتظار داریم پس از ۴ ثانیه عدد دیگری در کنسول نمایش داده نشود. با اجرای کد بالا، خروجی زیر را می توان در کنسول مشاهده کرد:
مجموعه Operator ها :
کتابخانه RxJS توابعی را توسعه داده است که به ما امکان میدهند تا به کارگیری اتفاقات و تغییرات و مقادیر را به صورت declarative programming برنامه نویسی کنیم. ( برنامه نویسی خوانا، کد برنامه توضیح کلی از اتفاقاتی است که می افتد به دور از پرداختن به جزییات و پیچیدگی ها ). مانند map، scan، from، of و ... .
توضیح در مورد operator ها مفصل است و در مقاله ای جدا به آنها خواهیم پرداخت.
مفهوم Subject :
مشابه EventEmitter عمل میکند. به ما امکان میدهد event یا مقادیر جدید را ارسال کنیم. با این تفاوت که میتواند به صورت گروهی به لیستی از Observer ها اطلاع دهد (multicasting). در واقع نوع خاصی از Observable است که امکان multicasting به ما میدهد. به کمک subject میتوانیم تعیین کنیم که به چه دیتایی نیاز داریم. تغییرات و مقادیر قبلی، مقدار فعلی و یا فقط تغییرات و مقادیر آینده. به کمک انواع مختلف Subject که در RxJS تعریف شده است میتوانیم به دیتاهای مختلف دسترسی پیدا کنیم.
در مقاله مجزایی به تفاوت و انواع Subject ها خواهیم پرداخت.
مفهوم Scheduler ها :
کنترل کننده هایی هستند که نحوه اتفاق افتادن event ها و شرایط را مدیریت میکنند. انواع مختلفی از scheduler در کتابخانه RxJS توسعه داده شده است و بیشتر مواقع مستقیما با آنها سرو کار نداریم.
بحث Scheduler ها هم پیچیده است و در مقاله دیگری به جزییات، به آنها خواهیم پرداخت .
کتابخانه RxJS برای برنامه نویسی Reactive ساخته شده است تا استفاده از کدهای asynchronous یا callback based راحت تر شود. آخرین نسخه stable این کتابخانه نسخه ۷ است و نسخه ۸ آن هنوز در حال گسترش و بهبودی است.
موفق باشید
:)
