3

Hace poco tenía Toastr llamándolo desde el atributo onlick en mi botón así:

<button onclick="toastr.info('Proceso correcto', 'Gracias!');">

Y en un archivo externo de JavaScript con este código:

toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toastr-top-right",
  "preventDuplicates": true,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "1100",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

Pero leí que hacerlo de esa forma era una mala práctica, así que buscando cómo reemplazarlo logré hacerlo de esta forma:

document.getElementById("terminado").addEventListener("click", toastnativo);
function toastnativo() {
toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toastr-top-right",
  "preventDuplicates": true,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "1100",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};
toastr.info('Proceso correcto', 'Gracias!');
}

Todo funciona bien, pero quiero saber si lo estoy haciendo de la forma correcta y si no supone algún problema para mi sitio.

4
  • 1
    Parece que esa librería depende de jQuery y puedes simplificar la asignación del evento: $("#terminado").on("click", toastnativo);
    – Triby
    Commented el 26 mar. 2022 a las 7:19
  • Excelente, muchas gracias! Commented el 26 mar. 2022 a las 7:49
  • 1
    Todo correcto, pero podrías simplificar la asignación del evento con terminado.addEventListener("click", toastnativo) ya que terminado es una variable autogenerada en el ámbito de window al ser el id de un elemento del DOM. Es decir, no es necesario hacer un document.getElementById("terminado") cuando estás en el ámbito de window, y si estás fuera de él puedes seguir accediendo a ese valor a través de window.terminado p window["terminado"]. Hacer uso de $("#terminado") es una sobrecarga de ejecución de código completamente innecesaria. Commented el 29 mar. 2022 a las 11:05
  • 1
    Además, si la asignación del atributo options va a ser siempre la misma, podrías hacerlo una única vez fuera del manipulador de eventos. Commented el 29 mar. 2022 a las 11:06

1 respuesta 1

1

Aunque tu código es correcto, te aconsejo las siguientes mejoras:

  • No es necesario llamar a document.getElementById("terminado") ni $("#terminado") ni similar para acceder a un elemento por su ID. Automáticamente se genera una variable con nombre igual al ID en el ámbito de window por cada elemento del DOM que tenga identificador, por lo que puedes usar simplemente terminado.
  • Si vas a configurar siempre del mismo modo Toastr entonces es más eficiente hacerlo una única vez fuera del manipulador de eventos en vez de hacerlo cada vez que se genera el evento.
  • Si no vas a reutilizar la función que muestra el bocadillo (toast) puedes hacer uso de una función anónima.

Aquí tienes un ejemplo de las tres recomendaciones aplicadas:

/* Configuramos Toastr una única vez */
toastr.options = {
  "closeButton": false,
  "debug": false,
  "newestOnTop": false,
  "progressBar": false,
  "positionClass": "toastr-top-right",
  "preventDuplicates": true,
  "onclick": null,
  "showDuration": "300",
  "hideDuration": "1000",
  "timeOut": "1100",
  "extendedTimeOut": "1000",
  "showEasing": "swing",
  "hideEasing": "linear",
  "showMethod": "fadeIn",
  "hideMethod": "fadeOut"
};

/* Agregamos el manipulador de eventos usando una función anónima */
terminado.addEventListener(
  "click",
  () => toastr.info('Proceso correcto', '¡Gracias!')
);
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js" integrity="sha512-VEd+nq25CkR676O+pLBnDW09R7VQX9Mdiij052gVCp5yVH3jGtH70Ho/UUv4mJDsEdTvqRCFZg0NKGiojGnUCw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.css" integrity="sha512-3pIirOrwegjM6erE5gPSwkUzO+3cTjpnV9lexlNZqvupR64iZBnOOTiiLPb9M36zpMScbmUNIcHUqKD47M719g==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<button id="terminado">Pulsar aquí</button>


El siguiente código:

() => toastr.info('Proceso correcto', '¡Gracias!')

Es equivalente al siguiente:

() => {
  return toastr.info('Proceso correcto', '¡Gracias!');
}

Que, a su vez, es equivalente a esto último:

function() {
  return toastr.info('Proceso correcto', '¡Gracias!');
}

Tener/usar o no el return es opcional y en este caso no afecta al funcionamiento de la página. Podría quitarse sin ningún problema y el código funcionaría igual, pero lo he dejado por simplificar y facilitar la lectura del código.

Si no te gusta usar un return o puede influir en el funcionamiento de la web, el código sin él sería:

() => { toastr.info('Proceso correcto', '¡Gracias!'); }
1
  • 1
    Excelente, no tenía idea del primer punto, muchísimas gracias por la explicación! Commented el 29 mar. 2022 a las 17:39

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.