Post

Module Design Pattern

This a great way to keep project code cleanly separated and organized by different categories. It would help a lot a team of developers to browse between a bunch of files in order to reach a specific funcionality to add or improve.

In the book mentioned 4 options for implementing modules:

  • Object Literal Notation.
  • The Module Pattern.
  • AMD modules (It’ll be covered in the next post).
  • CommonJs modules (It’ll be covered in the next post).

We will to look a those 4 deeply in the next sections:

Object Literals

It’s an object described as a simple set of comma-separated names and values pairs enclosed in curly braces ({}). See below example:

See the Pen Module Pattern by Rafael Montero (@rmontero90) on CodePen.

As you see, it will keep the code functionality wrapped by an object separating the context from the global scope.


Module Pattern

It is defined to provide private and public encapsulation for objects, functions, classes or variables. It wraps them protecting pieces from leaking into the global scope or accidentally colliding with another developer’s interface.

With this pattern, it will allow us to expose only the public API keeping everything else within the closure private.

Here we have an example for this:

In the future posts, I’ll talk about the AMD modules and CommonJs modules, since there a lot to cover in detail.

This post is licensed under CC BY 4.0 by the author.