Modules

Author: zeptobook.com Published: 2024-06-03

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 and TDD.

The module pattern is one of the amazing design patterns and Id like to share some use cases and differences in the pattern and why theyre 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. Lets 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.

function code

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 dont 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.

Heres an example

function YAHOO now have access to globals jQuery as and YAHOO in this code jQuery YAHOO

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.

var myModule function use strict

Public methods in the module

Lets 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.

var jsModule function use strict return publicMethod function console logHello ZeptoBook jsModule

jsModule publicMethod outputs Hello ZeptoBook

Private methods in the module

There is no private keyword in Javascript but we can create private methods and properties in our module.

var jsModule function var privateMethod0 function return publicMethod1 function publicMethod2 function jsModule

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 modules private methods. Here is the trick you can invoke private methods via public methods. Here is an example

var jsModule function var privateMethod function message console logmessage var publicMethod function text privateMethodtext return publicMethod publicMethod jsModule

jsModule publicMethodHello Zeptobook

Extending our module

You can extend your existing module without touching it code. Here is an example.

var jsModule function var privateMethod function message console logmessage var publicMethod function text privateMethodtext return publicMethod publicMethod jsModule

Here we are extending our jsModule var ModuleTwo function Module Module extendedMethod function console logFrom ModuleTwo return Module jsModule ModuleTwo jsModule extendedMethod

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

developer mozilla org en US search qdesign patterns