Javascript - How to create a javascript global library (with the namespace pattern)

About

namespace pattern is when libraries made themselves available from everywhere using a single global variable

From everywhere, means that:

• the variable is stored in the global scope
• it does not need any form of import

They are also known as:

• Global library
• Global module.

Basically, a library is just a object stored in a global variable but you can add scope functionality thanks to function. The below steps show you step by step how a library is build and even how plugin can be added.

Steps

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:

Library using this pattern

The below library uses the following global variable

• jQuery or $ for Jquery
• _ for lodash