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; 
 }
}

• strattonn: That's a great idea and I'll check into that but I'm not sure if I have access to this. I'm extending their debugging routine. That routine is giving me all the information I need in one place, so it's a case of translating the data in this function, which is why I'm using a Map. As for hooking into the events I'd have to work out what they're doing first which is a bunch of work, whereas I have all this right on hand.