Which JavaScript design pattern is this?

Question

I'm not sure which JavaScript design pattern I'm following. Can someone please help shed some light on it?

    var masonrySupport = ({
      large__videos__support: function() {
        $('.masonry-container .largeRec').find('.itemMasVideo').parent().addClass('item_largeRec_video_height');
      },
      smallRec__videos__support: function() {
        $('.masonry-container .smallRec').find('.itemMasVideo').parent().addClass('item_smallRec_video_height');
      },    
      init: function() {
        this.large__videos__support(),
        this.smallRec__videos__support()
      }
    })
    masonrySupport.init();

this is not any special design pattern. what i see here, is some Javascript & jQuery working together in a scope (the first & last lines of the code are the scope containment) — geevee, Apr 16 '15 at 07:14
Without the closure that was included in the original question, this is just a JavaScript object literal with some methods. Together with the closure, it forms the Revealing Module Pattern. This part is what reveals the public API of the module. — Drenmi, Apr 16 '15 at 07:35

score 1 · Answer 1 · answered Apr 16 '15 at 07:22

There are two "patterns" I can see here.

Using self invoking closure to isolate scope.
```
(function($) {
    // Code here
})(jQuery);
```
Helps mitigate the creation of accidental global variables.
(Kind) the module pattern, where you create an object with a bunch of methods on it, and call init(). I prefer to self invoking closure version of it. The Revealing Module Pattern.

Endre Simo · Answer 2 · 2015-04-16T07:40:16.317

I don't see this as a design pattern in the strict sense of terminology. May be associated with the module pattern, but it needs to return something to be accessible outside of it's inner scope. It's only a self executing function invoked inside a scope which in this case is jQuery. This is used in many jquery plugins. You isolate the scope of the self executing function to a specific - lets say - domain.

This can be found on the first declaration:

(function($) {
  ...
})(jQuery);

By closuring the function you are guarding the functions and variables declared inside the scope to a specific domain, in this way eliminating the possibility to accidentally override or redeclare some function or variable declared in the global scope. It's a common practice to isolate the scope from the global object which in Javascript world is the Object or on DOM context is window.

And it continues with the self executing function:

$(function() {
  ...
})

My Bad.. Iam asking about the inner content. now i have updated the question plz have a look — Developer, Apr 16 '15 at 07:32

score 1 · Answer 3 · answered Apr 16 '15 at 07:32

The pattern you are using is called the Module Pattern, and it is one of the most important patterns in JavaScript. You outer wrapper creates an anonymous scope that provides privacy and state to the code that you place inside it.

(function($) {
  // Everything in here is private and stateful
  // and we can access jQuery through the imported $ variable
})(jQuery);

To your scope, you're also passing the global jQuery object. This method is called global import, and is faster and clearer than accessing the implied global from within your scope.

Inside your scope, you are creating an API that is accessible through the masonrySupport variable, making it a Revealing Module Pattern.

score 0 · Answer 4 · edited May 23 '17 at 12:28

Effectively what is being done here is, once the document loads, execute two functions - 'large__videos__support' and 'smallRec__videos__support.'

Let's understand how it is being achieved,

Firstly it is Immediately-Invoked Function Expression (IIFE) in action. This pattern is often used when trying to avoid polluting the global namespace, because all the variables used in the function are not visible outside its scope.

(function($) { ... })(jQuery);
Short hand of $( document ).ready() is being used. More here.

$(function() { ... });
Thirdly, you are initializing one object being referenced by 'masonrySupport' and calling its method 'init.'

score 0 · Answer 5 · answered Apr 16 '15 at 09:08

In JS, this is called and Immediately Invoked Function Expression (IIFE), and is known as the module pattern.

However in jQuery this pattern is used to create jQuery Plugins. I advise you to follow the best practices to make it work.

Check that jsfiddle to get you started.

Below the JS part:

(function( $ ) {

$.fn.masonrySupport = function( option ) {

    if ( option === "large") {
       this.find('div.itemMasVideo').parent().addClass('item_largeRec_video_height');
    }

    if ( option === "small" ) {
        this.find('div.itemMasVideo').parent().addClass('item_smallRec_video_height');
    }
     return this;
};

}( jQuery ));

$( 'div.masonry-container.largeRec' ).masonrySupport( "large" );

Which JavaScript design pattern is this?

5 Answers5