モジュラー遠位JS仕様

  • 多くの場合、開発中のモジュールをインポートする際に使用requireしてimport
  • 導出モジュールを使用する場合module.exports/exports、またはexport/export default
  • 時には、モジュールを参照するために使用されますrequire奇妙なことは、あなたが使用できるということですかimportそれらの違いは何ですか?

1、CommonJS仕様(同期ローディングモジュール)

  • この方法は、モジュールにより要求することができローディング同期依存する他のモジュールを、必要な露出インターフェイスまたは輸出module.exportsはを導出します。
  • 使用します。
// 导入
require("module");
require("../app.js"); // 导出 exports.getStoreInfo = function() {}; module.exports = someValue;
    • 利点:

      1. シンプルで使いやすいです
      2. サーバーモジュールは、多重化を促進します
    • 短所:

      1. 同期ロードはブラウザ環境での使用に適していないと、同期はブロッキング負荷は、ブラウザが非同期でロードされていることのリソースを意味します
      2. 並列ノンブロッキング複数のモジュールをロードすることができません
    • なぜ同期、サーバー缶をロードするようにブラウザを使用していませんか?

      • サーバ側のモジュールなので、サーバモジュールがロードされているためであります
      • モジュールはサーバ側にあるので、ロード時間の速度はまた、速度などの要因に依存し、ブラウザーのように長い時間を待つ必要があれば、アプリケーション全体がブロックされます。
      • そのため、ブラウザモジュールではなく、「同期ロード」(CommonJs)は、唯一の「非同期ロード」(AMD)。
  • モジュールの参照CommonJsモジュラーシステムでのNode.jsを表します

AMD(非同期ロード・モジュール)

  • 非同期モジュールをロードし、モジュールはランニングバックロードの文には影響を与えません。すべての依存モジュール文がロード完了後まで待って、コールバック関数で定義されている、コールバック関数が実行されました。
  • 例:
// 定义
define("module", ["dep1", "dep2"], function(d1, d2) {...}); // 加载模块 require(["module", "../app"], function(module, app) {...}); 
  • モジュールのロードrequire([module], callback);最初のパラメータ[モジュール]、ロードされるモジュールのメンバーである配列である;第2のパラメータは、ローディング後にコールバック関数コールバックです。
  • 利点:

    1. ブラウザ環境モジュールでの非同期読み込みのために
    2. 平行な複数のモジュールをロードします
  • 短所:

    1. 開発コストを増やし、より多くの困難なコードの読み取りと書き込み、意味モジュールは、道が滑らかではない定義
    2. 思考のモジュラー方法は、それを達成するための妥協である、普遍的に適合しません
  • AMDの代表は、仕様を達成しますrequire.js
RequireJSは、事前実行モジュールの態度です。すべてのモジュールが最初依存実行されるように、AMD RequireJS仕様は、実行されるので、事前を必要と等価である、すなわち、事前RequireJS依存実行モジュール、
  • RequireJS実行プロセス:
  1. ファイルJSの実際のパスを取得するために、構成ファイルに従って、機能モジュールの依存性チェックを必要とします
  2. JSファイルDOM内のスクリプトノードを挿入するために、実際のパスによると、ロードされたモジュールの完了が通知を取得するのonloadイベントをバインドします。
  3. すべての後、スクリプトがロードされている依存し、コールバック関数

CMD仕様(非同期ロードモジュール)

  • CMDの規範とAMDは非常に、似たシンプルな、とCommonJSと互換性の多くを保つのNode.jsのモジュール仕様であり、CMDの仕様では、モジュールはファイルです。
  • ファクトリ関数は、オブジェクトまたは文字列であってもよいとすることができる、工場パラメータを受信するグローバル定義モジュールを使用して関数を定義します。
  • 工場は関数である、三つのパラメータ、関数(必要、輸出、モジュール)があります。

    1. (ID)を必要とする:他のモジュールによって提供されるインタフェースを取得するためのモジュールを受け入れる唯一のパラメータ同定の方法を、必要
    2. 輸出外側にインターフェースモジュールを提供することを目的とします
    3. モジュールは、現在のモジュールに関連付けられたプロパティおよびメソッドをその上に格納されたオブジェクトであります
  • 例:
define(function(require, exports, module) { var a = require('./a'); a.doSomething(); // 依赖就近书写,什么时候用到什么时候引入 var b = require('./b'); b.doSomething(); });
  • 利点:
  1. リライアンス近く、遅延実行
  2. あなたは簡単にNode.jsの中で実行することができます
  • 短所:
  1. SPM依存パッケージ、ロード論理モジュール強調
  • 実装は、ライブラリを表しsea.js:SeaJSはモジュールの実装に向けた怠惰な態度で、モジュールが本当に必要に実行されるのみSeaJSモジュール(依存)

AMDとCMDとの違い

  1. 依存モジュールの場合、AMDが事前に実行され、CMDは遅延実行です。2.0 RequireJSしかし、遅延は、(別の方法で処理文言によって)変更を行ってもよいです。CMDはできるだけ怠惰尊敬します。
  2. 尊敬AMDはフロント頼る;尊敬CMDは、モジュールで使用される場合にのみ、再び必要と、近く依存しています。
// AMD
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好 a.doSomething() // 此处略去 100 行 b.doSomething() ... }); // CMD define(function(require, exports, module) { var a = require('./a') a.doSomething() // 此处略去 100 行 var b = require('./b') // 依赖可以就近书写 b.doSomething() // ... });

UMD

  • UMDは、AMDとCommonJSのブレンドであります
  • AMDブラウザの非同期ローディングモジュールの第一の原則を開発します。
  • 開発サーバーの第一の原則にCommonJSモジュール、シンクは、包装にせずに、そのモジュールをロードを選択します。
  • UMD第1の判定モジュール(輸出)のNode.jsモジュールモードを使用して存在するか否かのNode.jsサポート; AMD(存在する場合に定義)、本実施形態AMDとロードモジュールをサポートするかどうかを決定します。
(function (window, factory) {
    if (typeof exports === 'object') {
    
        module.exports = factory();
    } else if (typeof define === 'function' && define.amd) { define(factory); } else { window.eventUtil = factory(); } })(this, function () { //module ... });

モジュラーES6

  • 言語標準のレベルにES6は、機能モジュールを実現し、非常に簡単達成し、CommonJS AMDの仕様を置き換えることができ、一般的なブラウザとサーバモジュールソリューションとなります。
  • モジュールの依存関係は、入力と出力変数(CommonJSとAMDのモジュールは、これらの事は、実行時にのみ決定されることができる)と同様に、決定することができたときに、できるだけ静的コンパイラよう:ES6モジュールの設計。

    • 使用します。
// 导入
import "/app";
import React from “react”; import { Component } from “react”; // 导出 export function multiply() {...}; export var year = 2018; export default ... ...
  • 利点:
  1. 簡単静的解析
  2. 将来のためのECMAScript標準
  • 短所:
  1. ネイティブブラウザは、まだ基準を達成していません
  2. 新しいコマンド・ワードは、Node.jsの新しいバージョンがサポートされています。

戻る問題「の輸入を必要と区別」へ

  • CommonJs仕様は用途、仕様ES6で使用インポートモジュールを必要とするので両者の違いは、2つの仕様の間に実質的な差です。
  • CommonJS:
  1. 基本データ型の場合は、それがコピーされます。そのモジュールがキャッシュされ、一方、別のモジュールに再割り当てモジュール出力変数。
  2. 複雑なデータ型の場合、それは浅いコピーです。二つのモジュールの目的は、モジュールの値を変更する場合、したがって、他のモジュールに影響を与える、同じメモリ空間にポイントを参照するからです。
  3. モジュールをロードする場合、コマンドを必要とし、それが全体のモジュールのコードを実行します。
  4. モジュールが必要とコマンドがロードされると、モジュールはキャッシュの値に、実行ではなく、されることはありません。あなたが最初の負荷は、負荷後に、それは最初の実行の結果を返すときに、手動でシステムキャッシュをクリアしない限り、他の言葉では、関係なく、何回のCommonJSロードモジュール、のみ、一度だけ実行されます。
  5. ロードするために属している場合には周期的負荷、実行。必要とすることにスクリプトコードは、それがすべてを実行します。モジュールいったん「環状ローディング」であり、実行がまだ出力の一部ではない、のサブセットのみに対して行われています。
  • ES6モジュール
  1. ダイナミック読み取り専用基準値が属する] [ES6モジュール。
  2. 読み取り専用のためにそれは、変数の値導入さを変更することはできない、すなわち、インポート変数が読み込まれるかどうか、基本的なデータ・タイプまたは複合データ型。ときインポートコマンドモジュールの出会い、それは読み取り専用の参照を生成します。スクリプトが実際に実行されるまで待ってから、モジュールにこの読み取り専用参照が値内部ロードさに基づきます。
  3. 動的ため、元の値の変更は、インポート負荷の値も変化します。基本データ型や複雑なデータ型かどうか。
  4. ロードサイクル、ES6を動的モジュール際に参照されます。限り実行するコードの二つのモジュール間の参照があるように。
  • 最後に:/輸出を必要不可欠な普遍的かつ必要である、という事実ので、インポート/エクスポートを書くには、最終的に実行/輸出を必要とするようにコンパイルされています。

おすすめ

転載: www.cnblogs.com/bgd150809324/p/11283689.html