JavaScript Module Pattern

Design patterns offer developers ways to solve technical problems in a reusable and elegant way. Probably module pattern is the most used and widely accepted JavaScript pattern and you’ve probably used it before without realizing it.

Basically by using this pattern you can modularize your application and you can provide public and private access to methods and variables. Yes its supports private data like other programming languages. In JavaScript we do not have access modifiers like public,private,protected. But JavaScript is an object-oriented language where objects inherit from other objects, this concept is known as prototypical inheritance.

Module pattern reduces the chances of collision with other code of the application by improving the reduction of globally scoped variables. So Less clutter in the global namespace. You can easily localize functions and variables through the closures.

JavaScript Module Pattern

In order to understand modular design pattern, you need to understand these concept of Self-executed function.Self-executed method is an anonymous method that is being called by itself only. Below example shows how we can write self-executed method.

In the above code, I have anonymous function that is declared and just after declaration it has been called by writing (); the moment we execute this JavaScript code, this method will get executed by itself only. Hence it is called a self-executed method.

Example of Module Pattern(MP)

Revealing Module Pattern(RMP)

Revealing Module Pattern also work like Module pattern but it’s syntax is declarative. For bigger JavaScript modules this pattern helps out a lot more, using a standard “Module Pattern” can get out of control depending on the syntax you go for and how you structure your code.

Definitive Module Pattern

I really like the Definitive module Pattern syntax, as it is very declarative than “Module Pattern(MP)” and “Revealing Module Pattern(RMP)”. We can easily see public and private functions, you can have multiple group for public and private functions and you can return them.

You can extend modules by augmenting. First, we import the module, then we add properties, then we export it. Here’s an example, augmenting our “module” from above:

After this code has run, our module will have gained new public methods named module.public_three and module.public_four. This augmentation file will also maintain its own private internal state and imports.

In the above code, it requires initial module creation to be first, as second module taking first module as argument. We can make second module to load it self without waiting for first module and vise versa. Both(each) file should have the following structure:

We can also create Sub-modules and override methods using this pattern.

I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.

I am Arjun from Hyderabad (India). I have been working as a PHP Developer from last 6+ years, and its my passion to learn new things and implement them as a practice. Aside from work, I likes gardening and spending time with pets.