Writing complex projects may require handling different events between components. Some of these components may be too far away from each other in the way of programming. Building a global event system to handle this can solve the problem.
Event System Pattern
Event System should contain the following methods:
-
subscribe(event, handler). This method is used to subscribe entities to receive events and run handlers of these events. It is gonna be used by an entity interested in some events. -
unsubscribe(event, handler). This method is used to unsubcribe entities from receiving events. It is gonna be used by an entity interested in some events. -
notify(event, ...args). This method is used to notify all entities, which are subscribed to the event, of the event that was triggered. It is gonna be used by an entity sending events to others.
What is Singleton
Singleton is a programming pattern that ensures that there is only one instance of a class in memory. This is useful for classes that manage resources that should only be used for one instance at a time.
The Singleton pattern is implemented by creating a private constructor for the class, which prevents other pieces of code from instantiating it. The only way to get an instance of the class is through a static method that returns the one existing instance.
Event System Singleton
Event System will use the Singleton pattern to avoid memory leaks and to make sure there’s only one Event System instance all over the code to ensure logic consistency. This will make the Event System class behave the same globally in the code and will allow getting access to Event System logic through getInstance static method.
Events
Event System will be able to trigger events and notify subscribers about them. This process should be as typed as possible. For the first time, events can be stored in the interface with their names, handler arguments, and handler return types. Later we will extend this using TypeScript generics so it will be possible to use your own types which will make the Event System more customizable.
Event Subscribers
Subscribers will be notified about happening events. Each subscriber will have an event it will get notified about and a handler that will be used to process the event.
Functions are non-primitives in the JavaScript world (moreover, they are objects) and are stored in the program as pointers. In this way, functions can be unique even if they have the same code inside. This allows discerning unique subscribers to use the event they are subscribed to and the event handler used for the event.
Subscribers Methods
Since subscribers field of the EventSystem class is an array, it is enough to add or remove an entry of the array. The logic of firing an event handler will be implemented in the notify method.
Notification Methods
Event System method notify will be used by components which intend to trigger some action. This method will fire all subscribers’ event handlers.
Usage
So after all this logic implementation Event System is ready to work. Currently, there is no possibility to extend events, so they should be predefined. Such extension and some other features will be implemented in the second part.
Github Repository: https://github.com/NickSettler/events-system
Top comments (0)