jsのモジュール化とは何ですか? jsモジュール化の概要

jsのモジュール化とは何ですか? JS のモジュール性は最初から存在した概念ではありませんが、エンジニアリングの要件はますます高くなっており、JS モジュール開発の必要性が生じています。そこでjsモジュール開発についてです。 JavaScript のモジュール化の例をいくつか見てみましょう。

モジュール開発の歴史

Ajax が提案されるまで、JS にはモジュール性の概念がありませんでした。フロントエンドのロジックはますます複雑になり、多くの問題が発生しました。グローバル変数、関数名の競合、依存関係の処理は困難です。
当時、これらの問題を解決するためにサブ実行関数が使用されていました。たとえば、古典的な jquery はコードをカプセル化するために匿名の自己実行関数を使用し、それらをすべてグローバル変数 jquery の下にマウントしていました。

CommonJs

CommonJs は、nodeJs を通じて開発され、各 js ファイルはモジュールであり、各モジュールには個別のスコープがあります。モジュールはエクスポートとして module.exports を使用し、オブジェクトを出力します。 require メソッドを使用してファイルを読み取り、その内部 module.exports オブジェクトを返します。

CommonJs の問題は、その読み込みが同期であることです。これはサーバー側では正常ですが、非同期だらけのブラウザでは当てはまりません。コミュニティはブラウザへの適応をめぐって意見が分かれました。

AMD

AMD は、Asynchronous Module Definition の中国語名で、非同期モジュール定義を意味します。ブラウザ側でモジュール開発するための仕様であり、JavaScriptではネイティブにサポートされていないため、AMDの仕様に準拠したRequireJSをAMDの作者が個人的に実装しました。
AMD 仕様では、モジュールを定義するためにグローバル関数 define を使用することが規定されています。その使用法は、define(id, dependency, Factory) です。ここで、id はモジュール識別子、dependency は配列であり、配列内にはそのモジュールが含まれる他のモジュールがあります。 module は依存しており、factory はモジュールのロジックを含む匿名関数です。
同社は現在 AMD 仕様を使用しています。
例:

//main.jsrequire(['a', 'b'], function(a, b){
     console.log('main.js执行');
     a.hello();
     $('#b').click(function(){
          b.hello();
     });
})

requireJs の問題は、モジュールに追加されると、そのモジュールのすべての依存モジュールがプリロードされることですが、これらの依存関係は最初は使用されない可能性が高いことです。また、依存関係の長いリストを同時に記述するのは非常に面倒です。さらに良いのは、AMD が commonJs に require、exprots、および module の 3 つの関数を保持していることです。これらをすべて依存関係に記述する必要はありませんが、必要に応じて require を使用して導入します。

CMD

requirejs は上記のような洗練されていない機能をすべて備えているため、それを改善するための新しい要素が必要です。これが新星 seajs の作者は、国内のタオバオ フロントエンド開発者である Yu Bo です。 seajs はモジュール/ラッピング仕様を完全に受け入れており、requirejs のようなモジュールの作成にコールバック メソッドを使用しません。また、これはモジュール/ラッピング仕様に完全に従っているわけではありません。seajs はモジュールを定義するために宣言を使用しませんが、おそらく作成者はこの名前を好むでしょう。 (ただし、これは多かれ少なかれ人々の理解に混乱をもたらします。) seajs を使用してモジュールを定義する方法は次のとおりです:

//main.jsdefine(function(require, exports, module){
     console.log('main.js执行');     var a = require('a');
     a.hello();    
     $('#b').click(function(){
          var b = require('b');
          b.hello();
     });

});

モジュールを定義するときに、ファクトリ関数で依存関係の配列をリストする必要はありません。仮パラメータは require し、エクスポートはモジュールに渡す必要があります。その後、ファクトリ関数の toString メソッドを呼び出し、関数の内容に対して定期的なマッチングを実行し、一致した require ステートメントを通じて依存関係を分析することで、真の実現を実現します。 commonjs スタイルのコード。

AMD と CMD の違い

AMD と CMD の最も明白な違いは、モジュールを定義するときの依存関係の処理が異なることです
AMD は事前依存を推奨し、モジュールを定義するときに依存するモジュールを宣言します
CMD は近くの依存関係を推奨します、特定のモジュールが使用される場合にのみ require します
この違いには利点と欠点があり、単なる文法の違いであり、requireJS と SeaJS は両方とも互いの記述方法をサポートしています

未来志向の ES6 モジュール標準

ES6 はインポートとエクスポートを使用したモジュール化が検討されましたが、現在ブラウザはそれをサポートしておらず、この標準は単なるプロトタイプです。

関連する推奨事項:

js でメソッドをカプセル化する - モジュール化

JS と最初に接触する require.js モジュラー ツール

以上がjsのモジュール化とは何ですか? jsモジュール化の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。