Javascriptモジュラープログラミング(1)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') の最初の行の後に実行されます。 math.js の読み込みが完了するまで待ちます。つまり、読み込みに時間がかかると、アプリ全体がハングアップして待機することになります。

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

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

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

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

コードをコピー コードは次のとおりです。

require([module], callback);


The first parameter [module] is an array, the members of which are the modules to be loaded; the second parameter callback is the callback function after successful loading. If the previous code is rewritten into AMD form, it will look like this:

Copy the code The code is as follows:

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

math.add() and math module Loading is not synchronous, and the browser will not freeze. So obviously, AMD is more suitable for the browser environment.
Currently, there are two main Javascript libraries that implement the AMD specification: require.js and curl.js. The third part of this series will further explain the usage of AMD and how to put modular programming into practice by introducing require.js.
(End)