Question

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.

Answer 1

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.