Dynamic execution of Template Literals using a Map

Question

I have a system that is generating internal events for objects. I am extending their debugger to display a human-readable version of the events sent to the debugger.

For instance, the system will generate "OnClick" for the "Blue Button" control, on a "a-guid-value-for-the-view" view. If the readable version of "a-guid-value-for-the-view" is "Customer Edit View" I want to output

On the Customer Edit View, Blue Button was clicked.

To set this up, I will Map every event to a template literal which I evaluate dynamically. My code works but the setup of the Map in PopulateEvents looks too heavy. Is there a way to make this more readable?

//Setup the list of events
function populateEvents() {
        events = new Map([
            ["OnClick", function _renderEvent(viewId, controlName, properEvent) {
                return `On the ${_viewName(viewId)}, ${controlName} was ${properEvent}.`}],
        ])}

    //Function to translate system event
    var eventName = function (eventParams) {
        return events.get(systemEventName)(viewId, controlName, properEvent);
    }

    var viewName = function (viewId) {
        if (!views.has(viewId)) {
            views.set(viewId, fnToConvertViewIdToName(viewId))
        }
        return views(viewId);
    }
}

Answer 1

No. Use inheritance instead -- it is unnecessary to create a Map as there is no advantage to re-defining a handler for each event and to have to suffer the added processing time. It will be much much easier to add an event handler to the base object. I sugfgest you use inheritance & composition instead of a static implementation on each instance of your DOM-Objects -- You might need a quick re-read on event-handling in JS (or any favorite language).

Realize that an event is an event is an event and you only need a generic log handler that is a part of the event handling chain -- just install your callback function into the event chain so it gets handled for any and all events and then build a case-statement that switches on eventType to do the proper logging:

function anyEvent(event) {

    switch (event.eventType) {
    
        case "onclick":

               var view = dosomethingToGetTheView(event);
               var parent = getParentObject(event);
               var type = ...
    
               logEvent(view, event, parent, type...);
               break; 

    }

}