883

たくさん読んだ後でも、CommonJS 、 AMD、RequireJSについてはまだ非常に混乱しています。

CommonJS (以前のServerJS ) は、言語がブラウザーの外で使用される場合に、いくつかのJavaScript仕様 (つまりモジュール)を定義するためのグループであることを知っています。CommonJSモジュールの仕様には、Node.jsやRingoJSなどの実装がありますよね?

CommonJS、Asynchronous Module Definition (AMD) 、RequireJSの関係は?

RequireJSはCommonJSモジュール定義の実装ですか? はいの場合、AMDとは何ですか?

4

6 に答える 6

803

RequireJSはAMD API (ソース)を実装します。

CommonJSはexports、モジュールの内容を定義するオブジェクトを使用してモジュールを定義する方法です。簡単に言うと、CommonJS の実装は次のように機能します。

// someModule.js
exports.doSomething = function() { return "foo"; };

//otherModule.js
var someModule = require('someModule'); // in the vein of node    
exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };

基本的に、CommonJS は、require()依存関係を取得する関数、exportsモジュールの内容をエクスポートする変数、および依存関係を要求するために使用されるモジュール識別子 (このモジュールに関連して問題のモジュールの場所を記述する) が必要であることを指定します ( source）。CommonJS には、あなたが言及したNode.jsを含むさまざまな実装があります。

CommonJS はブラウザーを念頭に置いて特別に設計されたわけではないため、ブラウザー環境にはあまり適合しません (*これに関するソースはありません。RequireJS サイトを含め、どこでもそう言っているだけです。* ) どうやら、これには非同期ロードなどと関係があります。

一方、RequireJS は、ブラウザ環境に合わせて設計された AMD を実装しています ( source )。どうやら、AMD は CommonJS Transport フォーマットのスピンオフとして始まり、独自のモジュール定義 API に発展したようです。したがって、2つの間の類似点。AMD の新機能はdefine()、モジュールがロードされる前にその依存関係を宣言できるようにする機能です。たとえば、定義は次のようになります。

define('module/id/string', ['module', 'dependency', 'array'], 
function(module, factory function) {
  return ModuleContents;  
});

したがって、CommonJS と AMD は、実装が異なるJavaScriptモジュール定義 API ですが、どちらも同じ起源から来ています。

  • AMDは、モジュールの依存関係の非同期読み込みをサポートしているため、ブラウザーにより適しています。
  • RequireJSはAMDの実装であると同時に、CommonJSの精神(主にモジュール識別子) を維持しようとしています。

さらに混乱させられるのは、RequireJS は AMD 実装でありながら、CommonJS ラッパーを提供するため、CommonJS モジュールを RequireJS で使用するためにほぼ直接インポートできることです。

define(function(require, exports, module) {
  var someModule = require('someModule'); // in the vein of node    
  exports.doSomethingElse = function() { return someModule.doSomething() + "bar"; };
});
于 2013-05-13T13:14:08.313 に答える
207

CommonJSはそれだけではありません。JavaScript の共通 A​​PI とエコシステムを定義するプロジェクトです。CommonJS の一部はモジュール仕様です。Node.js と RingoJS はサーバー側の JavaScript ランタイムであり、どちらも CommonJS Module 仕様に基づいてモジュールを実装しています。

AMD (Asynchronous Module Definition) は、モジュールのもう 1 つの仕様です。RequireJSは、おそらく AMD の最も一般的な実装です。CommonJS との大きな違いの 1 つは、AMD がモジュールを非同期的にロードすることを指定していることです。つまり、ロードが完了するのを待って実行をブロックするのではなく、モジュールが並列でロードされることを意味します。

これにより、AMD は一般的にクライアント側 (ブラウザー内) の JavaScript 開発でより多く使用され、CommonJS モジュールは一般的にサーバー側で使用されます。ただし、どちらの環境でもいずれかのモジュール仕様を使用できます。たとえば、RequireJS はNode.js で実行するための指示を提供し、 browserifyはブラウザーで実行できる CommonJS モジュールの実装です。

于 2013-05-13T13:06:50.937 に答える
196

簡単な答えは次のとおりです。

CommonJSとAMDは、JavaScript アプリケーションでモジュールとその依存関係を宣言する方法に関する仕様 (または形式) です。

RequireJSは、AMD 準拠のスクリプト ローダー ライブラリです。curljsは別の例です。

CommonJS 準拠:

Addy Osmani の本から引用。

// package/lib is a dependency we require
var lib = require( "package/lib" );

// behavior for our module
function foo(){
    lib.log( "hello world!" );
}

// export (expose) foo to other modules as foobar
exports.foobar = foo;

AMD準拠:

// package/lib is a dependency we require
define(["package/lib"], function (lib) {

    // behavior for our module
    function foo() {
        lib.log( "hello world!" );
    }

    // export (expose) foo to other modules as foobar
    return {
        foobar: foo
    }
});

モジュールを他の場所で使用できます：

require(["package/myModule"], function(myModule) {
    myModule.foobar();
});

背景:

実際には、CommonJSは API 宣言をはるかに超えたものであり、それを扱うのはその一部だけです。AMD は、CommonJS リストのモジュール形式のドラフト仕様として開始しましたが、完全なコンセンサスには達せず、形式のさらなる開発はamdjs グループに移されました。どちらの形式が優れているかについての議論は、CommonJS がより広範な一連の懸念事項をカバーしようと試みていること、同期の性質を考えるとサーバー側の開発により適していること、AMD がその非同期の性質を考えるとクライアント側 (ブラウザー) の開発により適していることを示しています。 Dojo のモジュール宣言の実装にルーツがあるという事実です。

ソース:

于 2013-12-29T23:05:49.170 に答える
17

モジュラーな JavaScript プログラムをいくつかのファイルに編成child-modulesし、main js module.

問題は、JavaScript がこれを提供していないことです。Chrome と FF の最新のブラウザー バージョンでは、今日でもありません。

しかし、JavaScript に別の JavaScript モジュールを呼び出すためのキーワードはありますか?

答えはノーなので、この質問は多くの人にとって世界の完全な崩壊かもしれません。

ES5 (2009 年にリリース) では、JavaScript にはimport、include、requireなどのキーワードがありませんでした。

ES6 は (2015 年にリリースされた)インポートキーワード ( https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import ) を提案してその日を節約し、現在はすべての最新のブラウザーがこれをサポートしています。

Babel 6.18.0 を使用し、ES2015 オプションのみでトランスパイルする場合

import myDefault from "my-module";

あなたはrequire再び得るでしょう。

"use strict";
var _myModule = require("my-module");
var _myModule2 = _interopRequireDefault(_myModule);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

これはrequire、モジュールが Node.js からロードされることを意味するためです。Node.js は、システム レベルのファイルの読み取りからモジュールへの関数のラップまで、すべてを処理します。

JavaScript 関数は、モジュールを表す唯一のラッパーだからです。

CommonJS と AMD について混乱していますか?

CommonJS と AMD はどちらも、JavaScript の「欠陥」を克服してモジュールをスマートにロードするための 2 つの異なる手法にすぎません。

于 2016-10-30T23:50:48.920 に答える