AUIスクリプトを使用したモジュールのロード
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、こちらまでご連絡ください。
aui：script タグは、ページ上のスクリプトタグにJavaScriptをロードするJSPタグであり、特定のリソースが実行前に確実にロードされるようにします。
aui：scriptを使用する
aui：script タグは、次のオプションをサポートしています。
require： Liferay AMD Module LoaderロードするにはAMDモジュールが必要です。use：YUIローダーを介してロードされるAlloyUI / YUIモジュールを使用します。位置：スクリプトタグがページに配置される位置。 可能なオプションはインラインまたはautoです。サンドボックス：匿名関数でスクリプトタグをラップするかどうか。設定した場合、に加えて、ラッピングに加えて、jQueryとアンダースコアに$と_が定義されます。
次に、ES2015および Metal.js モジュールをロードする方法を学習できます。
ES2015およびMetal.jsモジュールのロード
aui：script を使用して、次のようにES2015およびMetal.jsモジュールをロードできます。
<aui:script require="metal-clipboard/src/Clipboard">
new metalClipboardSrcClipboard.default();
</aui:script>
または、次の例に示すように、モジュール名の後にvariableName として `を追加して、モジュールの変数を指定できます。
new myModule.default();
`これにより、登録された Clipboard.js の依存関係が解決され、すべての依存関係が満たされ、要求されたモジュールが安全に実行できるようになるまで順番にロードされます。
ブラウザでは、 aui：script 以下に示す完全なHTMLに変換されます。
<script type="text/javascript">
Liferay.Loader.require("metal-clipboard/src/Clipboard",
function(metalClipboardSrcClipboard) {
(function() {
new metalClipboardSrcClipboard.default();
})()
}, function(error) {
console.error(error)
});
</script>
次に、AlloyUIモジュールをロードする方法を学習できます。
AlloyUIモジュールのロード
使用 属性を使用してAlloyUI / YUIモジュールをロードできます。
<aui:script use="aui-base">
A.one('#someNodeId').on(
'click',
function(event) {
alert('Thank you for clicking.')
}
);
</aui:script>
これにより、 aui-base AlloyUIコンポーネントがロードされ、 aui：script内のコードで使用できるようになります。
ブラウザでは、 aui：script 以下に示す完全なHTMLに変換されます。
<script type="text/javascript">
AUI().use("aui-base",
function(A){
A.one('#someNodeId').on(
'click',
function(event) {
alert('Thank you for clicking.')
}
);
}
);
</script>
次に、AlloyUIモジュールとES2015およびMetal.jsモジュールをロードする方法を学習できます。
AlloyUIモジュールとES2015およびMetal.jsモジュールを一緒にロードする
aui：scriptES2015モジュールまたはMetal.jsモジュールとともにAUIモジュールをロードすることもできます。 aui：script タグは、同じ構成で が と が 属性を使用することをサポートしていません。 でも心配しないで。 aui：script’s require 属性を使用してES2015およびMetal.jsモジュールをロードし、スクリプト内で AUI（）。use（） 関数を使用してAUIモジュールをロードできます。 以下に設定例を示します。
<aui:script require="path-to/metal/module">
AUI().use(
'liferay-aui-module',
function(A) {
let var = pathToMetalModule.default;
}
);
</aui:script>
これで、 aui：script tag \を使用してモジュールをロードする方法がわかりました。