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. stackoverflow.com/questions/16063394/… — HMR
– HMR, Commented Jun 30, 2014 at 12:46
If you like the Revealing Module Pattern, you might also try structuring your code with the Definitive Module Pattern: github.com/tfmontague/definitive-module-pattern — tim-montague
– tim-montague, Commented Jul 8, 2014 at 7:06

Community · Accepted Answer · 2017-05-23 11:44:19Z

5

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

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Jun 30, 2014 at 12:31

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

mrksbnch Over a year ago

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 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?

Bergi Over a year ago

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().

Collectives™ on Stack Overflow

Revealing Module / Prototype Pattern

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related