Tips for the Module Pattern

Question

I have a few questions about using the Module Pattern for JavaScript programming. I have seen guides on the pattern that utilize it in 2 different ways. The first is like this:

This method is from CSS Tricks, Module Pattern

var s,
NewsWidget = {

  settings: {
    numArticles: 5,
    articleList: $("#article-list"),
    moreButton: $("#more-button")
  },

  init: function() {
    // kick things off
    s = this.settings;
  }

};

The second method, I will use the same code but in a different way.

var s,
NewsWidget = (function(){

  // Any variables or functions in here are private
  var privateVar;


  // All variables or functions in returned object become public
  return {

  settings: {
    numArticles: 5,
    articleList: $("#article-list"),
    moreButton: $("#more-button")
  },

  init: function() {
    // kick things off
    s = this.settings;
  }

  }


}());

Now looking at these two examples, my assumption would be to only use the latter method because of the ability to use private variables due to closures..? Am I correct? The first method does not use a closure and therefore is in the global memory scope and cannot have private members. Why is it then, that CSS Tricks and other people use the first method as an example when it does not seem to have any real purpose?

Secondly, I am curious how the Module Pattern handles multiple objects of the same type? Unlike the Factory Pattern which is used to get any number of JavaScript Objects, the Module Pattern just executes the anonymous function once, therefore if I have a Module called BlogPost that defines all the attributes of a blog post, then how can I create multiple instances of this object?

Answer 1

my assumption would be to only use the latter method because of the ability to use private variables due to closures..? Am I correct?

Yes. If you need private variables.

The first method does not use a closure and therefore is in the global memory scope and cannot have private members.

Notice however that even in the second example, the s variable is unnecessarily global.

Why is it then, that CSS Tricks and other people use the first method as an example when it does not seem to have any real purpose?

For simplicity. Either when you don't have local variables around (because you don't need them, or you did model private things as properties), or when the author just doesn't care. Or didn't bother to write down the implicit IEFE.

Secondly, I am curious how the Module Pattern handles multiple objects of the same type?

It does not. Modules are singletons. They can have constructors or factories as fields, though, when you need to instantiate module-related objects. Still, there is only ever one (global) module object.

Answer 2

Your first example is not a Module Pattern, its a simple Object Literal initializer. Only the second example are a Module Pattern, first example doesn't give the possibility to define encapsulation of private member or function

Quoted from Learning JavaScript Design Patterns, this is the typical pattern(there is some variation):

In JavaScript, the Module pattern is used to further emulate the concept of classes in such a way that we're able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. What this results in is a reduction in the likelihood of our function names conflicting with other functions defined in additional scripts on the page.

var myNamespace = (function () {

  var myPrivateVar, myPrivateMethod;

  // A private counter variable
  myPrivateVar = 0;

  // A private function which logs any arguments
  myPrivateMethod = function( foo ) {
      console.log( foo );
  };

  return {

    // A public variable
    myPublicVar: "foo",

    // A public function utilizing privates
    myPublicFunction: function( bar ) {

      // Increment our private counter
      myPrivateVar++;

      // Call our private method using bar
      myPrivateMethod( bar );

    }
  };

})();