JavaScriptを使用してWebアプリケーションを開発するためのモジュール式アプローチ：AMDおよびRequireJS

JavaScriptでモジュール構造のアプリケーションを開発すると、2つの問題が発生します。

• アプリケーションのさまざまな部分の依存関係の説明と満足度、サーバー側で依存関係の接続を整理する必要性。
• グローバルスコープへの変数のエクスポートとそれらの衝突。

これらのタスクは両方とも、 非同期モジュール定義アプローチを使用して解決されます。 つまり、define関数を使用してモジュールを記述し、requireを使用してモジュールを接続します。 現時点では、AMDを実装するツールがいくつかあります。 私は彼らとRequireJSで知り合いになり、モジュールの依存関係を記述するのがどれほど便利でシンプルであるかに驚きました。 簡単な例を使用して、その仕組みを説明します。

ブートローダー接続

次のディレクトリ構造があります。

siteroot/ js/ app.js require.js jquery.js mymodule.js index.html
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

開始するには、index.htmlでローダーを接続します。 RequireJSを使用します。

<script data-main="/js/app" src="/js/require.js"></script>







すばらしい、これが必要な唯一のスクリプトタグです。 JSの接続に関する残りの作業は、ブートローダーによって行われます。 データ属性で指定されたファイル（RequireJSでは.js拡張子は常に省略されます）は、アプリケーションの一種のエントリポイントになります。 その中で、requireを使用して必要なモジュールを接続し、意図したアクションを完了することができます。

モジュールの説明

/js/module.js



を使用して/js/module.js



モジュールを/js/module.js



します。

 define( 'mymodule', ['jquery'], function( $ ){ return { foo : 'bar' }; } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最初の引数は文字列で、モジュールの名前はオプションです。 2番目の引数は、文字列の配列の形式で依存関係を渡しますが、これもオプションです。 3番目の引数はファクトリ関数で、すべての依存関係が満たされた後にのみ実行されます（リストされたファイルをロードします）。 依存関係によってエクスポートされた変数は、引数として渡されます。 そして、モジュール自体を返す必要があります。 この場合、それは1つのフィールドを持つオブジェクトです。

使用する

/js/app.js



、JSを使用して必要なモジュールを接続し、コードを実行します。

 require( ['mymodule', 'jquery'], function( Module, $ ){ $('body').append( Module.foo ); } );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

同時に、ライブラリは依存関係からエクスポートされた他の変数のように、モジュールはグローバルスコープで利用できません。 バージョン1.7のjQueryライブラリはAMDアーキテクチャをサポートしているという事実にもかかわらず、例外です。ドルをグローバルスコープにエクスポートします。 ほとんどの場合、これは長年にわたって書かれたプラグインの軍隊との互換性を維持するために行われました。

構成

RequireJSには、使用前に渡すことができるいくつかのパラメーターがあります。 これを行うには、 require.config



オブジェクトを使用します。



AMDとして設計されていない変数をグローバルスコープにエクスポートするモジュールを接続する必要がある場合はどうすればよいですか？ もちろん、ソースコードを変更できますが、これは悪い習慣です。 shim



パラメーターは、そのようなモジュールを記述するshim



されます。 その依存関係とエクスポートされた変数を手動で指定することができ、それは他のAMDと同等のアプリケーションの一部になります：

 require.config = { shim: { 'oldmodule' : { deps: [], exports: 'OldModule' } } };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これを依存関係として指定できます：

 require( ['mymodule', 'jquery', 'oldmodule'], function(){} );
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

shimに加えて、 baseUrl



ファイルbaseUrl



ルートディレクトリ、より便利なpaths



接続のエイリアスなど、さらに多くのオプションがあります。

おわりに

私と同じように、AMDの概念があなたに夢中になったことを願っています。 開発で多数のJSファイルを使用する際の混乱を回避し、再利用可能なコードの作成を促進し、バックエンドからファイルを接続する責任を取り除きます。 また、数十個のファイルからなる非常に大きなMVCアプリケーションがある場合、そのようなシステムは単に置き換えられません。



別れの際に、引き続き問題の調査に役立つリンクをいくつかご紹介します。

• 記事Addy OsmaniによるAMD、CommonJS、およびES HarmonyによるモジュラーJavaScriptの記述 。
• RequireJS公式ウェブサイト 。
• AMD仕様。

この記事のソースコードは、 GitHubのリポジトリから入手できます 。

ハッピーハッキング！