How to create a javascript global library (namespace pattern)

Basic: Object

The basic implementation of a globale namespace pattern is to use directly an object as global variable

Example:

• A minimal library

let myLibrary = {
   "hello": function(to) {
       if(to===undefined){
          to = this.user;
       }
       console.log(`Hello ${to} !`); 
   },
   "user":"Anonym"
}

• Usage:

myLibrary.hello();
myLibrary.hello("World");

With scope: IIFE Function

In this global namespace pattern:

• the scope is created with an Immediately invoked function expression (IIFE)
• where the global variable is passed as argument

The scope of the variable or function is:

• public if you add it to the global variable
• private otherwise (ie they stay in the scope of the IIFE function)

Example

• The creation of the global variable (on the browser, window)

window.libraryName = window.libraryName || {};

• The library definition that:
  • is done inside a IIFE in order to scope the variable.
  • gets the global variable as argument.

(function( globalVariable ) {
   
    // Public Property because created on the global variable
    globalVariable.greeting = "Hello"; 
    
    // Private Property (scoped to stay inside the IIFE)
    let defaultName= "Anonym";

    // Public Method  because attached on the global variable
    globalVariable.hello = function( to ) {
        helloWorld(to);
    };

    // Private Method
    function helloWorld( to ) {
        if (to===undefined ){
          to = defaultName;
        }
       console.log( `${globalVariable.greeting} ${to.trim()} !`);
    }
})( window.libraryName = window.libraryName || {} );

• Usage:

libraryName.hello();
libraryName.hello("You");
libraryName.greeting = "Hoi";
libraryName.hello("You");

• Result:

With Plugin

Note that passing the below argument construction to the IIFE permits to build up the library (global variable) by applying several IIFE to the global variable (ie library)

window.libraryName = window.libraryName || {}

This is the basis for plugin building.

• If we want to extend the above library.
• We create the same immediately invoked function expression (IIFE) construct
• With the function / variable that we want to add
• And add the IIFE just after the first one.

Example:

• A plugin that adds the highFiveHello function. This function just adds a high five characters

(function( globalVariable ) {
   
    globalVariable.highFiveHello = function( to ) {
       if (to===undefined ){
          to = "Anonym High Five";
          // Using
          // to = defaultName; 
          // will not work because the `defaultName` variable was private.
        }
        console.log( `${globalVariable.greeting} ${to.trim()} \u270B! `);
    };

}( window.libraryName = window.libraryName || {}) );

• When we use it, the Hello greeting from the first library definition is used.

libraryName.highFiveHello();
libraryName.highFiveHello("You");

• Result: