Post
Ask Question

How to Use Modular Pattern in Javascript

Let's simplify the concept of the modular pattern in JavaScript into more straightforward terms.

What is the Modular Pattern?

Imagine you have a big, complicated Lego set. If you dump all the Lego pieces into one giant pile, it's going to be really tough to find what you need to build anything. This is similar to writing all your JavaScript code in one big file or a few large chunks. It gets messy and hard to manage.

The modular pattern is like organizing your Lego pieces into smaller, labeled boxes (modules), where each box has pieces for a specific part of your Lego set. In JavaScript, a module is just a piece of code that deals with a particular task. This way, you can work on one part of your project without messing up the others.

Why Use Modules?

  1. Easier to Handle: Just like it's easier to find the pieces you need from labeled boxes, it's easier to manage your code when it's split into modules.
  2. Reuse Stuff: If you have a box of Lego wheels, you can use them to build many different vehicles. Similarly, if you have a module that does a specific task, you can use it in different parts of your app or even in other projects.
  3. Less Mess: If you want to change how a piece of your project works, you only need to deal with the small module where it's located, not the entire codebase.
  4. Team Work: If you're building a big project with others, everyone can work on their own module, just like each person could build a section of the Lego set. This way, you don't get in each other's way.

How Do You Do It?

Before, JavaScript didn't have a built-in way to work with modules, so developers had to be creative, using patterns like IIFE (immediately invoked function expression). Think of this as building your own little boxes for Lego pieces before you start building.

But now, JavaScript has added features that let you easily create and use modules with import and export commands. It's like JavaScript finally gave you the boxes and labels for your Lego pieces!

Old-School Way (Before ES6)

You'd wrap your code in a special function to keep it separate from other code, like making a custom box for your Lego pieces.

const myModule = (() => {
    let privateVariable = 'Hello World';

    function privateMethod() {
        console.log(privateVariable);
    }

    return {
        publicMethod() {
            privateMethod();
        }
    };
})();

myModule.publicMethod(); // Outputs: 'Hello World'

You can now directly say which parts of your code are for sharing (export) and which parts you want to bring into another file (import), just like having ready-made boxes and choosing which ones to open.

// file: myModule.js

let privateVariable = 'Hello World';

function privateMethod() {
    console.log(privateVariable);
}

export function publicMethod() {
    privateMethod();
}

import { publicMethod } from './myModule.js';

publicMethod(); // Outputs: 'Hello World'

Wrapping Up

Using the modular pattern in JavaScript is like organizing your code into neat, manageable boxes, making it easier to build, manage, and share your projects, just like a well-organized Lego set. Whether you're working alone or with a team, keeping your code modular will save you lots of headaches down the road.


Similar Articles