top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

What is Modular Pattern in Javascript?

0 votes
306 views

What is Design Pattern?

Design patterns are advanced object-oriented solutions to commonly occurring software problems.  Patterns are about reusable designs and interactions of objects.  Each pattern has a name and becomes part of a vocabulary when discussing complex design solutions.

What is Modular Pattern?

The module pattern is a common JavaScript coding pattern. It’s generally well understood, but there are a number of advanced uses that have not gotten a lot of attention. In this article, I’ll review the basics and cover some truly remarkable advanced topics, including one which I think is original.

One limitation of the module pattern so far is that the entire module must be in one file. 

Example Code:

Basic Structure:

(function () { // Code goes here })();

var MODULE = (function () {
    var my = {},
        privateVariable = 1;

    function privateMethod() {
        // ...
    }

    my.moduleProperty = 1;
    my.moduleMethod = function () {
        // ...
    };

    return my;
}());

Video For Modular Pattern

References

http://www.adequatelygood.com/JavaScript-Module-Pattern-In-Depth.html
posted Sep 22, 2016 by Parampreet Kaur

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

Javascript Design Patterns?

Web developers frequently interact with design patterns, even unknowingly, when creating applications.

So what is Design Patterns?

Design patterns are advanced object-oriented solutions to commonly occurring software problems.  Patterns are about reusable designs and interactions of objects. 

List of Design Patterns

  • Constructor Pattern
  • Module Pattern
  • Revealing Module Pattern
  • Singleton Pattern
  • Observer Pattern
  • Mediator Pattern
  • Prototype Pattern
  • Command Pattern
  • Facade Pattern
  • Factory Pattern
  • Mixin Pattern
  • Decorator Pattern
  • Flyweight Pattern

Four Design Patterns Developers need to know

  1. Module
  2. Prototype
  3. Observer
  4. Singleton 

Module Pattern

Modules should be Immediately-Invoked-Function-Expressions (IIFE) to allow for private scopes – that is, a closure that protect variables and methods.

Example : 

(function() {

    // declare private variables and/or functions

    return {
      // declare public variables and/or functions
    }

})();

Prototype Pattern

The Prototype Pattern creates new objects, but rather than creating non-initialized objects it returns objects that are initialized with values it copied from a prototype - or sample - object. The Prototype pattern is also referred to as the Properties pattern.​

var class1= function() {
  this.var1    = 4;
  this.var2    = 4;
}

class1.prototype.method1 = function() {
  
}

class1.prototype.method2 = function() {
  
}

Observer Pattern

There are many times when one part of the application changes, other parts needs to be updated. In AngularJS, if the $scope object updates, an event can be triggered to notify another component. The observer pattern incorporates just that – if an object is modified it broadcasts to dependent objects that a change has occurred.​

Singleton  Pattern

A Singleton only allows for a single instantiation, but many instances of the same object. The Singleton restricts clients from creating multiple objects, after the first object created, it will return instances of itself.

Video for Design Patterns

https://www.youtube.com/watch?v=mG20htjwoBY&list=PLqEsQbKGIlmrpvQcnidKsVWSCV6vjAHN9​

 READ MORE
...