How to use Revealing module pattern in JavaScript

Question

I stumbled across this post: JavaScript's Revealing Module Pattern. I would like to use this in my project.

Let's imagine I have a function abc and I am calling that function in my main JavaScript file.

Does this pattern make things different? Can anyone show me a basic example of this pattern?

Answer 1

The method called by the author "Douglas Crockford's pattern for creating objects" is actually the module pattern that was developed mostly by Richard Cornford et al. See http://groups.google.com/group/comp.lang.javascript/msg/9f58bd11bd67d937

As for examples, there are many. Read the following article and follow some of the links: http://peter.michaux.ca/articles/module-pattern-provides-no-privacy-at-least-not-in-javascript-tm

Answer 2

The basic concept of a Revealing Module is that you have an Object which encapsulates its data and behavior:

var Module = (function(){
    var privateStuff = {};
    var publicStuff = {};

    return publicStuff;
})();

However, there are some best practices you should employ when using this pattern. Here's a module ("Modulus") with some properties for demonstration sake, which employs some of these practices:

function AbstractSomeClass(id) {
    this.id = id;
    return this;
}

var Modulus = (new (function SomeClass() {
    var thus = this;

    function NameClass(name){
        this.value = thus.name || name;
    }

    AbstractSomeClass.call(this, 998);

    this.name = 'Touring';
    this.name = ( new NameClass('Hofstadter') ).value;

    return {
        id: this.id,
        name: this.name
    };
})());

Notice the (new (function SomeClass(){ ... })()); syntax. Using new like this allows you to use the this keyword inside of the closure. This is handy if you need to inherit properties from another class (AbstractSomeClass.call(this, 998);) -- However, you'll still need to reveal the properties that you would like to have public, e.g.:

return {
    id: this.id,
    name: this.name
};

Also notice that we assign this to thus -- which allows us to use the Parent-this inside of a subclass that has its own this scope (this.value = thus.name || name;)

Once again, these are just a few of the conventions and best practices that are suggested.

Answer 3

I like to use a mixture of the revealing module pattern with the singleton pattern so that I can keep structured code with the benefits of the module pattern:

var MyFunction = function(){

    var _ = {
       Init: function(){
          _.Config.foo = "hello world";
       },
       Config:{
          foo:null
       },
       ShowAlert:function(){
          alert(_.Config.foo);
       }
    }

    return {
        Init: _.Init,
        ShowAlert: _.ShowAlert
    };
}();

MyFunction.Init();
MyFunction.ShowAlert();

I've wrote more information on this on my blog:

http://curtistimson.co.uk/js/mixing-revealing-module-and-singleton-javascript-patterns/

Answer 4

To the code outside the module, it makes little difference. In all 3 cases in that article, the methods are called the same way. But the structure of the module itself is internally different.

Crockford's module pattern and what they call the "revealing module pattern" are pretty much the same thing, structurally. The only difference being that they assign the method to a local var first in order be more readable. But there really isn't anything special about it, and you have some examples right there in your link.

Answer 5

Just want to add: with this pattern it's good to pass global dependencies as arguments/params so that they are explicit. You don't have to do it but this makes it very clear what your module needs from the first glance. E.g.:

var myModule = (function ($, loadModule) {
  "use strict";
})(jQuery, load);

In this example, you can see right away in the 1st line that you module uses jQuery and some other module responsible for loading functionality.

Answer 6

DC = Douglas Crockford
RMP = Revealing Module Pattern

Difference between DC and RMP is mainly organizational/readable

Example is presented in the article itself? And what exactly are you asking because those things don't have anything to do with files but rather to closures.

You put everything in a closure (function) and expose only those part that you wish to be accessible. The difference between DC style and RMP is that in the first one functions are defined in different places while in the RMP they're always defined in the same place and then afterwards revealed in the public object literal.

So in the DC and RMP you have:

• closure that makes it possible to define private parts (variables and functions)
• private part
• public result that defines publicly visible functionality and variables (state)

These two patterns differ only in readability. In DC case you can't always know where certain functionality will be defined, but in the RMP you always know everything is in the private part.