Avoid memory leaks with objects that create and delete DOM with jquery

Suppose you have a component whose task is, among other things, to create a DOM node (for example, with jquery):

function PageFiller() {
}
PageFiller.prototype.fillPage = function () {
  this.dom = $("<div/>", {
    "class" : "hello",
    text : "Hello world"
  });
  $("body").append(this.dom);
}

Suppose another component uses this to populate the DOM without storing links to "PageFiller"

function Main() {
}
Main.prototype.start = function () {
   var filler = new PageFiller();
   filler.fillPage();
};
var main = new Main()
main.start();

Do not assume that immediately after this (in the same volume) someone brutally cleans the DOM:

$(".hello").remove();

What is the memory structure in this situation? Am I missing memory with a PageFiller instance?

, PageFiller ( - ), jquery, DOM, ? DOM, , , DOM , JS ( ..)

: , PageFiller :

Main.prototype.start = function () {
    this.filler = new PageFiller();
    filler.fillPage();
}

PageFiller, JQ; "" JQ , DOM, ?

, , main.start() :

  • PageFiller, , pageFiller.dom , ?
  • DOM, , , ,

:

, , :

PageFiller.prototype.fillPage = function () {
  var self = this;
  this.dom = ... // as usual 
  this.dom.click(function () {
    alert("Just clicked on dom generated by " + self);
  });
}

PageFiller , , , . ? $(""). Remove(), , , , PageFiller? -, jquery ( DOM API?)

, , , , , .

.

+5
1

filler.dom main.start() , , (.. ).

$().remove(), refcount .

, AFAICT .

+1

All Articles