CODEWITHSUNDEEP
javascriptjquery
mans
mans

Reputation: 18168

What is this pattern in javaScript and where can I read more about it

I have codes similar to the following:

 (function(MyHelper, $, undefined){

var selectedClass = "selected";

MyHelper.setImageSelector = function(selector) {
    var container = $(selector);

    setSelected(container, container.find("input:radio:checked"));
    container.find("input:radio").hide().click(function() {
        setSelected(container, $(this));
    });
};

MyHelper.enableIeFix = function(selector) { 
    var container = $(selector);
    container.find("img").click(function() {
        $("#" + $(this).parents("label").attr("for")).click();
    });
};

function setSelected(container, selected) {
    container.find("label").removeClass(selectedClass);
    selected.siblings("label").addClass(selectedClass);
}

 }( window.MyHelper = window.MyHelper || {}, $))

I am new in JS and I am wondering if this is a specific pattern in javascript programming. I specfically wondering what is the meaning of last line:

   }( window.MyHelper = window.MyHelper || {}, $))

Is It Module pattern?

Upvotes: 5

Views: 440

Answers (4)

Joseph
Joseph

Reputation: 119847

Yes, this is basically a module pattern.

A summary of how modules are created using the module pattern is:

  • Create a module scope, typically by using an immediately invoked function expression (IIFE) to create a closure. This creates your "private space" for your module, avoid global pollution and keep your code modular and isolated.

  • Have an namespace to attach your public methods. Developers have different methods of doing this "attachment" procedure. Some developers "hand-in" objects to the module, while others "return" an object to be stored in a variable. Either way, it's the same.

In this case, it's the "hand-in" version of the module pattern

(function(MyHelper, $, undefined){

    var selectedClass = "selected";

    MyHelper.setImageSelector = function(selector) {};

    function setSelected(container, selected) {}

}(window.MyHelper = window.MyHelper || {}, $))

In the last line, it immediately calls your function and it sends these arguments

(window.MyHelper = window.MyHelper || {}, $)

It's similar to doing this, but without the use of function names:

function anonymous(MyHelper, $, undefined){...}
anonymous(window.MyHelper = window.MyHelper || {}, $);

  • The first argument, window.MyHelper = window.MyHelper || {} is a combination of operations. Whatever that operation returns, provides the MyHelper argument in the module.

    • The || is a "default" operation. If the value left of the || is "falsy", then the value assumed by the expression "defaults" to the one at the right. So in your code, if window.MyHelper does not exist, then it defaults to an object {}.

    • With the "default" operation, window.MyHelper will be assigned either an existing window.MyHelper or if none exists, a new Object instance {}

    • Assignment operations in JavaScript do return values. The value returned by the assignment operation is the value that was assigned to the variable. This also makes it possible for that entire operation provide a value to the module.

  • the second argument is whatever $ is (I assume jQuery?)

  • the third argument is not passed, and from the inside, it's undefined. it's done this way since as far as i know, the undefined is mutable. so to have a purely undefined undefined, we send it nothing, and thus the variable undefined is undefined.

What this code does:

MyHelper.setImageSelector = function(selector) {};

was add to MyHelper the method setImageSelector and since your MyHelper is from the outside, anyone who uses it now has the MyHelper.setImageSelector() method.

the other functions and variables inside the IFFE that are not augmented to MyHelper are what you call "private" members. JavaScript has a functional scope, meaning that it creates a new scope every function declaration. In simple speak, what is inside can see the outside, but the outside cannot see inside. This is also one way of not polluting the global scope with a lot of functions and variables

Upvotes: 4

Ahamed Mustafa M
Ahamed Mustafa M

Reputation: 3139

The anonymous function is immediately called/invoked after its definition like

(
 function(arg1,arg2){
 }
)(xarg1,xarg2);

The last line invokes the defined anonymous function. The arguments to your anonymous function are

  1. window.MyHelper = window.MyHelper || {} /*MyHelper global object or an empty object if it is undefined */
  2. $ /* jQuery or Prototype object. With jquery it is usually "jQuery" global object to avaoid conflict with other libraries */

The third parameter of the anonymous function "undefined" ensures that no one overrides or shadows actual undefined.

This defines a safe self invoking function in javascript.

Upvotes: 0

benvds
benvds

Reputation: 3726

It extends the global MyHelper object when exists, otherwise create a new one. The Jquery global is passed and undefined is stated as argument so it can be compressed with js minimizers.

Looks pretty much like module pattern to me. Also see: http://addyosmani.com/resources/essentialjsdesignpatterns/book/#modulepatternjquery

Upvotes: 0

Mathew Thompson
Mathew Thompson

Reputation: 56429

This is a JavaScript class. You can read more about them here:

http://javascript.about.com/library/bltut35.htm

Upvotes: 1

Related Questions