معرفی jetemit برای مدیریت رویدادها

لوگوی jetemit
لوگوی jetemit

با ماژول jetemit شما می توانید در همه پروژه های که با زبان JS نوشته شده است بین Module ها و یا Component های ارتباط برقرار کنید. وقتی صحبت از همه پروژه ها میشود منظور پروژه های React، Vue، Angular، Pure JS و حتی پروژه های Backend با Node هست. ماژول jetemit چیز جدید اختراع نکرده است بلکه مسئله مدیریت رویداد ها را ساده تر و قابل فهمتر کرده است. ماژول jetemit دارای دو متد اصلی به نام on و emit هست

import { on, emit } from 'jetemit';
on('TIME', time => console.log(time));
emit('TIME', '12:50'); 

همانطور که در کد مشاهده میکنید متد on وظیفه تعریف یک listener را دارد مقدار اول این متد نام رویداد هست که می تواند هر نامی انتخاب کرد و مقدار دوم تابعی هست که در صورت اتفاق افتادن رویداد باید اجرا شود مقدار ورودی این تابع مقداری هست که اجرا کننده رویداد ارسال میکند. متد emit وظیفه اجرای رویداد را دارد در کد بالا رویداد TIME اجرا میشود مقدار اول این تابع نام رویداد هست و مقدار دوم این تابع valueی هست که به lisener ها ارسال میکند که می تواند هر نوعی باشد string, number و ...

در پایین یک مثال فرضی در قالب یک پروژه React را باهم مرور میکنیم تا به سادگی jetemit پی ببرید. فرض کنید ما در پروژه دو Component داریم که در یک صفحه قرار دارند یکی از Component ها مسئول دریافت زمان از سرور به نام TimerReceiver هست و هر ۳۰ ثانیه یک بار از سرور زمان را دریافت میکند و Component دیگر مسئول نمایش زمان به نام TimeDisplay هست. (این یک مثال فرضی هست) هر دو Component هم در Componentی به نام App هست که به نوعی Component Main ما می باشد Render میشوند. پس شکل Component App به صورت زیر هست:

import React from 'react';
function App() {
    return (
        <>
            <TimerReceiver />
            <TimeDisplay />
        </>
    );
}
export default App;

کد Component TimerReceiver هم به شکل زیر هست:

import React, { Component } from 'react';
import { emit } from 'jetemit';
class TimerReceiver extends Component {
    componentDidMount() {
        setInterval(async () => {
            const result = await api.get('https://api.???.ir/v1/time');
            emit('TIME', result);
        }, 1000 * 30);
    }
    render() {
        return null;
    }
}
export default TimerReceiver;

متد render در این Component چون قرار نیست چیزی نمایش دهد مقدار null برمیگرداند. ما با استفاده از متد setInterval در JS در هر ۳۰ ثانیه یک درخواست به یک سرور فرضی ارسال میکنیم تا مقدار زمان را از سرور دریافت کنید تابع api.get یک متد فرضی هست برای دریافت زمان از سرور اما متد emit مربوط به ماژول jetemit هست که زمان دریافتی از سرور به listener ها اعلام میکند.

کد Component TimeDisplay هم به شکل زیر هست:

import React, { Component } from 'react';
import { on } from 'jetemit';
class TimeDisplay extends Component {
    state = {
        time: '',
    }
    componentDidMount() {
        on('TIME', time => this.setState({ time }));
    }
    render() {
        const { time } = this.state;
        return (
            <div>
                {time}
            </div>
        );
    }
}
export default TimeDisplay;

در این Component ما با استفاده از state و متد setState هر مقداری را که توسط متد on در ماژول jetemit دریافت میکنیم در state اعمال میکنیم و در نهایت در متد render این مقدار نمایش داده میشود.

نتیجه گیری:

من و تیمی که در حال کار روی پروژه های JS هستیم تجربه ای خوبی از jetemit داریم ما در jetemit چیز جدیدی اختراع نکرده ایم فقط فرآیند مدیریت رویداد ها را ساده تر و کارآمدتر کرده ایم حتی در پروژهای ما با استفاده از jetemit مدیریت state هم انجام داده ایم که بعدا در این مورد هم مقاله ای خواهم نوشت.

لینک Github و NPM ماژول jetemit:

https://github.com/uxitten/jetemit

https://www.npmjs.com/package/jetemit