JavaScript の AMD 仕様

1. 起源

CommonJS 組織は、フロントエンド開発のための統一されたガイダンスを提供することを期待して、多くの新しい JavaScript アーキテクチャ ソリューションと標準を提案してきました。 AMD 仕様は最も有名なものの 1 つであり、その正式名は Asynchronous Module Definition であり、非同期モジュール ロード メカニズムです。モジュール定義、依存関係、参照関係、読み込みメカニズムについて完全に説明します。この仕様は requireJS、NodeJs、Dojo、JQuery で使用されており、大きな価値があることがわかります。

2. はじめに

仕様としては、構文 API を定義するだけで済み、その実装については気にする必要はありません。 AMD の仕様は、定義関数
define([module-name?], [array-of-dependency?], [module-factory-or-object]);
の API が 1 つだけあるというシンプルなもので、その中には次のものがあります。
module-name: モジュール識別子。省略可能。
依存関係の配列: 依存するモジュールは省略できます。
module-factory-or-object: モジュール実装、または Javascript オブジェクト。
define 関数のもう 1 つのプロパティは非同期性です。定義関数が実行されると、
1) まず、2 番目のパラメーターにリストされている依存モジュールが非同期で呼び出されます
2) すべてのモジュールがロードされた後、3 番目のパラメーターがコールバック関数の場合は実行されます
3) 次にシステム モジュールにそれが利用可能であることを通知し、システム モジュールはそれ自体に依存するモジュールにもそれが利用可能であることを通知します。

3. AMD の例

1. モジュールの定義方法

次のコードは、アルファ モジュールを定義し、組み込みの require モジュール、export モジュール、および外部ベータ モジュールに依存します。ご覧のとおり、3 番目のパラメーターはコールバック関数であり、依存モジュールは依存関係の宣言の順序でパラメーターとしてコールバック関数に直接使用できます。
1) require 関数を使用すると、いつでもモジュールに依存することができます。つまり、モジュールへの参照を取得できるため、モジュールがパラメータとして定義されていない場合でもモジュールを使用できます。定義されたアルファ モジュールのエンティティ、その上で定義されたプロパティとメソッドは、アルファ モジュールのプロパティとメソッドでもあります。 exports.verb = ... により、alpha モジュールの動詞メソッドが定義されます。
3) この例では、モジュール beta の動詞メソッドを単純に呼び出しています。

define("alpha", ["require", "exports", "beta"], function (require, exports, beta) {

exports.verb = function() {
return beta.verb();
/ /Or: return require("beta").verb();
}
});

2. 匿名モジュール この時点では、define メソッドを使用して最初のパラメータを省略できます。 、モジュール ファイルのファイル名はモジュール識別子です。

このモジュール ファイルが a.js に配置されている場合、a はモジュール名です。依存関係で「a」を使用すると、この匿名モジュールに依存できます。

モジュールの再利用性が高いという利点は、モジュール名をそのファイルパスに配置して匿名モジュールを使用できることです。

次のコードは、alpha モジュールに依存する匿名モジュールを定義します。

define(["alpha"], function (alpha) {
return {

verb: function(){

return alpha.verb() + 2 ;
}
};
});


3. パラメータを 1 つだけ指定する場合、define

define の最初の 2 つのパラメータは省略できます。 3 番目のパラメーターには 2 つの状況があり、1 つは JavaScript オブジェクト、もう 1 つは関数です。

オブジェクトの場合は、メソッドと関数を含むオブジェクトである場合もあれば、データを提供するだけの場合もあります。後者は JSON-P に非常に似ているため、AMD には完全な JSON-P 実装が含まれていると考えることもできます。モジュールは単純なデータ オブジェクトに進化します。このようなデータ オブジェクトは可用性が高く、静的オブジェクトであるため CDN にも適しており、JSON-P のパフォーマンスを向上させることができます。中国の省と都市間の対応を提供する JavaScript オブジェクトを考えてみましょう。これが従来の JSON-P 形式でクライアントに提供される場合、コールバック関数名を提供し、この関数名に基づいて戻りデータを動的に生成する必要があります。標準 JSON-P データ 確実 CDN フレンドリーではありません。ただし、AMD を使用している場合、このデータ ファイルは次の形式になります:

define({ PROvinces: [ {名前: '上海'、エリア: ['浦東新区'、'徐匯区']}、 {名前: '江蘇',都市: ['南京', '南通']}

//.... ] このファイルが china.js であると仮定すると、モジュールがこのデータを必要とする場合は、次のようにします。

define(['china'], function(china){ //ここで中国の省と市のデータを使用します});

このようにして、このモジュールは、リモート Yes を使用するかコピーするかにかかわらず、非常に再利用可能です。ローカル プロジェクトに移行すると、開発時間とメンテナンス時間が節約されます。

パラメータが関数の場合、その用途の 1 つは、それを迅速に開発して実装することです。小規模なアプリケーションに適しており、どのモジュールが必要か、誰がそれらを使用するかについて事前に注意を払う必要はありません。この関数では、いつでも必要なモジュールを要求できます。例:

define(function(){
var p = require('china');
//中国モジュールを使用する});

つまり、モジュール名と必要なモジュールを省略します。拠り所にする。これは、他のモジュールに依存する必要がないという意味ではありませんが、必要に応じてこれらのモジュールを要求できるようになります。定義メソッドが実行されると、関数の toString メソッドが呼び出され、その中の require 呼び出しがスキャンされて、これらのモジュールを事前にロードし、ロードが完了した後に実行できるようになります。これにより、迅速な開発が可能になります。

注意すべき点は、Opera は関数の toString メソッドをあまりサポートしていないため、ブラウザーでの適用性はあまり高くないことです。ただし、ビルド ツールを使用してすべての JavaScript ファイルをパッケージ化する場合、ビルド ツールは依存モジュールの必要性をスキャンして強制的にロードするのに役立ちます。

上記は JavaScript の AMD 仕様内容です。その他の関連記事については、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。