JavaScript モジュラー プログラミング (2): AMD 仕様

このシリーズの前編では、JavaScript モジュールの基本的な書き方を紹介しましたが、今回は標準的な方法でモジュールを使用する方法を紹介します。

(上の続き)

7. モジュールの仕様

まず考えてみましょう、なぜモジュールが重要なのでしょうか?

モジュールのおかげで、他の人のコードをより便利に使用でき、必要な機能に必要なモジュールをロードできます。

ただし、これには前提条件があります。つまり、全員が同じ方法でモジュールを書かなければなりません。そうでないと、あなたにはあなたの書き方があり、私には私の書き方があるので、混乱してしまいませんか!現在、JavaScript モジュールの公式仕様がないことを考慮すると、これはさらに重要です。

現在、一般的な Javascript モジュール仕様には CommonJS と AMD の 2 つがあります。 AMDを中心に紹介していきますが、まずはCommonJSから紹介していきます。

8. CommonJS

2009 年に、アメリカのプログラマー Ryan Dahl は、サーバーサイド プログラミングに JavaScript 言語を使用して、node.js プロジェクトを作成しました。

これにより、「JavaScript モジュール性プログラミング」が正式に誕生しました。正直に言うと、ブラウザ環境ではモジュールがなくても大きな問題はありませんが、Web プログラムの複雑さは制限されていますが、サーバー側ではオペレーティング システムや他のアプリケーションと対話するためのモジュールが必要です。そうでなければプログラミングはできません。

node.jsのモジュール体系はCommonJS仕様を参照して実装されています。 CommonJS には、モジュールをロードするためのグローバル メソッド require() があります。数学モジュール math.js があると仮定すると、次のようにロードできます。

var math = require('math');

その後、モジュールによって提供されるメソッドを呼び出すことができます:

var math = require('math');
math.add(2,3); // 5

このシリーズは主にブラウザ プログラミングを目的としており、node.js には関与しないため、CommonJS の紹介はこれ以上ありません。ここで知っておく必要があるのは、モジュールをロードするために require() が使用されるということだけです。

9. ブラウザ環境

サーバー側モジュールがあると、誰もがクライアント側モジュールを欲しがるのは当然です。そして、この 2 つに互換性があり、モジュールを変更せずにサーバーとブラウザの両方で実行できることが最善です。

ただし、大きな制限があるため、CommonJS 仕様はブラウザ環境には適していません。前のセクションのコードをブラウザで実行すると、大きな問題が発生することがわかりますか?

var math = require('math');
math.add(2, 3);

math.add(2, 3) の 2 行目は、require(‘math’) の 1 行目の後に実行されるため、math.js がロードされるまで待つ必要があります。つまり、読み込みに時間がかかると、アプリ全体がハングアップして待機することになります。

すべてのモジュールはローカル ハードディスクに保存され、同期してロードできるため、これはサーバー側の問題ではありません。待機時間はハードディスクの読み取り時間です。しかし、ブラウザにとってこれは大きな問題です。モジュールはサーバー側に配置され、待ち時間はネットワークの速度に依存するため、長時間かかる場合があり、ブラウザは「停止状態」になります。州。

そのため、ブラウザ側モジュールは「同期読み込み」(同期)は利用できず、「非同期読み込み」(非同期)しか利用できません。これがAMD仕様誕生の背景です。

10. AMD

AMDとは「Asynchronous Module Definition」の略で、「非同期モジュール定義」を意味します。モジュールは非同期でロードされ、モジュールのロードは後続のステートメントの実行には影響しません。このモジュールに依存するすべてのステートメントはコールバック関数で定義されます。このコールバック関数はロードが完了するまで実行されません。

AMD も、require() ステートメントを使用してモジュールをロードしますが、CommonJS とは異なり、2 つのパラメーターが必要です。

require([module], callback);

最初のパラメーター [module] は配列であり、2 番目のパラメーター内のメンバーはロードされるモジュールです。パラメータ callback は、ロードが成功した後のコールバック関数です。前のコードを AMD 形式に書き直すと、次のようになります:

require(['math'], function (math) {
　　math.add(2, 3);
});

math.add() と数学モジュールの読み込みは同期されず、ブラウザはフリーズしません。したがって、明らかに AMD がブラウザ環境に適しています。

現在、AMD 仕様を実装する 2 つの主要な Javascript ライブラリ、require.js とcurl.js があります。このシリーズの第 3 部では、AMD の使用法と、require.js を導入してモジュール型プログラミングを実践する方法についてさらに説明します。

上記は JavaScript モジュラー プログラミング (2): AMD 仕様の内容です。さらに関連する内容については、PHP 中国語 Web サイト (www.php.cn) に注目してください。