app.js

/********************************************************************************************
 * What we'll learn
 * ----------------
 * 1. How does the Module Pattern work?
 * 2. More about private and public data, data encapsulation & separation of concerns.
 */

/**
 * Module Pattern is extremely famous when we try to build apps using JavaScript, that's 
 * because, we want to keep pieces of code that are related to one another together inside of
 * separate and independent organized units, known as modules. Each of these modules will
 * have variables and functions which are private & they're only accessible inside of the 
 * module. This is for data privacy (achieved through the use of IIFE), and we would want
 * this behavious so that no other code can override or mess with our code/data. This ensures
 * the safety of our data and code. Besides these private variables & methods, we are also 
 * going to have public variables and methods, i.e., we expose these variables and methods to
 * the public, so that other functions and modules in our own app, can access and use them.
 * 
 * This whole idea of maintaining data privacy, is called as data encapsulation.
 * Data Encapsulation allows us to hide the implementation details of a specific module from
 * the outside scope, so that we only expose a public interface, which is sometimes called
 * as an API (Application Programmer Interface). Using data encapsulation is extremely 
 * important when bulding complex applications.
 * 
 * To use the Module Pattern in JS, we need to use 2 very important concepts in JS, which are
 *  1. Closures
 *  2. IIFE's
 * 
 * We'll have 3 modules in our code. All of these modules handle different things, because
 * we want to separate our concerns. All the UI is handled by UI Controller. Everything
 * related to data, i.e., the budget data, is handled by the budgetController, and finally,
 * all the concerns related to events happening inside our app, will be handled by the 
 * appController, which is simply known as controller. This is separation of concerns.
 */

// budgetController variable will be an IIFE. The IIFE will return an object, which is for 
// public use, i.e., we can access the data inside the budgetController only by using the
// object returned by the IIFE that executes only once. 
var budgetController = (function() {    // Code related to handling the budget (data) logic
    // example code for demonstration
    var x = 25;
    var add = function(n) {
        return x + n;
    };
    return {
        publicAdd: function(num) {
            return add(num);
        }
    };
})();

/**
 * In the console, we cannot access the variable x using the budgetController variable,
 * because of IIFEs, the variable 'x' is not accessible to the outside scope.
 * 
 * Try the folowing in the console:
 *  budgetController.x;         // undefined
 *  budgetController.add(30);   // Uncaught TypeError: budgetController.add is not a function
 *                              // so and so line#
 *  budgetController.publicAdd(30); // 55
 * 
 * All of this happens due to the powerful features of JS, like IIFE & Closures.
 */

// controller for the UI
var UIController = (function(){     

    // Code to manipulate the UI

})();

// controller to handle the events from the browser. This controller has to use both the 
// budgetController and the UIController, and connect them to handle the events generated by
// the user, properly
var controller = (function(budgetCtrl, UICtrl){ // Code related to handling events 

    // example code to show the connectivity between the controller modules
    var z = budgetCtrl.publicAdd(40);
    return {
        publicShow: function() {
            return z;
        }
    };
    
})(budgetController, UIController);