Daniel Daniel - 3 months ago 31
Javascript Question

Revealing Module / Prototype Pattern

Until now, I used the Revealing Module Pattern to structure my Javascript, like so:

var module = (function() {
var privateVar;

// @public
function publicFunction( ) {

}

return {
publicFunction: publicFunction
}
})();


Fiddle

Although this code works as expected, I read an article lately that this pattern uses a large amount of memory if you have multiple instances, and that it has some speed issues compared to other patterns. Since I enjoy working with this pattern, I did a search for similar patterns without all those "issues" and I came across the Revealing Prototype Pattern. As far as I know, JavaScript`s Prototype has a much better memory management.

Now I'm wondering if it's faster / better for memory to use the Revealing Prototype Pattern? This benchmark surprised me, because the Module Pattern seems to be much faster. Is there any reason?

Also, I couldn't figure out how to have multiple instances with the Revealing Prototype Pattern (compare to the Revealing Module Pattern Fiddle above):

var prototypeModule = function( el ) {
this.init( );
};

prototypeModule.prototype = function () {
var privateVar;

// @public
function init( ) {

}

return {
init: init
}
}();


Fiddle 2

What am I doing wrong?

Answer

Although this code works as expected I red an article lately that this pattern uses large amount of memory if you have multiple instances

The code you presented in your first snippet is a singleton module, there are no "multiple instances". It is completely fine.

Only the thing that you titled Module pattern - Multiple instances in your fiddle does suffer from memory disadvantages when it instantiates a very large amount of objects. However, notice that this is not a "module pattern" but the "factory pattern".

Now I'm wondering if it's faster / better for memory to use the Revealing Prototype Pattern?

In general, and if applied correctly, yes.

This benchmark surprised me, because the Module Pattern seems to be much faster. Is there any reason?

The code of their modules is messed up beyond all repair. I'm not even trying to comment on what is going on there.

Also I couldn't figure out how to have multiple instances with the Revealing Prototype Pattern

The benefit of the prototype is that its properties are shared amongst all instances. This means that the .init method of all instances points to the same function, which has a single privateVar in its revealing module scope - this variable exists only once for all instances! It's static, not instance-specific.

If you want to use the prototype, you cannot access truly private variables; you will need to use public properties. However, your clickFunction needs a local (private) variable anyway for its closure, so there would be nothing wrong with not using the prototype here:

function Constructor( el ) {
    var privateVar = $( el );
    privateVar.on( 'click', function clickFunction() {
        privateVar.addClass('click');
    });

    console.log( 'constructor: ' + privateVar.attr('id') ); 
}
Comments