CODEWITHSUNDEEP
javascriptperformancememory-leaks
M4rk
M4rk

Reputation: 2272

Javascript class initialization and jQuery DOM in memory

Which is the best way between:

var myClass = function() {
    this.myContainer = function(){ return $(".container");}
    this.mySubContainer = function(){ return this.myContainer().find(".sub"); }
}

AND 

var myClass = function() {
    this.myContainer = $(".container");
    this.mySubContainer = this.myContainer.find(".sub");
}

Is there any concrete differences?

The memory problem arose when I have seen that my web page, that has enough javascript ( about 150KB of mine + libs ) takes more then 300-400MB of RAM. I'm trying to find out the problem and I don't know if this could be one of them.

Upvotes: 1

Views: 108

Answers (4)

Ibu
Ibu

Reputation: 43850

Yes this is different. after you fix your syntax error :

function myClass(){... // the parentheses

1st

When you create a new object var obj = new myClass(), you are creating two functions, and the jquery object is not returned until you call it

var container = obj.myContainer();

2nd

As soon as the object is initialized the dom is accessed and you have your objects cached for later use;

var container = obj.myContainer;

Upvotes: 0

Viktor S.
Viktor S.

Reputation: 12815

function myClass{
    this.myContainer = function(){ return $(".container");}
    this.mySubContainer = function(){ return this.myContainer().find(".sub"); }
}

Here you will need to call it something like myClassInstance.myContainer() and that means jquery will search for .container element(s) any time you are using that function. Plus, it will create 2 additional closures any time you will create new instance of your class. And that will take some additional memory.

function myClass{
    this.myContainer = $(".container");
    this.mySubContainer = this.myContainer.find(".sub");
}

Here you will have myContainer pointing to an object which already contains all links to DOM nodes. jQuery will not search DOM any time you use myClassInstance.myContainer

So, second approach is better if you do not want to slow down your app. But first approach could be usefull if your DOM is frequently modified. But I do not beleave you have it modified so frequently that you may need to use second approach.

Upvotes: 2

Sajjan Sarkar
Sajjan Sarkar

Reputation: 4198

Yes they are different.

MODEL 1:

In the first model, myContainer is a function variable.It does not contain the jQuery object.You cannot call any of jQuery's methods on the objet. To actually get the jQuery object you will have to say

var obj = this.myContainer() or this.myContainer.call()

MODEL 2:

The second model stores the actual jQuery object.

try alerting this.myContainer in both models, u will seee the difference.

Upvotes: 0

Sushanth --
Sushanth --

Reputation: 55750

If there is a single variable you are trying to assign , then the second approach looks cleaner..

Upvotes: 0

Related Questions