One of the most commonly used JavaScript design patterns is a Module design pattern. It is easy to use module design pattern and it creates encapsulation of our code. Modules are commonly used as singleton style objects where only one instance exists. The Module Pattern is great for services and testing/TDD.
The module pattern is one of the amazing design patterns and I’d like to share some use cases and differences in the pattern, and why they’re important.
Creating a module in JavaScript
Closures are one of the best and most powerful features of JavaScript. Closures help keep any state or privacy within that function. Let’s start by using an anonymous closure. An anonymous closure is just functions that wrap our code and create an enclosed scope around it.
There is a well-known design pattern in JavaScript, which is called IIFE (Immediately Invoked Function Expression). It is a JavaScript function that runs as soon as it is defined.
So, here is an example of this function.
|
|
We simply create an anonymous function and execute it immediately. All of the code that runs inside the function lives in a closure., which provides privacy and state throughout the lifetime of our application.
Global Import
There is a known feature of JavaScript, which is called Implied Globals. Any variable you don’t declare becomes a property of the global object in JavaScript.
Luckily, our anonymous function provides an easy alternate. By passing globals as parameters to our anonymous function, we import them into our code, which is both cleaner and faster than implied globals.
Here’s an example:
|
|
Exporting our module
In order to export our module, you can simply assign this a variable that we can use to call our module methods.
|
|
Public methods in the module
Let’s first start with how to create public methods in our module. To expose our public method outside our module we return an object with the methods defined.
|
|
Private methods in the module
There is no private keyword in Javascript, but we can create private methods and properties in our module.
|
|
Here our privateMethod0 is private. Because our private methods are not returned they are not available outside of our module.
Accessing private methods
What if I need to access module’s private methods. Here is the trick: you can invoke private methods via public methods. Here is an example:
|
|
Extending our module
You can extend your existing module without touching it code. Here is an example.
|
|
In the above example, we have passed our jsModule to ModuleTwo, and added a new method extendedMethod to this. It will now return the object with this new method.
In the last, you can now access extendedMethod from our original module of jsModule.
Private Naming Convention
As there is no private keyword in JavaScript, it is considered a best practice to use _ (underscore) before any private methods and properties.
References
https://developer.mozilla.org/en-US/search?q=design+patterns
Further Reading
Understand Shallow And Deep Copy In JavaScript