Design patterns javascript: The pattern of templates

24/06/2021

Design patterns are patterns that can be commonly applied in software development. For something to be considered a standard it must meet three basic criteria: it must be a proven solution, it is easily reusable and it can be used in many different systems. The pattern of models that we will talk about today is no exception to this rule.

Introduction

The module pattern aims in javascript to simulate the concept of encapsulation of typed programming languages ​​being javascript itself an untyped programming language. What is encapsulation?

Encapsulation is a programming language mechanism to restrict access to some components of objects, hiding the data of a class and making it available only through methods. - devmedia


In javascript this is translated by creating public and/or private functions and variables inside an object, making their names "hidden" from the rest of the code.

1 - Closure

A closure is a function that "remembers" the environment - or lexical scope - in which it was created. - developer.mozilla.org


Thanks to this concept, javascript can simulate public and private variables and functions that exist in other programming languages.

The example given on the mozilla.org website about clousure is something like :

function makeFunc() {

var name = "Mozilla";

function displayName() {

alert(name);

}

return displayName;

}

var myFunc = makeFunc();

myFunc();


In this example, what's happening is that the myFunc function created from makeFunc() has become a "closure" or closure of the function it was derived from. So everything that existed inside the initial function, including variables and functions, is inside the closure. it is with this concept that we can "imitate" private variables and thus use this pattern.

2 - Another practical example

var myNamespace = (function () {
var myPrivateVar, myPrivateMethod;
// A private counter variable
myPrivateVar = 0;
// A private function which logs any arguments
myPrivateMethod = function( foo ) {
console.log( foo );
};
return {
// A public variable
myPublicVar: "foo",
// A public function utilizing privates
myPublicFunction: function( bar ) {
// Increment our private counter
myPrivateVar++;
// Call our private method using bar
myPrivateMethod( bar );
}
}; })();


In this other example from the book "Learning JavaScript Design Patterns A Book by Addy Osmani" we can see variables and functions considered private and public.

3 - Advantages

  • Ease for people who are migrating from some object-oriented language to get familiar with javascript.
  • Code organization.
  • privacy: Where outsiders are not able to access the values ​​of their private part

4- Disadvantages

  • As the accesses to public/private items are done differently, so if you want to change the visibility of an item you will potentially have to change more than one place in the code.
  • It is quite complicated to create automated tests with this pattern, due to the nature of the functions and private variables.

If this article was helpful to you, consider subscribing to our newsletter. It takes less than a minute and you'll be kept up to date with articles like this and more. We just need your email: