AMD (Asynchronous Module Definition) については、次のようにフェーズを読みました。
AMD 形式は、今日の「手動で注文しなければならない暗黙的な依存関係を持つ一連のスクリプト タグを記述する」よりも優れたモジュール形式と、ブラウザーで直接簡単に使用できるものを求めて生まれました。
javascriptコンテキストでの目的は何ですか? 例を挙げていただけますか?AMD を使用することの賛否両論?
AMD (Asynchronous Module Definition) については、次のようにフェーズを読みました。
AMD 形式は、今日の「手動で注文しなければならない暗黙的な依存関係を持つ一連のスクリプト タグを記述する」よりも優れたモジュール形式と、ブラウザーで直接簡単に使用できるものを求めて生まれました。
javascriptコンテキストでの目的は何ですか? 例を挙げていただけますか?AMD を使用することの賛否両論?
JavaScript がネイティブ モジュール システムを獲得するずっと前から、スクリプトをページに配置する唯一の方法は<script>
要素でした。これらは、HTML に表示される順序で順番に実行されます。つまり、スクリプトが jQuery に依存している場合、jQuery は<script>
スクリプトの よりも前に来る必要があります<script>
。そうでなければ、それは爆発します。
特にアプリが大きくなるにつれて、アプリを論理的に複数のファイルに分割することは珍しくありません。しかし、スクリプトを手動で並べ替えるこのシステムを使用すると、すぐに悪夢になります。スクリプトには暗黙的な依存関係があり、その管理は別の場所で定義されています。ここでAMDの出番です。
AMD はモジュール仕様であり、RequireJS はそのようなシステムの実装です。簡単に言えば、これはコードのラッパーであり、1) 呼び出されるまでスクリプトを不活性に保ち、2) スクリプトが依存関係を明示的に定義できるようにし、3) モジュール システムがどの依存関係をどの順序で実行するかを判断できるようにします。
大まかな例を次に示します。
// your-app.js
define(['jquery', 'underscore'], function($, _){
// Your script sits in this "wrapper" function.
// RequireJS now knows app.js needs jquery and underscore.
// It loads and executes them first before your script.
})
// jquery.js
define('jquery', [], function(){
// jQuery stuff
return jQuery
})
// underscore.js
define('underscore', [], function(){
// underscore stuff
return underscore
})
// Then on your HTML, load up your app.
<script data-main="path/to/app.js" src="path/to/require.js"></script>
相互に依存するJavascriptライブラリでは、特定の順序でロードする必要があるのが一般的です。たとえば、jQueryライブラリを含むスクリプトタグは、jQueryUIライブラリを含むスクリプトタグの前に配置する必要があります。
ライブラリがAMDを使用している場合、それらは任意の順序で含めることができます。AMDライブラリは、どのライブラリがどのライブラリに依存するかを指定するため、正しい順序でライブラリの初期化を処理します。
(皮肉なことに、AMDライブラリを含むスクリプトタグは、もちろん、AMDを使用するライブラリを含むコードの前に配置する必要があります...)