ホームページ > 記事 > ウェブフロントエンド > JS（CommonJS、AMD、CMD）でのモジュール仕様の詳細説明
JS（CommonJS、AMD、CMD）でのモジュール仕様の詳細説明
- php是最好的语言オリジナル
- 2018-08-07 09:21:441990ブラウズ
最初に答えてください: モジュールはなぜ重要ですか?
答え: モジュールのおかげで、他の人のコードをより便利に使用でき、必要な機能に必要なモジュールをロードできます。
ただし、これには前提があります。つまり、全員が同じ方法でモジュールを書かなければなりません。そうでないと、あなたにはあなたの書き方があり、私には私の書き方がある、ということです。
そこで、以下の 3 つのモジュールが標準化され、この記事も公開されました ({顔を覆って笑う}と綴られています)。
JS のモジュール仕様 (CommonJS、AMD、CMD)、JS のモジュール化について聞いたことがあるなら、CommonJS や AMD、さらには CMD についても聞いたことがあるはずです。それを聞いただけです。 これらの仕様がどのようなもので、どのような機能があるのかを見てみましょう。この記事には、これら 3 つの仕様の出典と、それらに対応する製品の原理が含まれています。
1. CommonJS
1. 最初は、公式に定義された API はブラウザベースのアプリケーションしか構築できないと誰もが考えていました。これはあまりにも CommonJS は視野が狭すぎるため (高級な言葉を使って、インチキ)、CommonJS API は通常のアプリケーション (主にブラウザ以外のアプリケーション) で使用される多くの API を定義しており、このギャップを埋めています。その最終的な目標は、Python、Ruby、Java に似た標準ライブラリを提供することです。この場合、開発者は CommonJS API を使用してアプリケーションを作成し、これらのアプリケーションを異なる JavaScript インタープリターや異なるホスト環境で実行できます。CommonJS と互換性のあるシステムでは、JavaScript を使用して次のプログラムを開発できます: サーバーサイド JavaScript アプリケーション
(2)。グラフィック インターフェイス アプリケーション
(4). ハイブリッド アプリケーション (Titanium や Adobe AIR など)
2009 年に、アメリカのプログラマー Ryan Dahl は、サーバーサイド プログラミングに JavaScript 言語を使用するために、node.js プロジェクトを作成しました。これにより、「JavaScript モジュール型プログラミング」が正式に誕生しました。正直に言うと、ブラウザ環境ではモジュールがなくても大きな問題はありませんが、Web プログラムの複雑さは制限されていますが、サーバー側ではオペレーティング システムや他のアプリケーションと対話するためのモジュールが必要です。そうでなければプログラミングはできません。 NodeJS は CommonJS 仕様の実装であり、webpack も CommonJS の形式で記述されます。
node.jsのモジュール体系はCommonJS仕様を参照して実装されています。 CommonJS には、モジュールをロードするためのグローバル メソッド require() があります。数学モジュール math.js があると仮定すると、次のようにロードできます。
var math = require('math');
その後、モジュールが提供するメソッドを呼び出すことができます:
var math = require('math');
Math .add(2,3); // 5
CommonJS で定義されたモジュールは次のように分割されます: {モジュール参照 (必須)} {モジュール定義 (エクスポート)} {モジュール識別 (モジュール)}
require() は外部モジュールを導入するために使用され、exports オブジェクトは現在のモジュールのメソッドまたは変数をエクスポートするために使用され、モジュール オブジェクトはモジュール自体を表します。
Node は CommonJS の仕様に従っていますが、いくつかのトレードオフが行われ、いくつかの新しいものが追加されています。
しかし、CommonJS について話し、Node についても話した後は、まず NPM を理解する必要があると思います。 Node のパッケージ マネージャーとして、NPM は Node が依存するパッケージのインストールの問題を解決するのを支援するものではなく、CommonJS 仕様 (または理論) に従う必要があります。 CommonJS WIKI ではその歴史を語り、モジュールやパッケージなども紹介しています。
commonJS の原理と簡単な実装について話しましょう:
1. 原則
ブラウザーが CommonJS と互換性がない根本的な理由は、4 つの Node.js 環境変数が欠如していることです。
モジュール
エクスポート
必須
グローバル
これら 4 つの変数を提供できる限り、ブラウザーはCommonJS モジュールをロードできます。
これが簡単な例です。
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><br><span class="token keyword">var module <span class="token operator">= <span class="token punctuation">{<br> exports<span class="token punctuation">: <span class="token punctuation">{<span class="token punctuation">}<br><span class="token punctuation">}<span class="token punctuation">;<br><br><span class="token punctuation">(<span class="token keyword">function<span class="token punctuation">(module<span class="token punctuation">, exports<span class="token punctuation">) <span class="token punctuation">{<br> exports<span class="token punctuation">.multiply <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(n<span class="token punctuation">) <span class="token punctuation">{ <span class="token keyword">return n <span class="token operator">* <span class="token number">1000 <span class="token punctuation">}<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">(module<span class="token punctuation">, module<span class="token punctuation">.exports<span class="token punctuation">)<span class="token punctuation">)<br><br><span class="token keyword">var f <span class="token operator">= module<span class="token punctuation">.exports<span class="token punctuation">.multiply<span class="token punctuation">;<br><span class="token function">f<span class="token punctuation">(<span class="token number">5<span class="token punctuation">)<span class="token comment"> // 5000 <br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>上記のコードは、即時実行関数に module と exports という 2 つの外部変数を提供し、モジュールはこの即時実行関数に配置されます。 module.exportsにモジュールの出力値を置くことでモジュールのロードを実現します。
2. Browserifyの実装 原理が分かればツールは作れます。 Browserify は、現在最も一般的に使用されている CommonJS 形式変換ツールです。
main.js モジュールが foo.js モジュールをロードする例をご覧ください。
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><span class="token comment"><br>// foo.js<br>module<span class="token punctuation">.exports <span class="token operator">= <span class="token keyword">function<span class="token punctuation">(x<span class="token punctuation">) <span class="token punctuation">{<br> console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(x<span class="token punctuation">)<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">;<br><span class="token comment"><br>// main.js<br><span class="token keyword">var foo <span class="token operator">= <span class="token function">require<span class="token punctuation">(<span class="token string">"./foo"<span class="token punctuation">)<span class="token punctuation">;<br><span class="token function">foo<span class="token punctuation">(<span class="token string">"Hi"<span class="token punctuation">)<span class="token punctuation">;<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>
次のコマンドを使用して、main.js をブラウザで使用できる形式に変換します。 <span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-bash"><br/>$ browserify main<span class="token punctuation">.js <span class="token operator">> compiled<span class="token punctuation">.js<br/></span></span></span></code></span>
Browserify とは具体的に何をするのですか?ブラウザーアンパックをインストールすると、はっきりと見ることができます。 <span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-bash"><br/>$ npm install browser<span class="token operator">-unpack <span class="token operator">-g<br/></span></span></code></span>
次に、先ほど生成したcompile.jsを解凍します。 <span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-bash"><br/>$ browser<span class="token operator">-unpack <span class="token operator">< compiled<span class="token punctuation">.js<br/><br/><span class="token punctuation">[<br/><span class="token punctuation">{<br/><span class="token string">"id"<span class="token punctuation">:<span class="token number">1<span class="token punctuation">,<br/><span class="token string">"source"<span class="token punctuation">:<span class="token string">"module.exports = function(x) {\n console.log(x);\n};"<span class="token punctuation">,<br/><span class="token string">"deps"<span class="token punctuation">:<span class="token punctuation">{<span class="token punctuation">}<br/><span class="token punctuation">}<span class="token punctuation">,<br/><span class="token punctuation">{<br/><span class="token string">"id"<span class="token punctuation">:<span class="token number">2<span class="token punctuation">,<br/><span class="token string">"source"<span class="token punctuation">:<span class="token string">"var foo = require(\"./foo\");\nfoo(\"Hi\");"<span class="token punctuation">,<br/><span class="token string">"deps"<span class="token punctuation">:<span class="token punctuation">{<span class="token string">"./foo"<span class="token punctuation">:<span class="token number">1<span class="token punctuation">}<span class="token punctuation">,<br/><span class="token string">"entry"<span class="token punctuation">:<span class="token boolean">true<br/><span class="token punctuation">}<br/><span class="token punctuation">]<br/></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>
ご覧のとおり、browerify はすべてのモジュールを配列に入れます。id 属性はモジュール番号、source 属性はモジュールのソース コード、deps 属性はモジュールの依存関係です。モジュール。
main.jsにはfoo.jsが読み込まれているため、deps属性で./fooがモジュール1番に対応することが指定されています。実行中、ブラウザはrequire('./foo')文を検出すると、モジュールNo.1のsource属性を自動的に実行し、実行されたmodule.exports属性値を出力します。 3. 小さなブラウザが必要です
Browserify は非常に強力ですが、ブラウザでは操作できないため、非常に不便な場合があります。
mocha の内部実装に基づいて、純粋なブラウザ CommonJS モジュール ローダー tiny-browser-require を作成しました。コマンド ラインはまったく必要なく、コード全体は 30 行を超えるだけです。
そのロジックは非常に単純です。つまり、モジュールを配列に読み込み、読み込みパスはモジュールの ID です。
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><br><span class="token keyword">function <span class="token function">require<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">{<br><span class="token keyword">var path <span class="token operator">= require<span class="token punctuation">.<span class="token function">resolve<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">;<br><span class="token keyword">var mod <span class="token operator">= require<span class="token punctuation">.modules<span class="token punctuation">[path<span class="token punctuation">]<span class="token punctuation">;<br><span class="token keyword">if <span class="token punctuation">(<span class="token operator">!mod<span class="token punctuation">) <span class="token keyword">throw <span class="token keyword">new <span class="token class-name">Error<span class="token punctuation">(<span class="token string">'failed to require "' <span class="token operator">+ p <span class="token operator">+ <span class="token string">'"'<span class="token punctuation">)<span class="token punctuation">;<br><span class="token keyword">if <span class="token punctuation">(<span class="token operator">!mod<span class="token punctuation">.exports<span class="token punctuation">) <span class="token punctuation">{<br> mod<span class="token punctuation">.exports <span class="token operator">= <span class="token punctuation">{<span class="token punctuation">}<span class="token punctuation">;<br> mod<span class="token punctuation">.<span class="token function">call<span class="token punctuation">(mod<span class="token punctuation">.exports<span class="token punctuation">, mod<span class="token punctuation">, mod<span class="token punctuation">.exports<span class="token punctuation">, require<span class="token punctuation">.<span class="token function">relative<span class="token punctuation">(path<span class="token punctuation">)<span class="token punctuation">)<span class="token punctuation">;<br><span class="token punctuation">}<br><span class="token keyword">return mod<span class="token punctuation">.exports<span class="token punctuation">;<br><span class="token punctuation">}<br><br>require<span class="token punctuation">.modules <span class="token operator">= <span class="token punctuation">{<span class="token punctuation">}<span class="token punctuation">;<br><br>require<span class="token punctuation">.resolve <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(path<span class="token punctuation">)<span class="token punctuation">{<br><span class="token keyword">var orig <span class="token operator">= path<span class="token punctuation">;<br><span class="token keyword">var reg <span class="token operator">= path <span class="token operator">+ <span class="token string">'.js'<span class="token punctuation">;<br><span class="token keyword">var index <span class="token operator">= path <span class="token operator">+ <span class="token string">'/index.js'<span class="token punctuation">;<br><span class="token keyword">return require<span class="token punctuation">.modules<span class="token punctuation">[reg<span class="token punctuation">] <span class="token operator">&& reg<br><span class="token operator">|| require<span class="token punctuation">.modules<span class="token punctuation">[index<span class="token punctuation">] <span class="token operator">&& index<br><span class="token operator">|| orig<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">;<br><br>require<span class="token punctuation">.register <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(path<span class="token punctuation">, fn<span class="token punctuation">)<span class="token punctuation">{<br> require<span class="token punctuation">.modules<span class="token punctuation">[path<span class="token punctuation">] <span class="token operator">= fn<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">;<br><br>require<span class="token punctuation">.relative <span class="token operator">= <span class="token keyword">function <span class="token punctuation">(parent<span class="token punctuation">) <span class="token punctuation">{<br><span class="token keyword">return <span class="token keyword">function<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">{<br><span class="token keyword">if <span class="token punctuation">(<span class="token string">'.' <span class="token operator">!<span class="token operator">= p<span class="token punctuation">.<span class="token function">charAt<span class="token punctuation">(<span class="token number">0<span class="token punctuation">)<span class="token punctuation">) <span class="token keyword">return <span class="token function">require<span class="token punctuation">(p<span class="token punctuation">)<span class="token punctuation">;<br><span class="token keyword">var path <span class="token operator">= parent<span class="token punctuation">.<span class="token function">split<span class="token punctuation">(<span class="token string">'/'<span class="token punctuation">)<span class="token punctuation">;<br><span class="token keyword">var segs <span class="token operator">= p<span class="token punctuation">.<span class="token function">split<span class="token punctuation">(<span class="token string">'/'<span class="token punctuation">)<span class="token punctuation">;<br> path<span class="token punctuation">.<span class="token function">pop<span class="token punctuation">(<span class="token punctuation">)<span class="token punctuation">;<br><br><span class="token keyword">for <span class="token punctuation">(<span class="token keyword">var i <span class="token operator">= <span class="token number">0<span class="token punctuation">; i <span class="token operator">945e8d4292ce0af7e515c6c2ee692956<br><br>3f1c4e4b6b16bbbd69b2ee476dc4f83a<br>require.register("moduleId", function(module, exports, require){<br> // Module code goes here<br>});<br>var result = require("moduleId");<br>2cacc6d41bbb37262a98f745aa00fbf0<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>还是以前面的 main.js 加载 foo.js 为例。
<code class="language-javascript"><span style="font-family:'Microsoft YaHei';font-size:16px;"><code class="language-javascript"><br>require<span class="token punctuation">.<span class="token function">register<span class="token punctuation">(<span class="token string">"./foo.js"<span class="token punctuation">, <span class="token keyword">function<span class="token punctuation">(module<span class="token punctuation">, exports<span class="token punctuation">, require<span class="token punctuation">)<span class="token punctuation">{<br> module<span class="token punctuation">.exports <span class="token operator">= <span class="token keyword">function<span class="token punctuation">(x<span class="token punctuation">) <span class="token punctuation">{<br> console<span class="token punctuation">.<span class="token function">log<span class="token punctuation">(x<span class="token punctuation">)<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">;<br><span class="token punctuation">}<span class="token punctuation">)<span class="token punctuation">;<br><br><span class="token keyword">var foo <span class="token operator">= <span class="token function">require<span class="token punctuation">(<span class="token string">"./foo.js"<span class="token punctuation">)<span class="token punctuation">;<br><span class="token function">foo<span class="token punctuation">(<span class="token string">"Hi"<span class="token punctuation">)<span class="token punctuation">;<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span></code>注意，这个库只模拟了 require 、module 、exports 三个变量，如果模块还用到了 global 或者其他 Node 专有变量（比如 process），就通过立即执行函数提供即可。
二、AMD
基于commonJS规范的nodeJS出来以后，服务端的模块概念已经形成，很自然地，大家就想要客户端模块。而且最好两者能够兼容，一个模块不用修改，在服务器和浏览器都可以运行。但是，由于一个重大的局限，使得CommonJS规范不适用于浏览器环境。还是上面的代码，如果在浏览器中运行，会有一个很大的问题，你能看出来吗？
var math = require('math');
math.add(2, 3);
第二行math.add(2, 3)，在第一行require('math')之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。您会注意到 require 是同步的。
这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于"假死"状态。
因此，浏览器端的模块，不能采用"同步加载"（synchronous），只能采用"异步加载"（asynchronous）。这就是AMD规范诞生的背景。
CommonJS是主要为了JS在后端的表现制定的，他是不适合前端的，AMD(异步模块定义)出现了，它就主要为前端JS的表现制定规范。
AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。
AMD也采用require()语句加载模块，但是不同于CommonJS，它要求两个参数：
require([module], callback);
第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。如果将前面的代码改写成AMD形式，就是下面这样：
require(['math'], function (math) {
math.add(2, 3);
});
math.add() と数学モジュールの読み込みは同期されず、ブラウザはフリーズしません。したがって、明らかに AMD がブラウザ環境に適しています。 現在、AMD 仕様を実装する 2 つの主要な Javascript ライブラリ、require.js とcurl.js があります。
RequireJS は AMD 仕様を実装します。
詳細な概要: 以下では、AMD 仕様を説明するための例として RequireJS を使用しています
1. require.js を使用する理由?
初期の頃、すべての Javascript コードは 1 つのファイルに記述されており、この 1 つのファイルを読み込むだけで十分でした。その後、コードがどんどん増え、1 つのファイルでは不十分になり、複数のファイルに分割して順番にロードする必要がありました。次の Web ページのコードを見たことがある方も多いと思います
82aa3526d91a1e63399c31e3e88e82b62cacc6d41bbb37262a98f745aa00fbf0