避免内存泄漏winjs EventListeners

问题描述

我想知道是否将事件侦听器添加到按钮上，是否必须在unload上将其删除?按下后退"按钮会自动删除我不需要担心内存泄漏的所有当前页面元素吗?

I want to know if I add an event listener to a button, do I have to remove it on unload? Would pressing the 'back' button automatic removes everything current page elements in which I don't need to worry about memory leaks?

(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命名空间促进的单页导航模型中的内存泄漏.

You need to worry about memory leaks in the single-page navigation model that the WinJS.Navigation namespace promotes.

您建立的模型(在其中实现卸载)绝对是正确的方法.多么复杂您想获得的深度取决于应用程序的复杂性.具体来说，如果您具有多个控件，并且具有多个手动事件处理程序，则可能需要创建一组帮助程序，以使您能够一口气清理这些处理程序.当离开该页面并将其从DOM中销毁/删除时，这可能就像将元素，事件名称和处理程序实例推入数组中那样简单，您只需烧毁数组即可删除需要清理的项目.

The model you've set up -- where by you implement unload -- is definitely the right approach. How complex & deep you want to get depends on the complexity of your application. Specifically, if you have multiple controls, with multiple manual event handlers you may want to create a set of helpers to enable you to clean up those handlers in one swoop. This may be as simple as pushing element, event name, and the handler instance into an array when when leaving that page and destroying/removing it from the DOM, you can just burn through the array removing the items that need to be cleaned up.

请注意，您只需要明确清理处理程序和DOM对象具有不同生存时间的情况.如果他们在一起走-例如附加到页面中DOM元素的控件，则您不必明确地清除所有内容.垃圾收集器最终将对其进行清理.如果您是一个特别占用大量内存的应用程序，则可能在这里可以通过更积极地删除侦听器来赢得一些胜利.

Note that you need to only need to explicitly clean up the case where the handler, and the DOM object have different life times. If they go away together -- e.g. a control attached to a DOM element in the page then you don't have to clean up the everything explicitly. The Garbage Collector will eventually clean it up. If you are a particularly memory heavy application, you may get some wins here by removing the listeners more aggressively.

还有一些其他事情要记住:

There are some other things to remember:

• 这也适用于实现addEventListener协定(即列表视图)的纯javascript对象
• 不要使用attachEvent －由于它是隐藏的旧实现，因此将导致不可中断的循环.它实际上是已弃用的API，因此无论如何都不应该使用
• 当您提供绑定了this指针的事件处理程序时，当尝试解除它们的绑定时，请当心.例如

示例:

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

如果您尝试分离事件，那么您会迷路-从.bind()中获得的收益在风中迷失了，您将永远无法解开钩子:

If you try to detach the event, you're lost -- the return valud from the .bind() is lost in the wind, and you'll never be able to unhook it:

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);

The best solution here is to either monkey patch handleClick before attaching it: this.handleClick = this.handleClick.bind(this);

或将其存放起来以备后用:

Or store it away for later use:

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

这篇关于避免内存泄漏winjs EventListeners的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！