您需要担心 WinJS.Navigation 命名空间促进的单页导航模型中的内存泄漏。
你建立的模型——你在哪里实现卸载——绝对是正确的方法。您想要获得的复杂程度和深度取决于您的应用程序的复杂性。具体来说,如果您有多个控件,并且带有多个手动事件处理程序,您可能希望创建一组帮助程序,以便您能够一次性清理这些处理程序。这可能就像将元素、事件名称和处理程序实例推入一个数组一样简单,当离开该页面并从 DOM 中销毁/删除它时,您只需烧毁该数组即可删除需要清理的项目。
请注意,您只需要显式清理处理程序和 DOM 对象具有不同生命周期的情况。如果它们一起消失——例如,附加到页面中 DOM 元素的控件,那么您不必显式清理所有内容。垃圾收集器最终会清理它。如果你是一个内存特别重的应用程序,你可能会通过更积极地删除监听器来获得一些胜利。
还有一些其他的事情要记住:
- 这也适用于实现 addEventListener 契约的纯 javascript 对象,即列表视图
- 不要使用 attachEvent - 由于它是旧的实现,它会导致牢不可破的循环。它实际上是一个已弃用的 API,因此无论如何都不应该使用
- 当您提供绑定 this 指针的事件处理程序时,当您尝试解除绑定时要小心。例如
例子:
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);