Require JS, which stands for Asynchronous Module Definition (AMD), loads modules into the document only when they are required. It offers a functional scope/modular approach to JavaScript coding, similar to the import keyword in Java or the Using keyword in C#.
Answering your question: Yes, you must reference the defined module in your require module to access its functionality as a functional parameter.
To illustrate, consider the code snippet below:
http://jsfiddle.net/NssGv/52/
define('a', {
add: function(x, y){
return console.log(x + y);
}
});
// Using the module (import)
require(['a'], function(a){
a.add(1, 2);
});
require(['a'], function(a){
a.add(4, 6);
});
In this context, a represents the module definition that is imported by other modules to utilize the add() method within it.
Require JS forms a module tree and stores all defined modules within this tree with their respective names. In this example, it's named a (referred to as a named module).
This tree can be accessed through the developer console using:
window.requirejs.s.contexts._.defined.a
The output would look like this:
https://i.sstatic.net/BgUhu.png
When loading an external modular file, Require JS creates a <script> tag and adds it to the <head> of the document.
In your example scenario:
Working plunker link : http://plnkr.co/edit/eNQkcfwftkYSY00wMPeI?p=preview
Upon executing the following entry point codes:
HTML:
<script src="xdomain/require.js" data-main="script"></script>
JS:
require(['module1'], function(temp_reference){
var m = new temp_reference();
console.log("created module: " + m.getName());
});
Require JS attaches two files - namely script.js (referenced in the script tag within HTML head as the main script file) and secondly, module1.js (referenced in script.js).
https://i.sstatic.net/WBuR0.png
After asynchronously attaching these files to the head, the code within the modules is executed, and the results are stored in the requirejs module tree as explained earlier.
Subsequently, these modules are injected into the referencing modules based on the dependencies provided in the form of an array to the require function.
require([{{YOUR_DEPENDENCIES}}], function({{INJECTED_REFERENCES}}){
--Your code--});
This demonstrates what you are attempting to achieve (not recommended):
http://plnkr.co/edit/5SYoNf8xNL1DcMfjuy0Y?p=preview
var myModule; //Global variable
require(['require', 'module1'], function(require){
myModule = require("module1");
var m = new myModule();
console.log("created module: " + m.getName());
});
You can also try this workaround:
http://plnkr.co/edit/Rr34HlhOiyja6XnwH8fw?p=preview
var myModule; //Global variable
require(['module1'], function(){
myModule = window.requirejs.s.contexts._.defined.module1;
var m = new myModule();
console.log("created module: " + m.getName());
});
In Conclusion
Require JS introduces a modularity aspect to Javascript development, enabling on-demand loading of scripts instead of preloading them into memory. This not only conserves memory but also enhances the speed of web applications. The structured nature of your code is automatically maintained, making it easier to manage.