javascript - not - Evitando fugas de memoria winjs EventListeners

event listener jquery

Question

Quiero saber si agrego un detector de eventos a un botón, ¿tengo que eliminarlo en la unload ? Al presionar el botón "volver" automáticamente se eliminan todos los elementos de la página actual en los que no tengo que preocuparme por las pérdidas de memoria.

(function () {
"use strict";
ui.Pages.define("/pages/registraton/registraton.html",{
ready: function (element, options) {
document.getElementById("submitRegister").addEventListener(
"click", postRegistration , false);
},
unload: function () {
document.getElementById("submitRegister").removeEventListener(
"click", postRegistration, false);
}
});...

Gracias por adelantado.

Answer 1

Debe preocuparse por las pérdidas de memoria en el modelo de navegación de una sola página que promueve el espacio de nombres WinJS.Navigation.

El modelo que ha configurado, donde implemente la descarga, es definitivamente el enfoque correcto. La complejidad y profundidad que desea obtener depende de la complejidad de su aplicación. Específicamente, si tiene múltiples controles, con múltiples manejadores de eventos manuales, es posible que desee crear un conjunto de ayudantes para que pueda limpiar esos manejadores de una sola vez. Esto puede ser tan simple como presionar el elemento, el nombre del evento y la instancia del manejador en una matriz cuando al salir de esa página y destruirla / eliminarla del DOM, puede simplemente quemar la matriz y eliminar los elementos que deben limpiarse.

Tenga en cuenta que solo necesita limpiar explícitamente el caso donde el controlador y el objeto DOM tienen diferentes tiempos de vida. Si se van juntos, por ejemplo, un control adjunto a un elemento DOM en la página, entonces no tiene que limpiar todo explícitamente. El recolector de basura finalmente lo limpiará. Si usted es particularmente una aplicación de memoria pesada, puede obtener algunas victorias eliminando a los oyentes de forma más agresiva.

Hay algunas otras cosas para recordar:

• Esto también se aplica a objetos javascript puros que implementan el contrato addEventListener, es decir, la vista de lista
• No use attachEvent - va a causar ciclos irrompibles debido a su vieja implementación bajo las cubiertas. En realidad, es una API obsoleta, por lo que no debería usarse de todos modos
• Tenga cuidado cuando suministre manejadores de eventos donde haya vinculado este puntero cuando intente desvincularlos. P.ej

Ejemplo:

var element = getInterestingElement();
element.addEventListener("click", this.handleClick.bind(this));

Si intentas desconectar el evento, estás perdido: el valor de retorno de .bind () se pierde en el viento y nunca podrás desengancharlo:

var element = getInterestingElement();
element.removeEventListener("click", this.handleClick); // Won''t remove the listener
element.removeEventListener("click", this.handleClick.bind(this)); // Won''t remove, since it''s a different function object

La mejor solución aquí es ya sea parche de handleClick antes de adjuntarlo: this.handleClick = this.handleClick.bind (this);

O guárdelo para usarlo más adelante:

this.handlerClickToCleanup = this.handleClick.bind(this);
element.addEventListener("click", this.handleClickToCleanup);