RequireJS - Enabling the loading of multiple module instances

Question

RequireJS - Enabling the loading of multiple module instances

I am working on a custom RequireJS plugin that needs to create a new object instance every time it is called.

For illustration purposes, consider the following:

define("loader", {
  load: function(name, req, onload, config) {
    var instance = GlobalGetter.get(name);
    instance.id = new Date().getTime() * Math.random();
    onload(instance);
  }
});

require(["loader!goo"], function(instance) {
  console.log(instance.id); // 12345
});

require(["loader!goo"], function(instance) {
  console.log(instance.id); // 12345 SAME!
});

In this example, the "goo" module is only loaded once, causing both require callbacks to receive the same object instance. While this behavior makes sense in the context of RequireJS, it does not align with my requirements.

Is there a way to configure a plugin so that it always returns a fresh result? Although RequireJS generally meets my needs, I'm looking for a solution to address this specific scenario. Are there any official or unofficial methods to achieve the desired outcome?

Thank you.

javascript requirejs

Answer 1

Answer №1

If you want to see my method in action, you don't even have to use a plugin. Simply define a constructor function like the one below:

const customConstructor = {
  'createInstance': function(){
    let obj = new Object(); // initialize the necessary object here
    obj.id = 42; // add some dynamic id creation logic here
    return obj;
  }
};

Then, when you make the actual call, it will look something like this:

require(["loader!bar"], function(constructor) {
  const newInstance = constructor.createInstance();
  console.log(newInstance.id);
});

Answer 2

If you want to see my method in action, you don't even have to use a plugin. Simply define a constructor function like the one below:

const customConstructor = {
  'createInstance': function(){
    let obj = new Object(); // initialize the necessary object here
    obj.id = 42; // add some dynamic id creation logic here
    return obj;
  }
};

Then, when you make the actual call, it will look something like this:

require(["loader!bar"], function(constructor) {
  const newInstance = constructor.createInstance();
  console.log(newInstance.id);
});

Answer 3

Answer №2

After some experimentation, I've managed to find a workaround that involves using RequireJS plugins in a non-standard way.

While this approach deviates from the typical usage of plugins and is not recommended, I was able to achieve multiple instantiations with the following implementation:

define("customLoader", {
  load: function(name, req, onload, config) {
    // Removing any query parameters
    name = name.substring(0, name.indexOf("?"));

    // Repeating desired logic each time
    var fn = Something.GetClass(name);
    var instance = new fn();
    instance.id = Math.random();
    onload(instance);
  },
  normalize: function(name, normalize) {
    return name + "?" + Math.random();
  }
});

require("customLoader!goo", function(instance) {
  console.log(instance.id); // 123
});

require("customLoader!goo", function(instance) {
  console.log(instance.id); // 456
});

Answer 4

After some experimentation, I've managed to find a workaround that involves using RequireJS plugins in a non-standard way.

While this approach deviates from the typical usage of plugins and is not recommended, I was able to achieve multiple instantiations with the following implementation:

define("customLoader", {
  load: function(name, req, onload, config) {
    // Removing any query parameters
    name = name.substring(0, name.indexOf("?"));

    // Repeating desired logic each time
    var fn = Something.GetClass(name);
    var instance = new fn();
    instance.id = Math.random();
    onload(instance);
  },
  normalize: function(name, normalize) {
    return name + "?" + Math.random();
  }
});

require("customLoader!goo", function(instance) {
  console.log(instance.id); // 123
});

require("customLoader!goo", function(instance) {
  console.log(instance.id); // 456
});

RequireJS - Enabling the loading of multiple module instances

Answer №1

Answer №2

Similar questions

Implementing Winston logging into a React JS project

Exploring the differences between utilizing Node JS Express for server-side development and displaying console output to

Displaying a loading progress bar while the website is being loaded using Javascript

The imported `theme` as `theme` was not visible in the file './theme'. The only possible export in the file is `default`

Discovering a particular element involves iterating through the results returned by the findElements method in JavaScript

Error: No route found at this location

Dropdown element vanishes upon selecting in HTML

Mastering VSCode IntelliSense: Unleashing the Power of Type Declarations

Utilizing modal dialogs in HTML and navigating back to the previous page

Error Message: SCRIPT5 - Permission Denied When Trying to Open PDF with Javascript

Removing a selected row from a data table using an HTTP request in Angular 2

The onChange event does not function properly on formatted Mui sliders

What is the purpose of using Array.prototype.slice.call(nodeList) for handling DOM elements?

Ways to achieve 8 columns in a single row using Javascript and Bootstrap

Do all descendants consistently trigger rerenders?

Angular Selectable Drop-down Menu

I am facing an issue with the DOM object in my ejs template when used under the script tag. How can I resolve this problem?

Utilize Javascript to conceal images

Managing browser navigation within a web application

Deploying a static website using Node.JS without relying on any frameworks