Encapsulation with Module pattern
I was thinking for quite a while to write an article on module pattern. I love module pattern. It’s so simple and powerful. It enhances modularity and provide a way for encapsulation is javascript. You must be thinking why a shopping mall with a cart and ofcourse a child is the cover image 😄. Because we will be creating a shopping cart using module pattern.
First of all, lets understand Encapsulation. It is one of the object oriented principles that most of the modern languages respects. It is combination of two notions:
- Keeping data and functionality as a single unit.
- Having the ability to restrict the access to some object from outside world.
Javascript is a functional scoped language without our new const and let which are block scoped. So any thing written in a function as a variable will not be accessible from the world outside it. This gives us the leverage to implement encapsulation. So lets start building a shopping cart using module pattern
Module pattern usually contains some private data which is not directly exposed to outside. Although some methods are exposed to make the changes with data. In this way the module has full control on what to be changed and what not to be changed.
Our Cart module will look like this:
Here we can see that Our cart have two private data points. First one is price which will be indication of total Price at any given moment. Second one is items which will be responsible to contain active items in cart. Cart also takes one argument which is the item constructor. In our case it is Item constructor which we have defined above it.
Now we need to provide a method that allows addition of any number of items and removal of items(in out example assuming only one item or all can be removed at a time).These methods will be exposed as we want cart consumer to add and remove items.
ifItemExists function is used to check whether the item with the same id is already there in the present cart’s items array. If it’s there function return index else -1. UpdatePrice method is responsible for updating the price whenever addition or removal of items happen from the cart. here is the definition of those two methods. UpdatePrice should be private as we don’t want any other function outside Cart make changes to our price in an unwanted way. ifItemExists is also for Cart internal use only, exposing it also does not make sense in current set of assumptions
We are almost done. Till now we have decided on the private methods and public methods.
We are strictly disallowing outside Cart world to change the value of price and items directly. And at the same time , we are allowing outside world to make changes by our own defined and exposed ApiS. we have full control on our Cart components. This way we can be sure, that our cart module will work as expected without giving any surprises. we are fulfilling both the conditions for encapsulation
Now we will create a new cart and add items
This way one can expose number of methods to the end consumer of cart API and still have a full control on the implementation of the Cart. Here is the full implementation of the Cart. For now i have consoled log different Cart state values
This approach can be used while writing modular code.Many libraries uses this pattern. Even other design pattern like Singleton Pattern uses module pattern. Addy Osmani’s design pattern online book is great reference. One must go through it once. Here is the link.
https://addyosmani.com/resources/essentialjsdesignpatterns/book/#revealingmodulepatternjavascript .
I am big fan of webpack 😺. I love the way they have implemented IIFE(Immediately Invoked function execution) to bundle the code. I feel the pattern used is very much modular patternish 👲.
Let me know whether you liked the article by hitting applause or comments. I will be happy to discuss more interesting design patterns, may be we can discuss how webpack works. If you find any problems with the article please let me know. Thanks everyone
