Dojo module loading in general

Question

Coming from Java/C# I struggle to understand what that actually means for me as a developer (I'm thinking too much object-oriented).

Suppose there are two html files that use the same Dojo module via require() in a script tag like so:

<script type="text/javascript">
require(["some/module"],    
   function(someModule) {    
      ...
   }            
);
</script>

I understand that require() loads all the given modules before calling the callback method. But, is the module loaded for each and every require() where it is defined? So in the sample above is some/module loaded once and then shared between the two HTMLs or is it loaded twice (i.e. loaded for every require where it is listed in the requirements list)?

If the module is loaded only once, can I share information between the two callbacks then? In case it is loaded twice, how can I share information between those two callbacks then?

The official documentation says "The global function define allows you to register a module with the loader. ". Does that mean that defines are something like static classes/methods?

Answer 1

If you load the module twice in the same window, it will only load the module once and return the same object when you request it a second time.

So, if you're having two seperate pages, then it will have two windows which will mean that it will load the module two times. If you want to share information, you will have to store it somewhere (the web is stateless), you could use a back-end service + database, or you could use the HTML5 localStorage API or the IndexedDB (for example).

If you don't want that, you can always use single page applications. This means that you will load multiple pages in one window using JavaScript (asynchronous pages).

---

About your last question... with define() you define modules. A module can be a simple object (which would be similar to static classes since you don't have to instantiate), but a module can also be a prototype, which means you will be able to create instances, for example:

define([], function() {
  return {
    "foo": function() {
      console.log("bar");
    }
  };
});

This will return the same single object every time you need it. You can see it as a static class or a singleton. If you require it twice, then it will return the same object.

However, you could also write something like this:

define([], function() {
  return function() {
    this.foo = function() {
      console.log("bar");
    };
  };
});

Which means that you're returning a prototype. Using it requires you to instantiate it, for example:

require(["my/Module"], function(Module) {
  new Module().foo();
});

Prototyping is a basic feature of JavaScript, but in Dojo there's a module that does that for you, called dojo/_base/declare. You will often see things like this:

define(["dojo/_base/declare"], function(declare) {
  return declare([], {
    foo: function() {
      console.log("bar");
    }
  });
});

In this case, you will have to load it similarly to a prototype (using the new keyword).

You can find a demo of all this on Plunker.

---

You might ask, how can you tell the difference between a singleton/static class module, and a prototypal module... well, there's a common naming convention to it. When your module starts with a capital letter (for example dijit/layout/ContentPane, dojo/dnd/Moveable, ...) then it usually means the module requires instances. When the module starts with a lowercase letter, it's a static class/singleton (for example dojo/_base/declare, dijit/registry)

Answer 2

1) dojo require, loads the module once and then if you called it again require() will simply return if the package is already loaded. so the request will be called once and it will also call any dependencies once.

but all that if you are in the same HTML page if you leave the page and call the same module in a different page then it will be called from the server. you can also use cache in your config settings so things will be cached in the browser and the file will or not by setting the cacheBust to true if you want a fresh copy or false if you want things to be cached.

2) if you are in the same html page and domain, the module didn't change the module will be the same and you can share values and any change you make you can get it from anywhere unless you call a new instance. but that is not possible between different html pages.

3) not it is not like a static classes or methods from what I understand static methods A static class can be used as a convenient container for sets of methods that just operate on input parameters and do not have to get or set any internal instance fields.. dojo work differently it is a reference for an object if you did it in that way :

define(function(){
    var privateValue = 0;
    return {
        increment: function(){
            privateValue++;
        },

        decrement: function(){
            privateValue--;
        },

        getValue: function(){
            return privateValue;
        }
    };
});

This means every bit of code loads that module will reference the same object in memory so the value will be the same through out the use of that module.

of course that is my understanding please feel free to tell me where I am wrong.