Tengo un código como este unas cinco veces en mi proyecto, y sé que lo tendré más a menudo que eso:
this.messageHandler = ({ data, origin }) => { if (origin === window.location.origin) { if ( data.listener === this.listener && data.event === 'rowclick' ) { this.recordId = data.datarow; } } }; window.addEventListener('message', this.messageHandler);Cada vez aquí están las únicas diferencias:
this.listener tiene un valor único para cada clase.this.recordId es diferente cada vez, podría ser this.userId o this.accountId , pero hasta ahora siempre establezco una propiedad que representa la ID de un registro.Me gustaría crear una función que construya esta función. Creo que esto es posible en JavaScript. Me parece recordar haber visto información sobre cómo hacerlo en uno de los muchos recursos de JS que usé cuando aprendí el idioma. Pero no puedo encontrar la información ahora.
Idealmente, reemplazaría lo anterior con algo como esto:
window.addEventListender('message', generateHandler(this.listener, (datarow) => { this.recordId = datarow; });¿Cómo puedo hacer esto en JavaScript?
Agradezco los consejos en los comentarios, ayudaron bastante. Esto es lo que terminé escribiendo:
const generateMessageHandler = (listener, callback) => { return ({ data, origin }) => { if ( origin === window.location.origin && data.listener === listener && data.event === 'rowclick' ) { callback(data.datarow); } }; }Y luego llamarlo con esto:
window.addEventListener( 'message', generateMessageHandler(this.rowClickListenerName, (datarow) => { this.recordId = datarow; }) );Creo que tenía todas las piezas para comenzar, pero algo estaba bloqueando la implementación final hasta que los comentaristas comenzaron a hablar sobre funciones que devuelven funciones.
Ciertamente puede devolver la función dentro de una función en JavaScript, pero ¿cuál es el punto en su caso?
Simplemente puede configurar el controlador en una función anónima llamando a su función:
window.addEventListener('message', () => yourFunction(arg1, arg2, arg3));