Creating an instance of multiple javascript modules

Question

This related to javascript code. My application has many sub applications that are sometimes used more then once on a page. An example would be an application that allows the user to search for some data and displaying the search results. This application my be used in multiple places on a page to search for different types of data. Each sub application typically includes many javascript modules each in a separate file. I have experienced with many different module patterns to try to create a separate instance of multiple modules/files but with no success. There is much advice online how to create multiple instances of objects, using factory pattern etc but I have not been able to make it work with the name space structure and module pattern my application. See example below.

The question is how can you create multiple independent instances of SubAppA including all its sub modules.

(New file)

var MainApp     = MainApp || {};
MainApp.SubAppA = MainApp.SubAppA || {};

MainApp.SubAppA.Config = (function () {
    
    function A () { ... };
    function B () { ... };
    
    return {
        A : A,
        B : B
    }
})();

(New file)

var MainApp     = MainApp || {};
MainApp.SubAppA = MainApp.SubAppA || {};

MainApp.SubAppA.GetData = (function () {
    
    function A () { ... };
    function B () { ... };
    
    return {
        A : A,
        B : B
    }
})();

(New file)

var MainApp     = MainApp || {};
MainApp.SubAppA = MainApp.SubAppA || {};

MainApp.SubAppA.DisplayData = (function () {
    
    etc.....

Many thanks in advance

--- Additional information after solution proposed by MikeM -----

Thanks MikeM, you answer gave me a better understanding but when trying to implement it using my existing name space structure, I can't get the modules to communicate with each other. I tried the following:

//Solution $S.AS - New file
var $S  = $S || {};
$S.AS   = $S.AS || {};

$S.AS.DataStore = function () {
    var _SomeVar    = "Default";
    
    function SetVar (Data) {
        _SomeVar = Data;
    };
    function GetVar () {
        return _SomeVar;
    };
    
    return {
        SetVar : SetVar,
        GetVar : GetVar
    }
};

//Solution $S.AS - New file
var $S  = $S || {};
$S.AS   = $S.AS || {};

$S.AS.ManageData = function () {
    
    function StoreData (Data) {
        console.log($S.AS.DataStore);  //outputs f ()
        //Does now work since DataStore is now a function
        //$S.AS.DataStore.SetVar(Data);  
        $S.AS.DataStore().SetVar(Data);  
    };
    
    function DisplayData () {  
        //Does now work since DataStore is now a function
        //var SomeVar = $S.AS.DataStore.GetVar();  
        //Does not work, still outputs "Default"
        var SomeVar = $S.AS.DataStore().GetVar();
        console.log(SomeVar);
    };
    
    return {
        StoreData : StoreData,
        DisplayData : DisplayData
    }
};

//Solution $S.AS - New file - The contructor function for AS
var MainApp     = MainApp || {};
MainApp.S       = MainApp.S || {};
MainApp.S.AS    = MainApp.S.AS || {};

MainApp.S.AS = function () {
    
    this.DataStore      = $S.AS.DataStore();
    this.ManageData     = $S.AS.ManageData();
    //additional modules
    
};

//Main/Page specific code - creating the different instances
MainApp.S.AS_1 = new MainApp.S.AS();
MainApp.S.AS_2 = new MainApp.S.AS();

//Attemps to store and retrieve data

//Stores AAA in the DataStore module
MainApp.S.AS_1.ManageData.StoreData("AAA");
//Stores BBB in the DataStore module
MainApp.S.AS_2.ManageData.StoreData("BBB");
//Not working, ouputs: "Default" (Desired result is "AAA")
MainApp.S.AS_1.ManageData.DisplayData();
//Not working, ouputs: "Default" (Desired result is "BBB");
MainApp.S.AS_2.ManageData.DisplayData();

I think I understand why "Default" is output (the call is made to the original variable stored at page load) but not how to fix it.
For context, I have a custom php script that concatenates all the JS files required for a page and then adds them as a single tag to the page. I thought this would speed up script loading, in particular since most of my pages will have 50+ JS files/modules. A typical Name space structure for a page will look as follows (but with a lot more modules):

MainApp = {
    //Page specific or utility modules
    ModuleA : [ func / module ],
    ModuleB : [ func / module ],
    ModuleC : [ func / module ],
    ModuleD : [ func / module ],
    //Resulable applications consisting of multiple modules
    SubAppA : {
        ModuleA : [ func / module ],
        ModuleB : [ func / module ],
        ModuleC : [ func / module ],
        ModuleD : [ func / module ],
    },
    SubAppB : {
        ModuleA : [ func / module ],
        ModuleB : [ func / module ],
        ModuleC : [ func / module ],
        ModuleD : [ func / module ],
    }
}

I was hoping that I can somehow preserver this structure to avoid the risk of conflicting module names. I am happy to change the structure of the modules themselves (e.g. from IIFE to something else) to get an solution to the question. Thanks

MikeM · Accepted Answer

A simple example of one way of creating "multiple independent instances of SubAppA including all its sub modules", where the modules are defined in multiple files:

// test.js
import { MainApp } from './mainApp.js';
import { SubApp } from './subApp.js';

MainApp.SubAppA = new SubApp();
console.log(MainApp.SubAppA.Config.A());    // 1

MainApp.SubAppB = new SubApp();
console.log(MainApp.SubAppB.Config.B());    // -1


// subApp.js
import { config } from './config.js';
import { getData } from './getData.js';

export function SubApp() {
  this.Config = config();
  this.GetData = getData();
}


// config.js
export function config() {
  let counter = 0;
  function A() { return ++counter };
  function B() { return --counter };
  return {
    A: A,
    B: B
  }
}

As a single file:

const MainApp = {};

function SubApp() {
  this.Config = config();
  this.GetData = getData();
}

function config() {
  let counter = 0;
  function A() { return ++counter };
  function B() { return --counter };
  return {
    A: A,
    B: B
  }
}

function getData() {
  let counter = 0;
  function A() { return ++counter };
  function B() { return --counter };
  return {
    A: A,
    B: B
  }
}

MainApp.SubAppA = new SubApp();
console.log(MainApp.SubAppA.Config.A());    // 1
console.log(MainApp.SubAppA.GetData.A());   // 1
console.log(MainApp.SubAppA.Config.B());    // 0

MainApp.SubAppB = new SubApp();
console.log(MainApp.SubAppB.Config.B());    // -1
console.log(MainApp.SubAppB.GetData.B());   // -1
console.log(MainApp.SubAppB.Config.A());    // 0

The important difference with your own code is that I have replaced the Immediately-Invoked Function Expressions (IIFE) with normal functions that create closures every time a SubApp is created.

Added in response to your edit:

For the code you added in your edit to work, you need to make sure that you pass a reference to the parent object when you create a new ManageData object:

$S.AS.ManageData = function (owner) {

    function StoreData (Data) {  
        owner.DataStore.SetVar(Data);  
    };
    
    function DisplayData () {  
        var SomeVar = owner.DataStore.GetVar();
        console.log(SomeVar);
    };
    
    return {
        StoreData : StoreData,
        DisplayData : DisplayData
    }
};

// ...

MainApp.S.AS = function () {    
    this.DataStore      = $S.AS.DataStore();
    this.ManageData     = $S.AS.ManageData(this);  
};

I encourage you to use ES modules to structure your code and avoid naming collisions. A single file can be created from a module bundler such as roll-up.js.

Creating an instance of multiple javascript modules

Answers (2)

Related Questions