This content originally appeared on DEV Community and was authored by DEV Community
Please do not confuse this with modules that you import or export!
Key background knowledge :
- use of _ for private methods/properties
- IIFE
- factory functions (see part1)
What is the javascript module pattern?
The module is very similar to a factory function where instead you make lots of objects, the module is wrapped in an IIFE and is given closure.
So how do we create a module?
(function() {
// Any code here
// All function and variables are scoped to this function
})();
This function is immediately invoked(called)
Lets create a usuable module.
const jsModule = (function() {
const publicMethod = () => console.log('Hello World!');
return {publicMethod}
})();
jsModule.publicMethod(); // outputs 'Hello World'
Even though it is immediately invoked we can still access its methods (via the return)
However a real good use of these IIFE type modules is make methods private.
const myModule = (function() {
const _privateProperty = 'Hello World';
const _privateMethod =() => console.log(_privateProperty);
const publicMethod = () =>_privateMethod()
return {publicMethod}
})();
myModule.publicMethod(); // outputs 'Hello World'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure
Even though the public method uses private methods we can any methods we return.
However see what happens when we try to access private properties and methods!
This gives us a way to create private methods and state!
The revealing module pattern
This is a popular way to use modules to organise code and to reveal properties and methods we want to make public
Example of the revealing module pattern:
const myModule = (function() {
const _privateProperty = 'Hello World, I am a very private property';
const publicProperty = 'I am a public property';
const _privateMethod =() => console.log(_privateProperty)
const publicMethod = ()=> _privateMethod()
return {publicMethod,publicProperty};
})();
myModule.publicMethod(); // 'Hello World....'
console.log(myModule.publicProperty); // 'I am a public property'
console.log(myModule._privateProperty); // is undefined protected by the module closure
myModule._privateMethod(); // is TypeError protected by the module closure
You can have as many private/public methods you want.
So when do we use these modules?
Well if you were making a game, you would use the module pattern to load up anything you only wanted loading up once. For example any battle rules , the board game etc..
Then you would use factory functions/constructors for anything you need to make various copies of, say the players or the battles
Another added benefit
Since all the methods are nicely organised in the IIFE, they are also namespaced too.
For example if you had a method called battle, to call 'battle' you would have to use start.battle() or boss.battle() etc so these methods would not get confused
Conclusion
The module pattern is another great tool to have in your organising javascript box
Immediately invoked when loading (good for API!)
We can still access any methods that are returned in the module
Can be used to make method/properties private
Helps with the naming of methods/functions
This content originally appeared on DEV Community and was authored by DEV Community
DEV Community | Sciencx (2022-03-09T20:14:28+00:00) The javascript module pattern. Retrieved from https://www.scien.cx/2022/03/09/the-javascript-module-pattern-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.