Jsモジュール化導入導出

Jsモジュール化導入導出CommonJs、AMD、CMD、ES6は、モジュール化定義において使用される仕様であり、モジュールの導入と処理モジュールとの間の依存関係を規範化し、命名衝突問題を解決するために、モジュール化方式を使用して複雑なシステムをコード構造に分解し、より合理的に維持可能な管理可能なモジュールである.
Common JSCommonJSはNodeJsサーバエンドモジュールの仕様であり、この仕様によれば、各ファイルはモジュールであり、自分の役割領域がある.一つのファイルで定義されている変数、関数、クラスはすべてプライベートです.他のファイルには見えません.CommonJS仕様の規定により、各モジュールの内部、module変数は現在のモジュールを表します.この変数はオブジェクトで、exports属性は外部インターフェースです.モジュールをロードすると、モジュールexportsの属性がロードされます.つまり、CommonJS仕様はrequireによって導入され、module.exportsとexportsとが導き出される.

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

module.exports = {
    a: a,
    b: b
}

/*
//                            
module.exports = {
    a,
    b
}
*/

// 2.js
var m1 = require("./1.js")

console.log(m1.a); // 1
m1.b(); // 1

exportsを用いて導出しても良いが、exportsのポインタだけでexportsのメモリ領域、すなわちmodule.exportsを指し、書き換えexports = module.exports = {}はポインタの向きを変えてモジュールを導き出すことができないので、簡単に言えばexportsは書き方のための簡単なスキームを提供している.最後はexportsを利用して導出される.また、1つのファイルでmodule.exportsとmodule.exportsを同時に使用すると、exportsの内容だけが導出される.

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

exports.a = a;
exports.b = b;

// exports = { a, b } //      ，      exports            module.exports

// 2.js
var m1 = require("./1.js")

console.log(m1.a); // 1
m1.b(); // 1

AMDmodule.exports仕様はAMDではなく、AMD YES非同期モジュール定義であり、全称AMD仕様は、ブラウザ側のモジュール化ソリューションであり、Asynchronous Module Definition規範導入モジュールは同期ローディングであり、これはサービス端末にとって問題ではない.そのモジュールはハードディスク上に記憶されているので、同期ローディングが完了するまで待つことができるができるが、ブラウザ内のモジュールはネットワークを通じてローディングされている.同期ブロッキングがモジュールのロードが完了すると、ブラウザページのフェイルアウトが発生する可能性があります.CommonJSは、非同期的にモジュールをロードし、モジュールのロードは、後のステートメントの動作に影響を与えません.このモジュールに依存するすべてのステートメントは、1つのコールバック関数で定義されています.ロードが完了するまで、このコールバック関数は動作し、AMDはRequireJS仕様を実装しています.

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
});

define(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){
    // do something
    return {};
});

/**
define require                ，       define        return        (     )，  define              ；require        return  ，         
*/

// html          
// <script src="require.js" defer async="true" > 

CMDAMD共通モジュール定義は、CMDが普及過程においてモジュール定義の規範化出力であり、ブラウザ側のモジュール化非同期解決策でもあり、SeaJSとCMDの違いは主に以下の通りである.

は、依存するモジュールについて、AMDは、事前に実行された(相対的に定義されたコールバック関数であり、AMDキャリアは、事前にすべての依存性をロードし、実行を呼び出してからコールバック関数を実行する)AMDは、遅延実行である.(相対的に定義されたコールバック関数は、CMDキャリアは、すべての依存性をローディングした後にコールバック関数を実行し、依存モジュールが必要になったときにローディングの依存項を実行してコールバック関数に戻る)が、CMDから

を遅延して実行するように変更されてもよい.

RequireJSは依存前置であり(モジュールを定義する際にその依存性を宣言するモジュール)、2.0は依存近距離である(あるモジュールを使用するときだけ AMDに行きます.必要に応じてロードします.すなわち、使用します.)

.

define(function(require,exports,module){
　　var a = reuire('require.js');
　　a.dosomething();
　　return {};
});

ES 6CMDは、言語標準レベルでモジュールの機能を実現したもので、ブラウザおよびサーバ共通のモジュールソリューションとなるためにrequireとES6を使用してモジュールを導出し、ES6を使用してモジュールを導入する.また、ブラウザ環境でexportを使用してexport default、importから導出されたモジュールを導入することができるが、依然として構築されている.require標準導入モジュールを使用します.export、export defaultは主に以下の違いがあります.

importは必要に応じて導入できます.exportは

は無理です.

export defaultは複数あってもいいです.exportは一つの

しかありません.

export defaultは、直接変数式を導出することができ、exportは

を実行することができません.

export default方式で導出され、導入時にexportを追加し、export defaultは

を必要としない.

// 1.js
var a  = 1;
var b = function(){
    console.log(a);
}

var c = 3;
var d = a + c;

var obj = { a,b,c }



export {a,b};

export {c,d};

export default obj;

    





    import {a,b} from "./1.js"; //   export
    import m1 from "./1.js"; //   {}   export default 
    import {c} from "./1.js"; //   export     
    
    console.log(a); // 1
    console.log(b); // ƒ (){ console.log(a); }
    console.log(m1); // {a: 1, c: 3, b: ƒ}
    console.log(c); // 3

参照

https://segmentfault.com/a/1190000010426778
https://www.cnblogs.com/leftJS/p/11073481.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/zhoulujun/p/9415407.html
https://www.cnblogs.com/moxiaowohuwei/p/8692359.html