JS モジュール性を実装するにはどのような方法がありますか? jsのモジュール化の説明

この記事でわかることは、JS のモジュール化の実装方法とは何か? js のモジュール化についての説明は、参考になると思います。

1. CommonJS
背景: 当初、誰もが JS は簡単なもので、ブラウザベースのアプリケーションしか構築できないと考えていました。 API は、一般的なアプリケーション (主にブラウザ以外のアプリケーション) で使用される多くの API を定義し、このギャップを埋めます。その最終的な目標は、Python、Ruby、Java に似た標準ライブラリを提供することです。この場合、開発者は CommonJS を使用できます。 さまざまな JavaScript インタープリターやさまざまなホスト環境で実行できるアプリケーションを作成するための API。 2009年、アメリカのプログラマー、ライアンが Dahl は、サーバーサイド プログラミングに JavaScript 言語を使用する、node.js プロジェクトを作成しました。これにより、「JavaScript モジュール型プログラミング」が正式に誕生しました。正直に言うと、ブラウザ環境ではモジュールがなくても大きな問題はありませんが、Web プログラムの複雑さは制限されていますが、サーバー側ではオペレーティング システムや他のアプリケーションと対話するためのモジュールが必要です。そうでなければプログラミングはできません。

具体的な代表例: nodeJs、webpack
原則: ブラウザーが CommonJS と互換性がない根本的な理由は、4 つの Node.js 環境変数 (module、exports、require、global、as long) が欠如していることです。これらは 4 つの変数を使用して、ブラウザーで CommonJS モジュールをロードできます
簡単な実装 :

var module = {  
exports: {}
};
(function(module, exports) {  
exports.multiply = function (n) { 
return n * 1000 
};
}(module, module.exports))
var f = module.exports.multiply;
f(5) // 5000

上記のコードは、即時実行関数に 2 つの外部変数 module とexports を提供します。出力値は module.exports 内に配置され、これによりモジュールのロードが実現されます。サーバーサイドモジュールの概念は確立されましたが、CommonJS には大きな制限があります。 この仕様はブラウザ環境には適用されません。 var math = require('math'); 3);require は同期です。すべてのモジュールはローカル ハードディスクに保存され、同期してロードできるため、これはサーバー側では問題ありません。しかし、ブラウザにとってこれは大きな問題です。モジュールはサーバー側に配置され、待ち時間はネットワークの速度に依存するため、長時間かかる場合があり、ブラウザは「停止状態」になります。州。ブラウザ側のモジュールは「同期読み込み」(同期)は利用できず、「非同期読み込み」(非同期)のみ利用可能です。これがAMD仕様誕生の背景です。

具体的な表現: RequireJS使用例
: require([dependency], function(){}); require() 関数は 2 つのパラメータを受け取ります

最初のパラメータは、すべての依存モジュールを表す配列です。

2 番目のパラメータはコールバック関数で、以前に指定したすべてのモジュールが正常にロードされたときに呼び出されます。ロードされたモジュールはパラメータとして関数に渡されるため、これらのモジュールはコールバック関数内で使用できます

// 定义模块 myModule.js
define(['dependency'], function(){    
var name = 'Byron';    
function printName(){        
console.log(name);    
}
    return {        
    printName: printName    
    };
    });
// 加载模块
require(['myModule'], function (my){　 
my.printName();
});

3、CMD

背景の生成
: CMD仕様は国内で開発された共通モジュール定義です。 AMD に requireJS があるように、CMD にも SeaJS というブラウザ実装があります。SeaJS が解決する必要がある問題は requireJS と同じですが、モジュールの定義方法とモジュールの読み込み (実行、解析) のタイミングに違いがあります。

具体的な表現

: Sea .js使用例
：factoryは3つのパラメータを持つ関数、function(require,exports,module)requireは他のモジュールを取得するための唯一のパラメータとしてモジュールIDを受け入れるメソッドです提供インターフェース：require(id)エクスポートは、モジュールインターフェイスを外部に提供するために使用されるオブジェクトです
モジュールは、現在のモジュールに関連付けられたいくつかの属性とメソッドを保存するオブジェクトです

// 定义模块  myModule.js
define(function(require, exports, module) {  
var $ = require('jquery.js')  
$('p').addClass('active');});
// 加载模块
seajs.use(['myModule.js'], 
function(my){
});

AMDとCMDの違い:
実行メカニズム: モジュールに対するSeaJSの態度は次のとおりですモジュールに対する RequireJS の態度は実行前です
仕様準拠: RequireJS は AMD (非同期モジュール定義) 仕様に従い、Sea.js は CMD (共通モジュール定義) 仕様に従います。仕様の違いにより、2 つの API が異なります

4、ES6 モジュール

背景: Es6* より前には、JavaScript にはモジュール システムがありませんでした。大規模なプログラムを小さな相互依存ファイルに分割し、それらを簡単な方法でアセンブルすることは、大規模で複雑なプロジェクトの開発には非常に役立ちました。 。モジュールの依存関係読み込みの問題を解決するために、AMD、CMD、COMMONJS がクライアントに使用され、COMMONJS がサーバーに使用されます。 es6 の登場後、モジュールは関数として定義され、実装は非常にシンプルになり、既存の CommonJS および AMD 仕様を完全に置き換えて、ブラウザーとサーバーのユニバーサル モジュール ソリューションになることができます。
使用例: エクスポート (スロー) インポート (導入) デフォルトのエクスポート (他のモジュールがこのモジュールをロードするときに、インポート コマンドで匿名関数の任意の名前を指定できます)

関連する推奨事項:

JS モジュール化-RequireJS

JavaScriptモジュール化プログラミング（再版）、JavaScriptモジュール化_PHPチュートリアル

以上がJS モジュール性を実装するにはどのような方法がありますか? jsのモジュール化の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。