3
    var AppName = (function (parent, $) {
      var controller = parent.controller = parent.controller || {};

      controller.index_page = function (parent) {
        var createPage = parent.createPage = parent.createPage || {};

        createPage.init = function () {
          alert('javascript initialized');
        };
        return createPage;
      }(controller);

      return parent;
    }(AppName || {}, jQuery));

Which type of Javascript Pattern is it? Where can I find more info about it?

Saanch
  • 1,814
  • 1
  • 24
  • 38
  • @Bergi before you add this as duplicate check the date on which the question is asked. – Saanch Oct 28 '14 at 08:46
  • How does the date matter for whether a question is about the same topic and the quality of the answers? – Bergi Oct 28 '14 at 13:02

4 Answers4

8

This is called the module pattern (at least thats the name I know it by).

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html

Some benefits of this pattern include:

  • Encapsulation, giving you the ability to define private fields in your closure.

  • You can make sure that the undefined value is always correct by specifying a third parameter of undefined and passing nothing to it (this is because undefined can actually be overwritten in javascript.)

  • Javascript namespacing for clearer separation of concerns.

And example of using the undefined method is this:

var AppName = (function (parent, $, undefined) { //add parameter for undefined here
  var controller = parent.controller = parent.controller || {};

  controller.index_page = function (parent) {
    var createPage = parent.createPage = parent.createPage || {};

    createPage.init = function () {
      alert('javascript initialized');
    };
    return createPage;
  }(controller);

  return parent;
}(AppName || {}, jQuery)); //do not define anything for the undefined parameter here.

The purpose of the parenthesis at the end of the function is to invoke your function immediately and form a closure, giving you access to public variables/functions whilst hiding private variables/functions. This is known as an immediately invoked function expression(IIFE) sometimes called an iffy.

BenM
  • 4,218
  • 2
  • 31
  • 58
  • 1
    Seems like the right link. +1 – Saanch Sep 17 '13 at 14:39
  • You can also add terms like self calling (immediately invoked) functions, defaulting with `||` – Ruan Mendes Sep 17 '13 at 14:39
  • @Saanch This pattern is extremely useful when implemented correctly and is a pattern that any serious javascript developer should research and employ where appropriate. – BenM Sep 17 '13 at 14:44
  • @BenM Is it better than the revealing module patter? – Saanch Sep 17 '13 at 14:47
  • @Saanch There are probably cases where it may be better but overall I would say no. The module patter allows techniques such as overwriting public functions. – BenM Sep 17 '13 at 14:49
3

It is called the module pattern.

In particular this is an immediately invoked function

var Module = (function(parameters) {

})(parameters)

I advice to have a look at the whole book by Addy Osmani, not just the section I linked above.

Alberto Zaccagni
  • 30,779
  • 11
  • 72
  • 106
1

Answers here are correct.

So this is great book where you can find a lot about patterns in javascript and also lot about module pattern:

http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjavascript

Entity Black
  • 3,401
  • 2
  • 23
  • 38
-1

Where can I find more info about it?

I saw this pattern in a book called Object-Oriented Javascript by Stoyan Stefanov.

http://www.amazon.co.uk/Object-Oriented-Javascript-Stoyan-Stefanov/dp/1847194141

Dave Haigh
  • 4,369
  • 5
  • 34
  • 56