フロントエンドでモジュール性を使用する必要があるのはなぜですか?

今回は、なぜフロントエンドでモジュール化を使用する必要があるのか​​をお届けします。 、フロントエンドのモジュール化に関する 注意事項 は何ですか? ここで実際のケースを見てみましょう。

CMD、AMD、CommonJS 仕様とは何を指しますか?どのようなアプリケーションがありますか?

AMD (非同期モジュール定義) は、モジュールと依存関係を段階的にロードできるメカニズムを指定します。これは特に、CommonJS 仕様の拡張でもあるブラウザ側での非同期読み込みに当てはまります。 12

Syntax

define(id?, dependency?, Factory);1

id: 定義内のモジュールの名前 (オプション)、このパラメーターが指定されていない場合、モジュール名はデフォルトのモジュール名になります。モジュールローダーから要求されたスクリプトの名前を指定します。 。

依存関係: 現在のモジュールが依存する配列リテラルであり、モジュールによって定義されたモジュールによって識別されます。 依存関係パラメーターはオプションです。このパラメーターを省略した場合、デフォルトで ["require", "exports", "module"] になります。ただし、ファクトリ メソッドの長さ属性が 3 未満の場合、ローダーは関数の長さ属性で指定された引数の数でファクトリ メソッドを呼び出すことを選択します。

ファクトリ メソッド ファクトリ: モジュールは、実行される関数またはオブジェクトを初期化します。関数の場合は、一度だけ実行する必要があります。それがオブジェクトの場合、このオブジェクトはモジュールの出力値である必要があります。
例

define('modal', ['jQuery', 'dialog'], function($, Dialog){$('.modal').show();
Dialog.open();
});1234

AMD のライブラリには、RequireJS、curl、Dojo などが含まれます。 CommonJSはサーバーサイドモジュールの仕様であり、Node.jsはこの仕様を採用しています。 Node.JS は、js モジュール性の概念を初めて採用しました。モジュールには関数である自由変数「require」があります。 「require」関数はモジュール識別子を受け取ります。 「require」は、外部モジュールによってエクスポートされた API を返します。依存関係サイクルが発生した場合、外部モジュールは、その推移的な依存関係によって要求されたときに実行を完了していない可能性があります。この場合、「require」によって返されるオブジェクトには、少なくとも呼び出し前に準備されたこの外部モジュールの要件が含まれている必要があります。 require 関数 (現在のモジュール実行環境に入ります)。要求されたモジュールを返すことができない場合、「require」はエラーをスローする必要があります。モジュールには、「exports」という名前の自由変数があります。これは、モジュールが実行中に独自の API を追加できるオブジェクトです。モジュールは、出力の唯一の表現として「エクスポート」オブジェクトを使用する必要があります。
例

exports.add = function() {
  var sum = 0, i = 0, args = arguments, l = args.length;  while (i < l) {
      sum += args[i++];
  }
  return sum;
};1234567

CMD (Common Module Definition) は、SeaJS のプロモーションプロセス中に生成されます。

CMD は中国の Yu Bo によって提案されました。AMD 仕様との主な違いは、定義モジュールと依存関係の導入部分です。 AMD は、モジュールを宣言するときにすべての依存関係を指定し、それらを仮パラメータを通じてモジュールに渡す必要があります
例

define(function(require, exports, module) {
  exports.add = function() {
    var sum = 0, i = 0, args = arguments, l = args.length;    while (i < l) {
      sum += args[i++];
    }
    return sum;
  };
});123456789

AMD モジュールと比較して、CMD は CommonJS 仕様のノードの定義に近いです:

define(factory);1

依存関係の部分では、CMD は動的導入をサポートしています。例は次のとおりです。

define(function(require , exports , module){    //the module code goes here
});123

require、exports、および module は、モジュールに依存する必要がある場合、次の場所でモジュールに渡されます。いつでもインポートできます。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトその他の関連記事に注目してください。

推奨読書:

フロントエンドページをテストする方法

JavaScriptでの呼び出しと適用のアプリケーション

以上がフロントエンドでモジュール性を使用する必要があるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。