LiferayでAMDモジュールをロードする
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
モジュール化されたJavaScriptコードは、非同期モジュール定義（AMD）と呼ばれるJavaScript言語の仕様です。 Liferay AMD Module Loader は、AMDモジュールのロードに使用できるネイティブローダーです。 このチュートリアルでは、Liferay AMD Module Loaderの使用方法について説明します。
ローダー用のAMDモジュールの構成
次の手順に従って、モジュールを準備します。
-
AMDモジュールコードを、以下に示すような
Liferay.Loader.define（）メソッドでラップします。Liferay.Loader.define('my-dialog', ['my-node', 'my-plugin-base'], function(myNode, myPluginBase) { return { log: function(text) { console.log('module my-dialog: ' + text); } }; }); -
別のモジュールがトリガーされたとき、または条件が満たされたときにモジュールをロードするように構成を変更できます。 以下の構成では、開発者が
my-testモジュールを要求した場合にこのモジュールをロードするように指定しています。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' });Liferay AMD Loaderは、定義と、リストされた依存関係、および指定された他の構成を使用して、
config.jsonファイルを作成します。 この構成オブジェクトは、使用可能なモジュール、モジュールの場所、必要な依存関係をローダーに伝えます。 以下は、生成されたconfig.jsonファイルの例です。{ "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"] } } -
モジュールをスクリプトにロードします。 モジュール名を
Liferay.Loader.requireメソッドに渡します。 以下の例は、my-dialogというモジュールをロードします。Liferay.Loader.require('my-dialog', function(myDialog) { // your code here }, function(error) { console.error(error); });