The Liferay AMD Module Loader is a JavaScript module loader.
What is a JavaScript module?
A JavaScript module encapsulates a piece of code into a useful unit that exports its capability/value. This makes it easy for other modules to explicitly require this piece of code. Structuring an application this way makes it easier to see the broader scope, easier to find what you’re looking for, and keeps related pieces close together. This way of coding is a specification for the JavaScript language called Asynchronous Module Definition, or AMD.
Purpose of Liferay AMD Module Loader
A normal web page usually loads JavaScript files via HTML script
tags. That’s
fine for small websites, but when developing large scale web applications, a
more robust organization and loader is needed. A module loader allows an
application to load dependencies easily by specifying a string that identifies
the module name.
Now that you know the purpose of the Liferay AMD Module Loader, you can learn how to define modules next.
Defining a Module
The Liferay AMD Module loader works with JavaScript modules that are in the AMD format. Here is a basic example of the definition of an AMD module:
Liferay.Loader.define('my-dialog', ['my-node', 'my-plugin-base'], function(myNode, myPluginBase) {
return {
log: function(text) {
console.log('module my-dialog: ' + text);
}
};
});
You can specify to load the module when another module is triggered or when a given condition is met:
Liferay.Loader.define('my-dialog', ['my-node', 'my-plugin-base'], function(myNode, myPluginBase) {
return {
log: function(text) {
console.log('module my-dialog: ' + text);
}
};
}, {
condition: {
trigger: 'my-test',
test: function() {
var el = document.createElement('input');
return ('placeholder' in el);
}
},
path: 'my-dialog.js'
});
The configuration above specifies that this module should be loaded
automatically, if the developer requests the my-test
module under the given
condition.
Next you can learn how to load a module.
Loading a Module
Loading a module is as easy as passing the module name to the Liferay.Loader.require
method.
The example below loads a module called my-dialog
:
Liferay.Loader.require('my-dialog', function(myDialog) {
// your code here
}, function(error) {
console.error(error);
});
Next you can learn how to map module names.
Mapping Module Names
You can map module names to specific versions or other naming conventions. The
example below maps the liferay
and liferay2
modules to liferay@1.0.0
:
__CONFIG__.maps = {
'liferay': 'liferay@1.0.0',
'liferay2': 'liferay@1.0.0'
};
Mapping a module changes its name to the value specified in the map. Take this require value for example:
Liferay.Loader.require('liferay/html/js/autocomplete'...)
Under the hood, this is the same as the value shown below:
Liferay.Loader.require('liferay@1.0.0/html/js/autocomplete'...)
Using Liferay AMD Module Loader in Liferay DXP
Tools, like the Liferay AMD Module Config Generator, have been integrated into Liferay DXP to make it easy for developers to create and load modules. Here’s how it works:
-
The Module Config Generator scans your code and looks for AMD module
Liferay.Loader.define(...)
statements. -
It then names the module if it is not named already.
-
It uses that information, along with the listed dependencies, as well as any other configurations specified, to create a
config.json
file. Below is an example of a generatedconfig.json
file:{ "frontend-js-web@1.0.0/html/js/parser": { "dependencies": [] }, "frontend-js-web@1.0.0/html/js/list-display": { "dependencies": ["exports"] }, "frontend-js-web@1.0.0/html/js/autocomplete": { "dependencies": ["exports", "./parser", "./list-display"] } }
This configuration object tells the loader which modules are available, where they are, and what dependencies they require.
Now you know all about the Liferay AMD Module Loader!