Module Design Pattern in JavaScript…
Hello, welcome to my new article on JavaScript design patterns. Today I will be talking about the Module Design Pattern and its use in JavaScript or more precisely we will see how we can implement the Module Design Pattern in a simple way. Going forward we will see the implementation, some of the ES6 features, use of closures and immediately invoked function expressions.
Module Design Pattern
The module design pattern is the most relevant an widely used design pattern in JavaScript development and it provides code modularization and encapsulation. Mostly the module objects will be a singleton and it does allow us to write well-structured code and using this pattern we can achieve public and private access level within the code.
Immediately Executed Function Expressions (IIFE)
This is the term used to define the process of executing an anonymous function immediately after defining it. Take a look at the below-given code.
Modules and Public Access
We are going to use the above-said IIF expression to create modules. As you can see, the IIF expression here returns an object and we can use this object as the module. Inside this object, we can define properties and functions which will accessible from outside. Or we can say that the properties and functions of this object or the module are publically accessible.
Now we can use the controller as a module and we can access the public properties and functions.
Closures
One of the most beautiful and powerful features of JavaScript is Closure. A closure is simply a bridge and is used to access outer function scope from an inner function. The closure will be created as soon as we define a new function and to use this we have to define a new inner function. Once a new inner function is created they can access the properties of the outer function using the closure.
Here we are using one outer function and one inner function. As soon as we define the inner function, the outer functions scope will be accessible to the inner function via the closure. Here we are passing ‘5’ to the outer function, it will be stored in and this value will be available to the inner function. Here the return value is a function and so we can call it with a value and it will then get incremented by ‘5’.
Modules and Private Access
Data privacy in modules is achieved using IIF expressions and closures together. Take a look at the below-given code.
Okay, let me explain what is happening here. We are creating an IIF expression which returns an object and it contains a public method called send() and it is used to send a text message over a network. The send() function has access to two function expression variables defined in its outer function scope. This two can be accessed only from the public send() function and not from anywhere else. In simple terms, we can say that the access to processMessage() and sendPackets() function are restricted and is more like private properties. This privacy is achieved in the module pattern by using closures and IIF expressions.
Conclusion
Okay, so that’s it. Hope you understood the basics of the JavaScript module pattern and few of its use cases and how it is done using the JavaScript features. We can use the same design concept in many scenarios including JavaScript library development, application programming, etc. All we have to do is to create modules for each of the tasks and implement the communication between each of the module.
Got any suggestions for the above article. Please post it in the comment section.
Thank You
Seyed F (Seyed Sahil)
Originally published at http://sydlabz.wordpress.com on June 17, 2019.
