AMD、CMD、CommunJsとES 6の比較

10172 ワード
Javascript
1.シモンJS
1.1基本概念
  • はJSの表現のために規範を制定して、jsがモジュールの機能がないため、CommunJSは生まれて、それはjsがいかなる場所で運行することができることを望んで、ブラウザーの中だけではありません.
  • 同期
  • Common JS仕様はmodel.exportで定義されています.フロントエンドブラウザでは
    • はサポートされていません.
  • NodeJSはCommunJS仕様の実現であり、webpackもCommunJS形式で書かれています.
  • Common JS定義のモジュールは、モジュール参照(require)に分けられます.モジュール定義(export)モジュール識別情報
    • require()は外部モジュールを導入するために使用されます.exportオブジェクトは、現在のモジュールの方法または変数を導出するために使用され、唯一の出口です.moduleオブジェクトはモジュール自体を表します.
    var foo = require('foo.js');
var count = 1;
var plusCount = () => {
  foo.add(count);
};
module.exports = {
  count,
  plusCount
};
    ブラウザがCommon JSに対応していない根本的な原因は、Node.js環境の4つの変数が欠けていることにある.
  • module
  • export
  • require
  • global
    • 1.2特徴
  • は、基本的なデータタイプのコピーである.モジュールによってキャッシュされます.同時に、別のモジュールでモジュールから出力される変数に値を再割り当てすることができます.
  • は、複雑なデータタイプについては、浅いコピーに属する.二つのモジュールが参照するオブジェクトは同じメモリ空間を指すため、このモジュールの値を変更すると他のモジュールに影響を与えます.
    • // b.js
let num = 1;
let obj = {
    name: 'hcd'
};
setTimeout(() => {
  console.log('b.js-num:', num);
  console.log('b.js-name:', obj.name);
}, 1000)
module.exports = {
  num,
  obj
}



// a.js
let mod = require('./b.js')
mod.num = 2;
mod.obj.name = 'newName'
console.log('a.js-num:', mod.num);
console.log('a.js-name:', mod.obj.name);



//  node
node a.js
a.js-num:  2
a.js-name: newName
b.js-num:  1         // 1  
b.js-name: newName  // 1
  • は、requireコマンドを使用してモジュールをロードすると、モジュール全体のコードを実行します.
  • は、requireコマンドを使用して同じモジュールをロードすると、このモジュールは実行されず、キャッシュの中の値を取る.つまり、Common JSモジュールは何回ロードしても、最初のロード時に一回だけ実行します.その後に再ロードすると、システムキャッシュを手動でクリアしない限り、初めて実行した結果に戻ります.
  • 循環ローディングは、ローディング時に実行されます.つまりスクリプトコードはrequireの時に全部実行されます.あるモジュールが「循環ローディング」されると、実行されている部分だけが出力され、実行されていない部分は出力されません.
    • // a.js
exports.done = false
let b = require('./b.js')
console.log('a.js-1', b.done)
exports.done = true
console.log('a.js-2', '    ')




// b.js
exports.done = false
let a = require('./a.js')
console.log('b.js-1', a.done)
exports.done = true
console.log('b.js-2', '    ')




// c.js
let a = require('./a.js')
let b = require('./b.js')

console.log('c.js-1', '    ', a.done, b.done)



  node c.js
b.js-1 false
b.js-2     
a.js-1 true
a.js-2     
c.js-1      true true
    説明:
  • は、ノード.jsにおいてcモジュールを実行する.この時requireキーワードに出会い、a.jsのすべてのコードを実行します.
  • は、aモジュールにおけるexportsの後、requireによってbモジュールを導入し、bモジュールのコードを実行する.
  • は、bモジュールにおいてexportsの後、またrequireによってaモジュールを導入し、ここでaモジュールのコードを実行する.
  • は、あるモジュールが「ループローディング」されているため、実行されている部分だけを出力し、実行されていない部分は出力されません.aモジュールは、exports.done=falseという文だけを実行します.
  • はbモジュールに戻り、b.js-1、export、b.js-2をプリントします.bモジュールの実行完了
  • はaモジュールに戻り、a.js-1、export、b.js-2を印刷する.aモジュール実行完了
  • はcモジュールに戻り、次いでrequireを実行するために、bモジュールを導入する必要がある.aモジュールに導入されているので、このモジュールは実行されず、キャッシュの中の値を取って、直接に値を出力することができます.終了します
    • 2.AMD
    2.1誕生の背景
    common JS規格に基づいたnodeJSが出てきたら、サーバー側のモジュール概念が形成されています.自然にクライアントモジュールが欲しいです.そして、できれば両方の互換性があります.一つのモジュールは変更せずにサーバーとブラウザで実行できます.しかし、重大な制限のため、CommunJS仕様はブラウザ環境には適用されません.大きな問題があるからです.
    　var math = require('math');

　math.add(2, 3);
    第二行はmart.add(2,3)で、第一行はrequire(‘math’)の後に運行しますので、math.jsのロードが完了するまで待つ必要があります.つまり、ロード時間が長いとアプリケーション全体が止まって待つということです.requireは同期されていることに気づきます.
    これはサーバー側の問題ではありません.すべてのモジュールがローカルハードディスクに保存されていますので、同時にロードが完了します.待ち時間はハードディスクの読み込み時間です.しかし、ブラウザについては、これは大きな問題です.モジュールはサーバーの端に置いています.待ち時間はネットの速度によって異なります.長い間待つかもしれません.ブラウザは「仮死」の状態にあります.
    したがって、ブラウザ側のモジュールは、「同期ローディング」を採用することができず、「非同期ローディング」しか採用できません.これがAMD仕様の誕生の背景です.
    Common JSは主にJSのバックエンドでの表現のために制定されています.彼は先端に適していません.AMD(非同期モジュール定義)が現れました.それは主に先端JSの表現に対して規範を制定します.
    2.1 AMD
    AMD(非同期モジュール定義Aynchronous Module Definition):require.jsのモジュール定義の規範化出力です.
  • AMD:
  • モジュール自体とモジュール間の参照は、非同期的にロードされることができ、概念
    • である.
  • 最初に導入されたモジュールで、後に使用される参照モジュールの方法ですので、依存フロント
    • と呼びます.
  • AMDの利点:
  • は、非同期の呼び出しと自身の高拡張性を含む
    • .
  • は、デカップリングを実現し、モジュールはコード内で識別番号によっても検索することができる.
  • require.js
  • はAMDという概念の実現であり、
  • require.jsの誕生は、この二つの問題を解決するためです.
  • は、jsファイルの非同期的なロードを実現し、ウェブページの応答を失うことを避ける.
  • 管理モジュール間の依存性は、コードの作成と維持に便利である.
  • 公式サイト:http://www.requirejs.cn/
    • define(['./package/lib.js'], function(lib) {
      function say(){
           lib.log('this is fn');
       }
       return {
           say:say
       }; 
});
    説明:
  • ./package/lib.jsは私達に依存するモジュールを使用しています.コールバック関数のパラメータlibは導入されたモジュールのすべての方法と属性を表しています.
    • を呼び出すことができます.
  • 以降、現在のモジュールでsay方法を定義し、
    • を出力します.
  • は、先に導入したモジュールであり、後に使用する参照モジュールの方法を見ることができます.だから、私達は依存フロント
    • と呼びます.
    3.CMD
    CmdはSeaJsがモジュール定義の規範化に対してCmdを産出するのです.同期モジュール定義は、概念SeaJsです.SeaJSの作者は元淘宝UIDで、現在は宝先端エンジニアの玉伯を支払います.原則:近くの原則に頼る.
    //        define  
   define(function (require, exports, module) {
       //  require    ，   AMD     ，        ，     ，     ，       ，     
           var $ = require('jquery');
           //          
           exports.sayHello = function () {
               $('#hello').toggle('slow');
           };
       });
    4.AMDとCMDの違い
    AMDはrequire.jsを通じてCMDを実現し、sea.jsを通じて実現します.
    同じところ:RequireJSとSea.jsはモジュール搭載器で、モジュール化開発理念を提唱しています.核心価値はJavaScriptのモジュール化開発を簡単に自然にします.
    違い:
  • 位置決めに違いがあります.RequireJSはブラウザ側のモジュール搭載器になりたいです.また、Rhino/Nodeなどの環境のモジュール搭載器にもなりたいです.Sea.jsはWebブラウザの端に集中しています.Node拡張によってNode環境の中で走りやすいです.
  • 準拠の仕様が異なります.RequireJSはAMD(非同期モジュール定義)仕様に従い、Sea.jsはCMD(共通モジュール定義)仕様に従う.ルールの違いは、二つのAPIの違いをもたらします.Sea.jsはCommonJS Modules/1.1とNode Modules仕様に近いです.
  • RequireJSはフロント依存であり、Sea.jsは
    • に近い依存関係である.
  • は開発デバッグのサポートに違いがあります.Sea.jsはコードの開発と調整に非常に関心を持っています.nocache、debugなどのデバッグ用のプラグインがあります.RequireJSはこの面の明確な支持がない.
  • プラグインの構造が違います.RequireJSはソースの中でインターフェースの形を取って、プラグインのタイプは比較的に単一です.Sea.jsは汎用イベント機構を採用しており、プラグインの種類がより豊富です.
    • つまり、RequireJSがProttypeクラスだというなら、Sea.jsはjQueryクラスになるように努めます.
    5.ES 6
    上のAMD、CMD、CommunJsはES 5の時期です.ES 6には他のjsファイルを導入する必要はなく、ES 6は言語標準のレベルでモジュール機能を実現し、しかも実装が非常に簡単で、CommonJSとAMD規格に取って代わることができ、ブラウザとサーバー共通のモジュールソリューションになります.ES 6モジュールの設計思想はできるだけ静的になり、コンパイル時にモジュールの依存関係や入出力の変数が確定できるようになります.Common JSとAMDモジュールは、これらのものを実行時にのみ確認できます.
    ここでは簡単に説明します.阮一峰先生の学習サイトを紹介します.
    http://es6.ruanyifeng.com/#docs/module
    配列の並べ替えと反転