JavaScript Facade Pattern

The Facade Pattern provides an interface that gives clients complex functionalities from different subsystems. It is a simple pattern and can be easily understood. It’s reliable and extremely useful in the most complex systems that deal with multi-layer architecture.

The purpose of the Façade pattern is to give developers a high-level interface that makes any subsystem easy to use for the user. Facades are used within frameworks. One of the most popular frameworks who used this pattern is Laravel in PHP.

When developers want to refactor, they can be messy when you have many legacy objects hanging around in your system. However, when you use the Façade pattern you can hide this code. Façade only exposes the necessary objects and hides the clutter and complexities of a system. This type of system is part of the structural pattern which gives interface to existing systems that can be easily used.

Literally speaking, Façade is the “face” of the building. When it comes to programming, the definition of terms aren’t that much different.

Let’s take example of a Façade pattern. Below, we have a Loan system that checks whether the person is applicable for a loan or not. The Façade contains different subsystems which are responsible for delegating the client’s request to appropriate subsystems.

The subsystems we have are the Bank, the CreditScore Checker, and the Balance Checker.

var Loan = function(name) {
   this.name = name;
}

// Loan prototype

Loan.prototype = {
   applyFor: function(amount) {
       //Accessing types of subsystem
       if (!new Bank().verify(this.name, amount)) {
           result = "denied";
       }else{
           result = "approved";
       }
       if (!new CreditScoreChecker().get(this.name)) {
           credit = "poor";
       }else{
           credit = "good";
       }
       if (!new Balance().check(this.name)) {
           balance = "low balance";
       }else{
           balance = "satisfactory balance";
       }
       return this.name + " has been " + result +
              " for a " + amount + " loan. With a "+credit+ " credit standing and having a " +balance;

   }

}

// Bank subsystem

var Bank = function() {
   this.verify = function(name, amount) {
       // complex logic ...
       if(amount < 9999){
            return true;
       }else
       {
           return false;
       }
   }
}

//Credit Score Checker subsystem

var CreditScoreChecker = function() {
   this.get = function(amount) {
       // Insert Credit Check code here
       return true;
   }
}

// Balance checker subsystem

var Balance = function() {
   this.check = function(amount) {
       // Insert code here to check balance  of user
       return true;
   }
}

function run() {
   var loan = new Loan("Joan Templeton");
   var loanResult1 = loan.applyFor(99);
   var loanResult2 = loan.applyFor(199);
   var loanResult3 = loan.applyFor(99999);
   console.log(loanResult1);
   console.log(loanResult2);
   console.log(loanResult3);
}


run();

When we run the program above, we created three instances of the loan. Depending on the functions you may have included inside your subsystems it will then return what your subsystem does back to the façade.

Here’s another example that you may already have familiar.

function addEvent(element, type, function) {
 if (window.addEventListener)
 {
   element.addEventListener(type, function, false);
 }
 else if (window.attachEvent)
 {
   element.attachEvent('on' + type, f function);
 }
 else
 {
   element['on' + type] = function;
 }
}

The example above demonstrates attaching an event listener. It may sound too intimidating for a beginner, but it’s not that difficult. From the example above we are adding an event listener to test multiple methods to make sure that the browser is actually using the right code.

Facades are not only used for complicated systems that have subsystems but can also be used to style HTML elements. Here’s an example that styles elements depending on their ID’s.

var element = document.getElementById('content');
element.style.color = '#FF0000';
element.style.fontSize = '28px';

var element1 = document.getElementById('header');
element1.style.color = '#800000';

var element2 = document.getElementById('sub-header');
element2.style.color = '#FA8072';

var element3 = document.getElementById('table');
element3.style.color = '#FFA07A';
setStyle(['header', 'sub-header', 'table'], 'color', 'red');

function setStyle(elements, prop, val) {
 for (var i = 0, len = elements.length-1; I < len; ++i) {
   document.getElementById(elements[i]).style[prop] = val;
 }
}

setStyle(['header'], 'position', 'absolute');
setStyle(['header'], 'top', '50px');
setStyle(['header'], 'left', '300px');

//Set CSS style for header
setCSS(['header'],
{
 position: 'absolute',
 top: '50px',
 left: '300px'
});
// Function that sets CSS to elements
function setCSS(element, styles) {
 for ( var prop in styles )
 {
   if (!styles.hasOwnProperty(prop)) continue;
    setStyle(element, prop, styles[prop]);
 }
}
// Set CSS style for different elements.
setCSS(['header', 'sub-header', 'table'], {
 color: 'white',
 background: 'black',
 fontSize: '16px',
 fontFamily: 'tahoma, times, serif'
});

The example above deals with the styling of HTML elements of a webpage. With it we have 3 subsystems namely the setCSS and setStyle functions that handles the checking of HTML elements then styling them afterwards.

In conclusion, Facades have a few disadvantages though none of them are performance issues. In order to get the best of this pattern, you need to be aware of the performance cost it involves and if they really are worth the need to be abstracted.