RxJS: چالش پیشرفته برای ساخت یک نمایشگر اسپلیت فلپ واکنشی

سلام!

در این مقاله، تمرینی را تعریف می کنم، شما را به چالش می کشم و پاسخ خودم را به آن می دهم.

من جزئیات تفکر و هشدار کوچک اسپویلر خود را توضیح خواهم داد، ما از اپراتورهایی استفاده خواهیم کرد که اغلب استفاده نمی شوند!

زمان آن است که ذهن برنامه نویسی ضروری خود را خاموش کنید و ذهن راکتیو خود را روشن کنید. سواری جالبی خواهد بود

اگر مدتی مرا دنبال می کردید، ممکن است تا به حال بدانید که من از طرفداران بزرگ RxJS هستم. و اگر هنوز من را دنبال نکرده اید، زمان بسیار خوبی است که کمی آرام باشید و روی دکمه دنبال کردن کلیک کنید قبل از اینکه شروع به ذوب کردن مغزمان کنیم.

تا کنون در dev.to، من 3 مقاله نوشته ام که یا به شدت از آنها استفاده می شود یا کاملاً به RxJS اختصاص داده شده است:

این یکی از همه چالش برانگیزترین آنهاست.

اخیراً، ما در محل کار یک صفحه نمایش فلپ اسپلیت خریدیم که به عنوان “تخته سولاری” یا “تخته خروج سولاری” نیز شناخته می شود.

دانلود:https://www.prusaprinters.org/prints/69603-split-flap-counter-fully-printable

youtube.com

موردی که ما دریافت کردیم وصل شده است که از طریق یک برنامه می توانیم متن را تنظیم کنیم و IRL را به روز می کند. نمایش انواع پیام ها یا آمارهای مهم خنده دار است.

مطمئنم می دانید که چقدر می تواند مسحورکننده باشد وقتی همه حروف در حال چرخش هستند و ناگهان همه آنها یکی پس از دیگری متوقف می شوند تا جمله پایانی را نمایش دهند. آیا ساختن خودمان با RxJS چالش جالبی نیست؟

قبل از شروع این کار، اجازه دهید نتیجه مورد انتظار را تعریف کنیم:

• واکنشی، واکنشی، واکنشی. بدون برنامه نویسی ضروری همه چیز باید از طریق جریان ها مدیریت شود و به وضعیت خارجی متکی نباشد. البته برای مثال خوب است که حروف مجاز در یک متغیر سراسری را به عنوان یک ثابت تعریف کنیم. اما تمام وضعیت داخلی برنامه باید در جریان ها باشد
• در مجموع 20 حرف روی نمایشگر (به هر حال به راحتی قابل تغییر است)
• می تواند تمام حروف از A به Z، می تواند بین حروف/کلمات و اعداد از فاصله داشته باشد 0 به 9
• هر زمان که یک حرف به‌روزرسانی می‌شود، صفحه باید وضعیت جدید برد را نمایش دهد
• اگر متن در هر نقطه از زمان تغییر کند، خواه متنی در حال انجام باشد یا در حال حاضر متوقف شده باشد، نباید از ابتدا شروع شود. درست مانند واقعیت، باید از جایی که در حال حاضر است ادامه یابد و حروف را به موقعیت جدید بپیچاند

نمونه ای از خروجی مورد انتظار:

بله تو! من فکر می کنم بسیار سرگرم کننده خواهد بود اگر افرادی که این را می خوانند به تنهایی آن را انجام دهند و به اشتراک بگذارند که چقدر به آن رسیده اند.

برای اینکه این کار را آسان‌تر کنم و روی راه‌اندازی دردناک تمرکز نکنم، یک را ایجاد کردم قالب Stackblitz آماده برای رفتن!

این شامل برخی از توابع ابزار در utils.ts برای دستکاری حروف و DOM، به طوری که ما روی جریان ها متمرکز بمانند.

اگر تصمیم دارید این کار را انجام دهید، Stackblitz اصلی را کنار بگذارید یا اگر ترجیح می دهید از ابتدا شروع کنید. با خیال راحت اصلاح کنید هر چیزی از قالبی که من ساخته ام اینجا فقط به‌عنوان پایه‌ای برای کمک است، نه اینجا که شما را عقب نگه دارد.

فراموش نکنید که Stackblitz خود را ذخیره کنید و آن را به عنوان نظر به اشتراک بگذارید. حتی اگر نتونستی تا آخر راه بری. بیایید در مورد نتایج بحث کنیم!

در برنامه نویسی، این احتمال وجود دارد که بیش از یک راه حل برای رسیدن به یک نتیجه وجود داشته باشد. بنابراین به خاطر داشته باشید که این رویکرد خود من است و کسی می تواند راه حل متفاوت یا حتی بهتری ارائه دهد.

از این به بعد، حواستان باشد که اگر می‌خواهید ابتدا روی راه‌حل خودتان کار کنید، اراده زیر یکی از پاسخ‌های ممکن است، پس واقعاً یک اسپویلر بزرگ ⚠️

بدون مقدمه، بیایید مستقیم به داخل بپریم.

“اینم ما گووووووووووووووووووووووووووووووووووووووووووود”.

اولین کاری که سعی می‌کنم وقتی باید یک ویژگی متکی بر مشاهده‌پذیر بسازم انجام دهم، این است که در ذهنم تصور کنم که چگونه همه اینها باید تعامل داشته باشند. جریان های بیرونی، جریان های درونی. در حالی که ممکن است نمایش بصری آن دشوار باشد، من آنچه را که می‌خواهم بسازم به صورت ترکیبی از نمودارها و لوله‌های مرمری تجسم می‌کنم که همه به هم متصل هستند. من تمام تلاشم را برای نشان دادن این موضوع انجام خواهم داد، اما با من همراه باشید زیرا این کار آسانی نیست.

این تا آنجایی است که من می توانم نحوه عملکرد اشیا را به صورت بصری نشان دهم. حالا بیایید به کدها بپردازیم.

به عنوان یادآوری، من قصد ندارم به فایل utils که برای مدیریت حروف و دستکاری DOM ایجاد کرده ام، شیرجه بزنم. برای مشاهده کل اجرا به اینجا مراجعه کنید.

حال، اگر روی خود جریان تمرکز کنیم و فعلاً به‌روزرسانی DOM را کنار بگذاریم، هسته کد ما در اینجا آمده است:

قبل از اینکه به جزئیات بپردازیم، بیایید برای لحظه ای زیبایی و قدرت RxJS را بررسی کنیم.

به خاطر داشته باشید که 14 خط کد در بالا می‌توانند رشته‌ای را دقیقاً مانند یک تخته مسطح با انیمیشن‌ها نمایش دهند (تأخیر به طور جداگانه روی هر حرف اعمال می شود)، حالت فعلی را حفظ کنید و اگر متن تغییر کرد، دقیقاً از جایی که هستیم به موقعیت جدید شروع به تغییر حروف کنید. همچنین اگر بخواهیم متنی را اعمال کنیم و به متن دیگری تغییر دهیم، به درستی مدیریت می شود در حالی که اولین مورد هنوز در حال اجرا است، بدون بازنشانی از ابتدا و برداشتن دقیقا از جایی که هست 🔥. RxJS واقعاً یک چیز زیبایی است.

اولین چیزی که استفاده می کنیم ورودی ماست. ساده است Subject که ما می توانیم next به هر زمان که ما بخواهیم این می تواند به عنوان مثال به یک متن ورودی متصل شود.

سپس، آن رشته را به یک ورودی که با حروف تابلو مطابقت دارد نگاشت می کنیم. به این معنی که ما می خواهیم آن آرایه ای از کاراکترها باشد. یک کاراکتر برای هر ورودی صفحه نمایش ما. برای مثال، اگر بگذریم، فرض کنیم که برد از نمایش 10 کاراکتری برای سادگی پشتیبانی می کند 'HELLO' ما برمی گشتیم ['H', 'E', 'L', 'L', 'O', '', '', '', '', ''].

سپس 🥁… از a استفاده می کنیم switchScan، که انصافاً اولین بار است که می توانم یک مورد استفاده برای آن پیدا کنم 🎉. همانطور که از نام آن پیداست، ترکیبی از switch و scan:

• switch به این معنی است که اگر جریان داخلی همچنان در حال اجرا باشد، زمانی که جریان اصلی دوباره منتشر شود، جریان داخلی را متوقف می کنیم
• scan مانند یک است reduce. به این معنی که یک انباشته کننده، یک مقدار جاری می گیرد و مقداری که از آن برمی گردانید تبدیل به انباشتگر جدید می شود. به جز اینکه با reduce، قبل از انتشار و با آن منتظر می ماند تا جریان کامل شود scan تمام نتایج متوسط ​​را منتشر می کند. اینجا، switchScan به این معنی است که جریان داخلی ما مشترک خواهد شد، می‌تواند چندین انتشار ایجاد کند که به انباشتگر جدید تبدیل می‌شود، و اگر جریان اصلی دوباره منتشر شود (ما input$$ موضوع)، تغییر حروف را متوقف می کنیم و دوباره شروع به تغییر می کنیم تا به رشته جدید ارائه شده برسیم. در اینجا، این اپراتور کار فوق العاده ای انجام می دهد، این کلید این است که می توانید یک انیمیشن را در میانه آن متوقف کنید و از جایی که برد در حال حاضر بدون تنظیم مجدد است ادامه دهید.

سپس یک داریم combineLatest. در نموداری که در بالا ترسیم کردم، combineLatest اینجاست تا همه جریان ها را جمع کند (1 در هر حرف) که به صورت فلش های سبز عمودی نمایش داده می شوند.

آرایه‌ای از جریان‌ها را می‌سازد که به آن ارسال می‌شود combineLatest، روی حروف فعلی که به تازگی دریافت کرده ایم حلقه می زنیم و برای هر کدام، تمام حروف را بین آنچه در حال حاضر داریم و حرف هدف این کاشی محاسبه می کنیم. سپس هر یک از این حروف میانی را که باید با استفاده از آنها مرور کنیم، منتشر می کنیم from.

در نهایت، با from با انتشار تمام حروف میانی، از آن استفاده می کنیم concatMap با یک delay تا مطمئن شویم که حروف میانی را به همان ترتیب و با تاخیر در بین هر کدام برای شبیه سازی انیمیشن منتشر می کنیم.

در اینجا نسخه نهایی زنده در Stackblitz آمده است:

این یک بود مقدار زیادی برای گرفتن، اما یک سواری جالب بود. اینطور نبود؟

هر زمان که فرصت نوشتن کد RxJS را پیدا می کنم، واقعاً به من یادآوری می کند که چرا عاشق کدنویسی هستم. وقتی حدود 6 سال پیش متوجه برنامه‌نویسی واکنش‌گرا شدم، واقعاً ذهنم را به خود مشغول کرد و می‌خواستم با آن بازی کنم تا آن‌قدر راحت باشم که بتوانم خودم را با آن بیان کنم، درست مانند بسیاری از توسعه‌دهندگان که خودشان را با کدهای ضروری بیان می‌کنند. تمایل به یادگیری اول اکنون که بتوانم این را بنویسم واقعاً خوشحالم می‌کند و سعی می‌کنم هر زمان که ممکن است این اشتیاق را برای برنامه‌نویسی واکنش‌گرا به اشتراک بگذارم.

RxJS یک ابزار قدرتمند است و یادگیری آن به زمان نیاز دارد. اما به محض اینکه بتوانید سر خود را به دور آن بپیچید، می‌توانید به روشی نسبتاً آسان یا حداقل خوانا، از موارد بسیار پیچیده استفاده کنید.

امیدوارم از این مقاله لذت برده باشید، اگر این کار را کردید با یک واکنش به من اطلاع دهید و در نهایت نظر خود را بگذارید. شنیدن نظرات افرادی که برای خواندن یک پست وقت گذاشته اند همیشه خوشحال کننده است 😄! اگر خودتان به چالش رفتید، پیوندی به Stackblitz خود به اشتراک بگذارید یا به ما اطلاع دهید که تا کجا پیش رفته اید!

اگر به مقالات بیشتری در مورد Angular، RxJS، منبع باز، میزبانی شخصی، حریم خصوصی داده ها علاقه مند هستید، به راحتی دکمه پیگیری برای بیشتر. با تشکر برای خواندن!

اگر اشتباه تایپی، جمله ای که می تواند بهبود یابد یا هر چیز دیگری که باید در این پست وبلاگ به روز شود، پیدا کردید، می توانید از طریق یک مخزن git به آن دسترسی داشته باشید و درخواست pull کنید. به جای ارسال نظر، لطفاً مستقیماً به https://github.com/maxime1992/my-dev.to بروید و یک درخواست کشش جدید با تغییرات خود باز کنید. اگر علاقه مندید که چگونه پست های dev.to خود را از طریق git و CI مدیریت کنم، اینجا بیشتر بخوانید.