Loading AMD Modules in Liferay

Modularized JavaScript code is a specification for the JavaScript language called Asynchronous Module Definition, or AMD. The Liferay AMD Module Loader is the native loader that you can use to load your AMD modules. This tutorial covers how to use the Liferay AMD Module Loader.

Configuring Your AMD Module for the Loader

Follow these steps to prepare your module:

  1. Wrap your AMD module code with the Liferay.Loader.define() method, such as the one shown below:

    Liferay.Loader.define('my-dialog', ['my-node', 'my-plugin-base'], 
    function(myNode, myPluginBase) {
       return {
           log: function(text) {
               console.log('module my-dialog: ' + text);
           }
       };
    });
    
  2. You can modify the configuration to load the module when another module is triggered or when a condition is met. The configuration below specifies that this module should be loaded if the developer requests the my-test module:

    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 Liferay AMD Loader uses the definition, along with the listed dependencies, as well as any other configurations specified, to create a config.json file. This configuration object tells the loader which modules are available, where they are located, and what dependencies they require. Below is an example of a generated config.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"]
        }
    }
    
  3. Load your module in your scripts. Pass 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);
    });
    

Loading Modules with AUI Script

Using npm in Your Portlets

« Introduction to JavaScript Module LoadersUsing External JavaScript Libraries »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています