What type of Javascript Pattern is it?

Question

    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?

@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

BenM · Accepted Answer · 2013-09-17T18:49:08.553

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.

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

score 3 · Answer 2 · answered Sep 17 '13 at 14:39

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.

answered Sep 17 '13 at 14:39

Alberto Zaccagni

30,779
11
72
106

score 1 · Answer 3 · answered Sep 17 '13 at 14:45

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

answered Sep 17 '13 at 14:45

Entity Black

3,401
2
23
38

Dave Haigh · Answer 4 · 2013-09-17T14:49:11.803

-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

edited Sep 17 '13 at 14:49

answered Sep 17 '13 at 14:38

Dave Haigh

4,369
5
34
56

Note exactly correct answer. – Saanch Sep 17 '13 at 14:39
no its not..... but it answers one of your questions – Dave Haigh Sep 17 '13 at 14:40

What type of Javascript Pattern is it?

4 Answers4