I am curious about whether the TypeScript singleton class, used as an MVC model object in my Angular application within one browser tab, would be different from or the same as the singleton loaded into another tab within the same browser instance.
The setup is somewhat like this (a similar concept could be implemented in JavaScript):
[TypeScript]
class Budget {
readonly name : string;
private static instance: Budget;
static getInstance(name? : string) {
if (!this.instance) {
name = name ? name : "no name";
this.instance = new Budget(name);
}
return this.instance;
}
private constructor(name : string) {
this.name = name;
}
}
In my project, the main "Budget" object is designed as a singleton to simplify access to various data elements, class instances, and more. This Budget object consists of approximately 40 other component classes that need to interact with each other, and the Budget object provides a way for each class instance to access the necessary components. The Singleton pattern allows me to write code like Budget.getInstance().getAccount("foo") without having to keep a reference to a Budget instance in every sub-class. This approach significantly simplifies my coding process.
My concern is whether a user could open two separate budgets in different tabs of a browser (for example, Chrome), each referring to distinct instances of the Budget object with unique names. (The singleton instance is populated with data by a rails backend based on the selected budget for editing.) I can envision scenarios where it would be advantageous for a user to work with two different budgets simultaneously in the same browser window, each in its own tab. However, this would not be feasible if there is only one accessible Budget object shared across all tabs in the browser.