JavaScript

Module Pattern

🚀🔥🚀

 

JavaScript Module Pattern

 
  • Scoping in JavaScript
  • What is the Module Pattern?
  • Declare a Module in 2 ways
  • How to use a Module in another Module?
  • Why use the Module Pattern?
  • Sources!! 💻
 

Scoping in JavaScript

 

What is a scope?

 
(function() {
    // this is a scope
})();

function util() {
    // this is a scope
}

var util = function() {
    // this is a scope
}

A scope in JavaScript is created by a Function

 

Global scope

 
var global = 'Global scope';

// or

window.global = 'Global scope';

Local scope

 
(function() {
    var local = 'Local scope';
})();

function simpleFunction() {
    var local = 'Local scope';
}

Public & private

 
var globalVar = 'Global Variable';

(function() {
    console.log('globalVar: ', globalVar);
    var localVar = 'Local scope';
})();

console.log('localVar: ', localVar);
console.log('globalVar: ', globalVar);

What wil be the error?

 

Public & private

 
var globalVar = 'Global Variable';

(function() {
    console.log('globalVar: ', globalVar);
    var localVar = 'Local scope';
})();

console.log('localVar: ', localVar); // undefined
console.log('globalVar: ', globalVar); // 'Global Variable'

// Uncaught ReferenceError: localVar is not defined

The answer is:

 

Public & private (advanced)

 
var globalVar = 'Global Variable';

(function() {
    var localVar = 'Local scope';

    (function() {
        var childVar = 'Child scope';

        console.log('childVar: ', childVar); // 'Child scope'
        console.log('localVar: ', localVar); // 'Local scope'
        console.log('globalVar: ', globalVar); // 'Global Variable'
    })();

    console.log('childVar: ', childVar); // undefined
    console.log('localVar: ', localVar); // 'Local scope'
    console.log('globalVar: ', globalVar); // 'Global Variable'

})();

console.log('childVar: ', childVar); // undefined
console.log('localVar: ', localVar); // undefined
console.log('globalVar: ', globalVar); // 'Global Variable'

What is the Module Pattern?

 

What is the Module Pattern?

 

It is a JavaScript Design pattern that gives more structure (with private and public methods) to a JavaScript application.

 

JavaScript Module

 
var Module = (function () {
  // code
})();

Private & Public Methods

 
var Module = (function () {

    var _privateMethod = function() {
        // Private method
    }

    return {
        publicMethod: function() {
            // Public method
        }
    }
    
})();

Call private methods

 
var Module = (function () {

    var _privateMethod = function() {
        // Private method
    }
    
})();

Module._privateMethod(); // undefined

Call public methods

 
var Module = (function () {

    // ... methods

    return {
        publicMethod: function() {
            // Public method
            return 'JavaScript Module Pattern';
        }
    }
    
})();

Module.publicMethod(); // 'JavaScript Module Pattern'

Use private methods

 
var Module = (function () {

    var _privateMethod = function() {
        // Private method
        return 'JavaScript Module Pattern';
    }

    return {
        publicMethod: function() {
            // Public method
            return _privateMethod();
        }
    }
    
})();

Module.publicMethod(); // 'JavaScript Module Pattern'

Declare a module in 2 ways

 

Locally scoped Object Literal

 
var Module = (function () {
    var localObject = {};

    var _privateMethod = function() {
        // Private method
    }

    localObject.publicMethod = function() {
        // Public method
    }

    return localObject;
    
})();

Revealing Module Pattern

 
var Module = (function () {

    var methodOne = function() {
    }

    var methodTwo = function() {
    }

    return {
        publicMethodOne: methodOne,
        publicMethodTwo: methodTwo
    }
    
})();

How to use a Module in another Module?

 
var Module = (function () {
    var localObject = {};

    var _privateMethod = function() {
        // Private method
    }

    localObject.publicMethod = function() {
        // Public method
    }

    return localObject;
    
})();
var Module2 = (function (Module) {
    var localObject = {};

    var _privateMethod = function() {
        // Private method
        Module._privateMethod();
    }

    localObject.publicMethod = function() {
        // Public method
    }

    return localObject;
    
})(Module);

Why use the Module Pattern?

 

Why use the Module Pattern?

 
  • It gives (more) structure

  • Prevent overriding of variable

  • Make code (more) readable

  • Makes multiple JavaScript files easier

  • Anymore?? 🚀

 

Sources

 

JavaScript Module Pattern

By Raymon Schouwenaar

JavaScript Module Pattern

  • 717

More from Raymon Schouwenaar