Revealing Module / Prototype Pattern

Question

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?

If you would like to know more on prototype and constructor functions you can see this answer. At the end is a link to an implementation of instance specific protected members. http://stackoverflow.com/questions/16063394/prototypical-inheritance-writing-up/16063711#16063711 — HMR, Jun 30 '14 at 12:46
If you like the Revealing Module Pattern, you might also try structuring your code with the Definitive Module Pattern: https://github.com/tfmontague/definitive-module-pattern — tim-montague, Jul 08 '14 at 07:06

score 4 · Accepted Answer · edited May 23 '17 at 11:44

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

Thanks! So if I understand you correctly you are saying that I have to use public properties like `this.PROP` for private variables? Is there any "better" way to do it, because `this` gets tricky if you are using something like jQuery event handlers. Although [this updated fiddle](http://jsfiddle.net/CGAGn/1/) works, I'm wondering if there is anything to improve? I could probably rename my `init` function to e.g. `addEventHandlers`, because to me it seems that this part (`var prototypeModule = function( el ) { /* INIT_HERE*/ };`) is my actual init function compared to the other pattern? Right? — mrksbnch, Jun 30 '14 at 13:10
If you want to access them from prototype functions, yes, you will need public properties. Or you don't use prototype (shared) methods for everything, but have some privileged methods that can access local variables. And yes, the constructor is the initializer function, you shouldn't need to use `init()`. — Bergi, Jun 30 '14 at 14:01

Revealing Module / Prototype Pattern

1 Answers1