我想知道如果我向按钮添加事件监听器,是否必须在 unload
时将其删除?按下“后退”按钮会自动删除我不需要担心内存泄漏的所有当前页面元素吗?
(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);
}
});...
提前致谢。
最佳答案
您需要担心 WinJS.Navigation 命名空间提倡的单页导航模型中的内存泄漏。
您设置的模型(您在其中实现卸载)绝对是正确的方法。您想要获得的复杂程度和深度取决于您应用程序的复杂程度。具体来说,如果您有多个控件,并且有多个手动事件处理程序,您可能希望创建一组帮助程序,以便您能够一次性清理这些处理程序。这可能就像将元素、事件名称和处理程序实例插入一个数组一样简单,当离开该页面并将其从 DOM 中销毁/删除时,您只需遍历数组并删除需要清理的项目。
请注意,您只需要显式清理处理程序和 DOM 对象具有不同生命周期的情况。如果他们一起离开——例如一个附加到页面中 DOM 元素的控件,那么您没有明确地清理所有内容。垃圾收集器最终会清理它。如果您的应用程序占用大量内存,您可能通过更积极地移除监听器来获得一些胜利。
还有一些事情要记住:
- 这也适用于实现 addEventListener 协定的纯 javascript 对象,即 ListView
- 不要使用 attachEvent —— 由于它是旧的幕后实现方式,因此会导致牢不可破的循环。它实际上是一个已弃用的 API,因此不应无论如何 使用
- 当您在绑定(bind) this 指针的地方提供事件处理程序时,当您试图解除绑定(bind)它们时要小心。例如
例子:
var element = getInterestingElement();
element.addEventListener("click", this.handleClick.bind(this));
如果你试图分离事件,你就迷路了——.bind() 的返回值在风中消失了,你将永远无法解开它:
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
这里最好的解决方案是在附加之前对 handleClick
进行猴子补丁:
this.handleClick = this.handleClick.bind(this);
或将其存放起来以备后用:
this.handlerClickToCleanup = this.handleClick.bind(this);
element.addEventListener("click", this.handleClickToCleanup);
关于javascript - 避免内存泄漏 winjs EventListeners,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13535251/