コンポーネント間の JavaScript コードの共有

JavaScript ライブラリの作成

1. 開発者コンソールで、[File (ファイル)] | [New (新規)] | [Static Resource (静的リソース)] をクリックします。
2. [Name (名前)] 項目に「counter」と入力します。
3. [MIME Type (MIME タイプ)] 項目で [text/javascript] を選択します。
4. [登録] をクリックします。
5. 次のコードを入力し、[File (ファイル)] | [Save (保存)] をクリックします。
   1window._counter = (function() {
   2    var value = 0; // private
   3
   4    return { //public API
   5        increment: function() {
   6            value = value + 1;
   7            return value;
   8        },
   9
   10        getValue: function() {
   11            return value;
   12        }
   13    };
   14}());

このコードでは、JavaScript モジュールパターンを使用しています。このクロージャベースのパターンを使用すると、value 変数はライブラリに非公開のままになります。ライブラリを使用するコンポーネントは、value には直接アクセスできません。

コードで最も重要なのは、次の行です。

1window._counter = (function() {

Locker Service で明示的に有効になっている JavaScript の厳格モードの要件として、_counter を window オブジェクトに関連付ける必要があります。window._counter はグローバル宣言のように見えますが、_counter が Locker Service のセキュアな window オブジェクトに関連付けられているため、これはグローバル変数ではなく、名前空間変数です。

window._counter の代わりに _counter を使用すると、_counter は利用できません。アクセスしようとすると、次のようなエラーが表示されます。

1Action failed: ... [_counter is not defined]

JavaScript ライブラリの使用

シンプルな UI がある MyCounter コンポーネントのライブラリを使用して、counter メソッドを演習してみましょう。

1<!--c:MyCounter-->
2<aura:component access="global">
3    <ltng:require scripts="{!$Resource.counter}"
4                  afterScriptsLoaded="{!c.getValue}"/>
5    <aura:attribute name="value" type="Integer"/>
6    
7    <h1>MyCounter</h1>
8    <p>{!v.value}</p>
9    <lightning:button label="Get Value" onclick="{!c.getValue}"/>
10    <lightning:button label="Increment" onclick="{!c.increment}"/>
11</aura:component>

<ltng:require> タグがカウンタライブラリを読み込み、ライブラリが読み込まれた後、コンポーネントのクライアント側コントローラで getValue アクションを呼び出します。

クライアント側コントローラを次に示します。

1/* MyCounterController.js */
2({
3    getValue : function(component, event, helper) {
4        component.set("v.value", _counter.getValue());
5    },
6
7    increment : function(component, event, helper) {
8        component.set("v.value", _counter.increment());
9    }
10})

window. プレフィックスを入力しなくても、window オブジェクトのプロパティにアクセスできます。したがって、_counter.getValue() を window._counter.getValue() の短縮として使用できます。

ボタンをクリックして、値を取得または増分します。

カウンタ値はカウンタライブラリを使用するコンポーネント間で共有されます。各コンポーネントに個別のカウンタが必要な場合は、カウンタの実装を変更できます。コンポーネントごとのコードおよび詳細は、ブログ投稿「Modularizing Code in Lightning Components」を参照してください。